使用koa-generator快速搭建 Koa项目和使用

使用koa-generator快速搭建 Koa项目

全局安装

1、安装koa-generator

npm i koa-generator -g 

2、创建项目

koa2 project-name

3、 进入项目，安装依赖

cd project-name
npm i

4、运行项目

npm run dev // 或者 npm start

注意：处理前后端跨域问题

安装 koa2-cors 
npm i koa2-cors -S

在app.js中配置跨域解决

// 处理跨域 
const cors = require('koa2-cors');

// 配置中间件
app.use(cors({
  origin:function(ctx){
    return 'http://localhost:8080';
  }
}))

新建data文件用于用户的权限

data中新建user.js

module.exports = [
  {
    id:1,
    name:'fqniu1',
    auth:[]
  },
  {
    id:2,
    name:'fqniu2',
    auth:[]
  },
  {
    id:3,
    name:'fqniu3',
    auth:[]
  }
]

user.js

module.exports = [
  {
    id:1,
    name:'fqniu1',
    auth:[2,3,6,7]
  },
  {
    id:2,
    name:'fqniu2',
    auth:[2,3,5,6,7,8]
  },
  {
    id:3,
    name:'fqniu3',
    auth:[2,3,4,5,6,7,8]
  }
]

router.js

module.exports = [
  {
    id:2,
    pid:0, //证明是第一层路由，无父级
    path:'/course', // 根路由需要加 / 
    name:'Course',
    title:'课程管理'
  },
  {
    id:3,
    pid:2, // 意思是id为2的子级
    path:'operate', // 子路由不需要加 /
    name:'Operate',
    link:'/course/operate',
    title:'课程操作'
  },
  {
    id:4,
    pid:3, // 意思是id为3的子级
    path:'info_data',
    name:'CourseInfoData',
    link:'/course/operate/info_data',
    title:'课程数据'
  },
  {
    id:5,
    pid:2, // 意思是id为2的子级
    path:'add',
    name:'CourseAdd',
    link:'/course/add',
    title:'课程添加'
  },
  {
    id:6,
    pid:0, // 证明是第一层路由，无父级
    path:'/student',
    name:'Student',
    title:'学生管理'
  },
  {
    id:7,
    pid:6, // 意思是id为2的子级
    path:'operate',
    name:'StudentOperate',
    link:'/student/operate',
    title:'学生操作'
  },
  {
    id:8,
    pid:6, // 意思是id为2的子级
    path:'add',
    name:'StudentAdd',
    link:'/student/add',
    title:'学生添加'
  },
]

routes下的index.js

const router = require('koa-router')()

const users = require('../data/user')
const routers = require('../data/router')

// 注意这里面 最好使用 loginCheck 中间件 拦截 防止直接暴露
// router.post('/user_router_auth', loginCheck ,async (ctx, next) => {
  router.post('/user_router_auth',async (ctx, next) => {
  const { uid } = ctx.request.body 
  // 在路由里面来筛选 uid 把uid对应的那一个user那一项拿出来
  if(uid){
    let authRouterInfo = [];
    const userInfo = users.filter(user => user.id == uid)[0]
    // 这里是为了把里面auth和router中一一对应的取出来
    userInfo.auth.map(rid => {
      routers.map(router => {
        if(router.id == rid){
          authRouterInfo.push(router)
        }
      })
    })
    ctx.body = authRouterInfo;
  }else{
    next()
  }
})

module.exports = router

前端请求数据

新建server文件下的index.js

import axios from 'axios'
import qs  from 'qs'

function getUserRouters(uid){
  return axios({
    url:'http://localhost:3000/user_router_auth',
    method:'post',
    headers:{
      'Content-type':'application/x-www-form-urlencoded'
    },
    data: qs.stringify({
      uid
    })
  }).then(res => {
    return res.data
  }).catch(error => {
    throw error
  })
}

export {
  getUserRouters
}

测试请求和数据

<script>
import { getUserRouters } from '@/server';
export default {
  name: "App",
  components: {
    MHeader,
    SideBar,
    PageBoard,
  },
  created() {},
  methods: {},
  async mounted() {
     const data = await getUserRouters(2)
     console.log(data);
  },
}
</script>