茶百道项目开发纪要

231 阅读2分钟

1. 开发纪要

12月19号开始学习,每天学习两章

eggjs 官网: www.eggjs.org/zh-CN/intro…

如果官网搞错,就用这个命令初始化项目: egg-init --type simple

2. 开发步骤

2.1 兴建项目

mkdir /Users/jlgl/Documents/chabaidao/naicha-node

npm init egg --type=simple

npm install

npm run dev

然后访问http://127.0.0.1:7001/

image.png

2.2 如何去掉 eslint校验

image.png

image.png

2.2 eggjs 整合mongodb

www.eggjs.org/zh-CN/basic…

可以进入github.com/eggjs/egg-m…

执行命令:npm i egg-mongoose --save

image.png

plugin.js 当中引入

module.exports = {
  mongoose:{
    enable: true,
    package: 'egg-mongoose',
  }
};

config.default.js 配置连接信息

 config.mongoose = {
    url: 'mongodb://root:dyw862749167@1.117.109.40:27017/chabaidao?authSource=admin'
  };

app 下建立模型model文件夹,创建js, 这个地方就是来定义集合的类型

{versionKey: false} 这个写了以后就不返回version了

module.exports = app => {
    const mongoose = app.mongoose;
    mongoose.pluralize(null);
    const Schema = mongoose.Schema;
    const Login = new Schema({
        name: String,
        age: {
            type: Number,
            required: true,
            default: 100
        }
    }, {versionKey: false});
    //第一个参数以大写开头
    return mongoose.model("Login", Login);
}

如何使用

class LoginController extends Controller {
  async login() {
    const { ctx,service } = this;
    const res = await ctx.model.Login.find();
    console.log(res);
    ctx.body = {
      data: res
    }
  }
}

2.3 制作一个post请求

post请求报这个,我们需要在config.default.js中添加这个

//取消安全威胁csrf的防范
  config.security = {
    csrf:{
      enable: false
    }
  };
  
router.js 当中写入路由
router.post("/api/admin/register", controller.admininfo.adminRegister);

image.png

2.4 引入校验模块

引入模块:npm i egg-validate --save

plugin.js 中写入下面的代码,这样app就可以解构validator 对象了

validate : {
    enable: true,
    package: 'egg-validate',
  }

config.default.js 需要配置校验

//配置校验
  config.validate = {
    convert: true,
    // validateRoot: false,
  };

使用

module.exports = app => {
    const { validator } = app;
    validator.addRule("adminPhone", (rule, value)=> {
        if(!/^1\d{10}$/.test(value.trim())){
            return rule.tips;
        }
    })
}

2.5 项目引入jsonwebtoken

参考官方网站:www.npmjs.com/package/jso… ,搜索:jsonwebtoken

npm install jsonwebtoken

config.default.js 中配置:

config.jwt = {
    secret: "dingyawuceshi",
    expiresIn: 60 * 60 * 24 * 3
  };

整体封装

var jwt = require("jsonwebtoken");
generateToken(uid){
    const {secret, expiresIn} = this.app.config.jwt;
    return jwt.sign({uid}, secret, {expiresIn});
}

使用

const token = {admin_token:this.ctx.generateToken(res[0].adminUid)};

2.6 安装跨域插件

参照官网:github.com/eggjs/egg-c… npm i egg-cors --save plugin.js

cors: {
    enable: true,
    package: 'egg-cors',
  }

config.default.js 中配置:

//跨域
  config.cors = {
    origin: '*',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH'
  };

2.7 naicha-pc 登录

npm install, npm run dev

2.8 阿里云OSS nodejs应用

安装:npm install ali-oss --save

help.aliyun.com/zh/oss/deve…

配置访问控制

image.png

config.default.js配置, 这个配置以后就绑定在app中了

//阿里云对象存储
  config.oss = {
    accessKey:"",
    accessSecret:"",
    bucket:"yawu-chabaidao",
    region:"oss-cn-shanghai",
    folder:"baidao/"
  };

在controller中使用

我参考的是这个:help.aliyun.com/zh/oss/deve…

const { ctx ,app } = this;
const client = new OSS({
      region: app.config.oss.region,
      accessKeyId: app.config.oss.accessKey,
      accessKeySecret: app.config.oss.accessSecret,
      bucket:app.config.oss.bucket,
      secure: true
    });
const headers = {
  "Content-Disposition": "inline",
  "Content-Type":"image/jpeg"
};
try {
  const result = await client.put(uploadKey, ctx.request.files[0].filepath,{headers});
  console.log(result);
} catch (e) {
  console.log(e);
}      

对文件重新命名

const fileFormat = ctx.request.files[0].filename.split(".");
const timestamp = new Date().getTime();
const randomNum = Math.floor(Math.random() * 1000);
const uploadKey = `${app.config.oss.folder}${timestamp}${randomNum}.${fileFormat[1]}`;

ctx.request.files : 上传的文件
[
  {
    filepath: '/var/folders/z6/rk5lr_ln6bqfcjc912jd3brc0000gn/T/egg-multipart-tmp/naicha-node/2023/12/24/09/8d34ee36-b5a2-45b3-a59a-ade90461059b.gif',
    field: 'file',
    filename: '2.gif',
    encoding: '7bit',
    mime: 'image/gif',
    fieldname: 'file',
    transferEncoding: '7bit',
    mimeType: 'image/gif'
  }
]

2.9 egg.js 中使用中间件设置jwt权限

www.npmjs.com/package/bas…

ctx.app.config.jwt.secret 注意这个层级关系

service中如何使用ctx, const db = this.ctx.model.Category

const basicAuth = require("basic-auth");
const jwt = require("jsonwebtoken");

module.exports = (options, app) => {
    return async(ctx, next) => {
        const token = basicAuth(ctx.req);
        console.log(token);
        if(!token || !token.name){
            return ctx.send([], 401, "未登录,没有访问权限");
        }
        try{
            var authCode = jwt.verify(token.name,ctx.app.config.jwt.secret);
            console.log(authCode);
        }catch(error){
            if(error.name == "TokenExpiredError"){
                return ctx.send([], 401, "登录过期,请重新登录");
            }
            return ctx.send([], 401, "未登录,没有访问权限");
        }
        ctx.auth = {
            uid: authCode.uid
        };
        await next();
    }
}

3 .mongodb表单设计

3.1 商家信息

3.2 商品类目

4. 小程序设计开发

4.1 前期配置

uniapp官网: uniapp.dcloud.net.cn/quickstart-…

全局安装 vue-cli, npm install -g @vue/cli

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

npm install

填写好appId, npm run dev:mp-weixin

image.png

运行后产生这个文件夹,采用微信开发工具打开就可以

image.png

4.2 页面配置

建立4个tab

image.png

配置app.json

image.png

看到50了