欢迎光临
我的个人博客网站

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

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

 

可以到如上信息,并在浏览器地址栏中输入 http://localhost:3000/

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

 

 此时我们的初步工作已经完成了,接下来新建 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 

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

 

 添加如下代码

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

 然后重启服务,在浏览器中输入 http://localhost:3000/userInfo,可以看到生成的10条数据

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

 

 

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

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

 

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

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

这是因为我们启动的数据服务是在内网环境下,并且端口是 3000 ,和我们项目的启动端口不一致,导致请求跨域,所以我们要在项目中配置一下代理,来解决这种跨域问题,在 vue.config.js 中添加代理

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

 

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

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

 

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

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

 

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

 

 可以看到设置完代理后成功的获取到了数据,同时 node server 的黑窗口中看到我们请求时携带的参数

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

 

 我们可以根据这个参数去处理一些具体逻辑,返回不同数据,这里不做演示。接着我们再来写一个 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 请求该接口,并传递几个参数

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

 

 点击按钮后查看控制台

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

 

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

 

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

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

 

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

完。

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

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » koa2+mock实现一个数据服务器
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏