Vue-cli3使用Mock模拟数据

Author Avatar
Amos
2019-05-01 23:24:12
👀

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

这里我们用到的是自带的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

这里我们需要手动创建并配置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

一、运行效果

Vue

二、进行实践

模拟数据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请求地址基本配置

Vue

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

Vue

登录调用接口

Vue

获得了模拟的数据

Vue

接口传参

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

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

Vue

Vue

三、问题

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

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

评论
✒️ 支持 Markdown 格式
🖼️ 头像与邮箱绑定 Gravatar 服务
📬 邮箱能够收到回复提醒(可能会在垃圾箱内)