koa2+mock实现一个数据服务器

做为一名前端开发人员，在平常开发中，不可避免的会和后端联调接口，可是有时候前端页面作完了，后端接口没写完，这样就致使前端的工做没法进一步进行。所以，咱们每每会本身造一些数据，来模拟后台请求，将前端的逻辑提早一步写完，等待后端接口写好以后，替换一下地址就好了。下面咱们一块儿从0搭建mock数据服务器

首先新建文件夹，取名 koa2-demo，在该文件夹下执行

cnpm install koa koa-router koa-cors koa-bodyparser mockjs

执行成功后会有一个 node_modules 依赖包 ，接着在该文件夹下新建 server.js ,并初始化以下代码

 

const Koa = require('koa')
const app = new Koa()
const Router = require('koa-router')
const router = new Router()
const bodyParser = require('koa-bodyparser')
app.use(bodyParser())
// 将koa和中间件连起来
app.use(router.routes()).use(router.allowedMethods());
// 设置启动端口
let port = 3000;
// http://localhost:3000
app.listen(port, (ctx) => {
    console.log('服务启动成功：http://localhost:' + port)
    router.get('/', async (ctx, next) => {
        ctx.body = `
        <h2 style="text-align: center;margin: 10%;">
            当你看到此页面时表示服务启动成功
        </h2>
        `
    })
})

 

 初始化代码后在该文件夹下执行 node server.js

 

能够到如上信息，并在浏览器地址栏中输入 http://localhost:3000/

 

 此时咱们的初步工做已经完成了，接下来新建 state -> userinfo.js ，并初始化以下代码

该代码中引入了 mockjs ，利用 mock 生成了10条数据，使用 get 请求的方法，请求路径为 http://localhost:3000/userInfo 

const Router = require('koa-router')
const router = new Router()
const cors = require('koa-cors')
const Mock = require('mockjs')

//people
const mockPeople = Mock.mock({
    'peoples|10': [{
        'id|+1': 1,
        'guid': '@guid',
        'name': '@cname',
        'age': '@integer(20, 50)',
        'birthday': '@date("MM-dd")',
        'address': '@county(true)',
        'email': '@email',
    }]
});

//ctx.params 路由传值
//ctx.query  参数传值
//ctx.request.body Post参数

router.get('/userInfo', async (ctx, next) => {
    // 打印get请求携带的参数
    console.log(ctx.query);
    // 容许cors跨域请求
    await cors();
    ctx.body = JSON.stringify(mockPeople['peoples'], null, 2);
})

// 导出 router 实例
module.exports = router

 而后在 server.js 中引入刚刚新建的 userinfo.js 

 

 添加以下代码

// get请求用户信息
const userInfo = require('./state/userinfo')
app.use(userInfo.routes(), userInfo.allowedMethods())

 而后重启服务，在浏览器中输入 http://localhost:3000/userInfo，能够看到生成的10条数据

 

 

 咱们在项目代码中用 axios 请求该接口，测试一下可否获取数据成功，我是在 vue 项目中来测试

 

 当咱们点击按钮时发现控制台报了接口跨域的错误

这是由于咱们启动的数据服务是在内网环境下，而且端口是 3000 ，和咱们项目的启动端口不一致，致使请求跨域，因此咱们要在项目中配置一下代理，来解决这种跨域问题，在 vue.config.js 中添加代理

module.exports = {
  devServer: {
    proxy: {
        '/api': {     //这里最好有一个 " / "
            target: 'http://localhost:3000',  // 后台接口域名           
            secure: false,  // 若是是https接口，须要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{ // 接口路径中去掉 api
                '^/api':''
            }
        }
    }
  }
}

 

 而后在修改一下请求的地址以 /api 开头来请求

 

 重启项目后再点击按钮测试，

 

 

 

 能够看到设置完代理后成功的获取到了数据，同时 node server 的黑窗口中看到咱们请求时携带的参数

 

 咱们能够根据这个参数去处理一些具体逻辑，返回不一样数据，这里不作演示。接着咱们再来写一个 post 请求，返回数据，在 state 文件夹下新建 postdata.js , 初始化以下代码

const Router = require('koa-router')
const router = new Router()
const Mock = require('mockjs')

//people
const mockPeople = Mock.mock({
    'peoples|10': [{
        'id|+1': 1,
        'guid': '@guid',
        'name': '@cname',
        'age': '@integer(20, 50)',
        'birthday': '@date("MM-dd")',
        'address': '@county(true)',
        'email': '@email',
    }]
});

// post请求用户信息
router.post('/postUserList', async (ctx, next) => {
    // 打印post请求传递过来的参数
    console.log(JSON.stringify(ctx.request.body, null, 2));

    // 获取post请求参数中携带的id
    const index = ctx.request.body.id;
    ctx.body = mockPeople['peoples'][index]
})

// 导出 router 实例
module.exports = router

而后在 server.js 中引入该文件

// post请求数据
const postdata = require('./state/postdata')
app.use(postdata.routes(), postdata.allowedMethods())

 

 以后重启 node server.js，而后使用 post 请求该接口，并传递几个参数

 

 点击按钮后查看控制台

 

 

 

 发现接口调用成功，而且 server 黑窗口打印了请求过来的参数信息

 

 至此咱们完成了 get 和 post 两种请求方式，返回随机数据。

完。

项目源码：https://gitee.com/songzhengxiang/koa2-demo

mock官方地址：http://mockjs.com/