vue+koa

vue3中 ref 和reactive
一般基础类型用ref
对象数组用reactive 记得里面多包一层为了避免bug(出现数据更新，视图不更新问题)

vue3 配置
1，组件地址必须带后缀.vue

//正确
import('./../views/Welcome.vue')
//错误
import('./../views/Welcome')

2，vite可配置别名，解决./../问题，类似于vue里面的@

resolve:{
    alias:{
        '@':path.resolve(__dirname,'./src')
    }
}

3,全局的mixin样式问题，可以通过vite进行配置

css:{
    preprocessorOptions:{
        scss:{
            additionalData:`@import  '@/assets/style/base.scss'`
        }
    }
}

vite.config.js 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
const path =require('path')   这个写法需要在版本大于4之上的如果用commonJS写法报错（Dynamic require of "path" is not supported）就要用es6引入
// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import '@/assets/style/base.scss'`
      }
    }
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      // '@': path.resolve(__dirname, './src'),
    }
  },
  server: {
    host: 'localhost',
    port: 8088,
    proxy: {
      "/api": {
        target: 'http://localhost:3000'
      }
    }
  },
  plugins: [vue()],
})

报的错误

项目安装

最新vite 安装
1 npm create vite@latest

koa安装
1,npm install -g koa-generator
or
yarn global add koa-generator
2,进入到项目文件目录，执行下面命令
koa2 manage-server

如果无法使用koa2命令，说明需要配置环境变量，window用户，需要找到koa-generator的安装目录，找到里面bin下面的koa2命令文件，然后配置到环境变量中。
mac用户可直接创建软连接，指向到/user/local/bin中，比如：in-s/users/jack/.config/yarn/global/node_modules/koa-generator/bin/koa2/usr/local/bin/koa2

3, 安装依赖
npm install or cnpm install or yarn

JWT
jwt是一种跨域认证解决方案

数据传输简单、高效
jwt会生成签名，保证传输安全
jwt具有时效性
jwt更高效利用集群做好单点登录

原理

服务器论认证后，生成一个json对象，后续通过json进行通信

数据结构

安装jsonwebtoken 方便生成前端用的token
npm install jsonwebtoken
npmjs.com/package/jsonwebtoken
生成token代码在登录时

router.post('/login', async (ctx) => {
  try {
    const { userName, password } = ctx.request.body
    const res = await User.findOne({
      userName,
      password
    })
    const data = res._doc
    const token = jwt.sign({ //重点
      data: data
    }, 'ldDemo', { expiresIn: 30 });

    if (res) {
      data.token = token
      ctx.body = util.success(data)
    } else {
      ctx.body = util.fail('账号或密码不正确')
    }
  } catch (error) {
    ctx.body = util.fail(error.msg)

  }

})

获取token在请求其它接口处

router.get('/leave/count', (ctx) => {
  const token = ctx.request.headers.authorization.split(' ')[1];
  console.log('token=>', token)
  var payload = jwt.verify(token, 'ldDemo'); //重点

  ctx.body = payload
})

koa jwt是个中间件，必须在启动入口前加载

npm install koa-jwt -S

app.js 后台进入文件

const koajwt=require('koa-jwt')
app.use(koajwt({secret:'ldDemo'}))
// unless 排队不进行token验证的接口如登录
app.use(koajwt({ secret: 'ldDemo' }).unless({
  path:[/^\/api\/users\/login/]
}))

mongoose 方法
接口返回指定内容，登录可不能把密码返回吧

返回数据库指定字段，有三种方式
1,’userId userName’
2,{userId:1,_id:0 } 1是返回，0是不返回
3,select(‘userId’)

1,
await User.findOne({
    userName,
    userPwd
},'userId userName')  //找一条匹配数据，给前端只返回 userId userName
2,
await User.findOne({
    userName,
    userPwd
},{userId:1,_id:0 })
3,
await User.findOne({
    userName,
    userPwd
}.select('userId')) //只返回userId