Vue-cli3使用Mock模拟数据 | 豆豆

    项目在前后端分离开发模式中，传统都是后端给前端提供一个接口，再由前端进行请求渲染测试。往往前后端开发进度不一致，前端只能使用本地进行数据渲染的测试。

这里我们用到的是自带的Mock进行模拟数据，这样就不用再依靠后端测试啦🛀
基础环境：Node.js(6.0+) + Vue-cli3 + Axios

零、Vue-cli3配置

在使用Vue-cli构建项目的时候可以在vue.config.js中配置devServer开启服务，用路由模拟接口进行测试。

注意：Vue-cli3和Vue-cli2配置方法不同，这里主要演示Vue-cli3

Vue-cli3目录结构如下（mock手动创建用于储存模拟数据）：

这里我们需要手动创建并配置vue.config.js文件，完整配置可在官网查看，在这主要配置devServer

//mock 模拟数据
const LoginData = require('./mock/Login.json');

module.exports={
  devServer: {
    port:9099,
    before: app => {
      //登录获取token
      app.post('/oauth/token',(req,res,next)=>{
          res.json(LoginData.Token);
      })
      //登录获取用户名再次授权
      app.post('/users/CurrentUser',(req,res,next)=>{
          res.json(LoginData.CurrentUser);
      })
      //退出
      app.get('/oauth/logout',(req,res,next)=>{
          res.json(LoginData.LogOut);
      })
    }
  }
}

配置完成后就可以开始模拟测试了
注意：每次更改了vue.config.js都需要重新启动项目
npm run serve

一、运行效果

二、进行实践

模拟数据json
./mock/vue.config.js

{
    "Token":{
        "code": "200"
        ,"refresh_token": "123"
        ,"access_token": "123"
        ,"username": "AmosHuKe"
    },
    "CurrentUser":{
        "code": "200"
        ,"data": {
            "userAccount": "AmosHuKe"
        }
    },
    "LogOut":{
        "code": "200"
    }
}

axios请求地址基本配置

使用模拟的接口API配置使用

登录调用接口

获得了模拟的数据

接口传参

配置 body-parser 接收参数进行模拟增删改查
接口使用 req.body 进行接收参数

let bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))

三、问题

1、注意在本地模拟请求数据的时候axios的默认请求地址127.0.0.1:xxxx和localhost:xxxx，项目访问地址是有区别的。如果axios请求是127.0.0.1:xxxx，那么项目也需要用127.0.0.1:xxxx访问地址才能请求到模拟数据，用localhost也是同样的道理。

转载请遵循 协议许可
本文所有内容严禁任何形式的盗用
本文作者：Amos
本文链接：https://amoshk.top/2019050101/