Vue-cli3使用Mock模拟数据
项目在前后端分离开发模式中,传统都是后端给前端提供一个接口,再由前端进行请求渲染测试。往往前后端开发进度不一致,前端只能使用本地进行数据渲染的测试。 这里我们用到的是自带的Mock进行模拟数据,这样就不用再依靠后端测试啦🛀 在使用Vue-cli构建项目的时候可以在vue.config.js中配置devServer开启服务,用路由模拟接口进行测试。 注意:Vue-cli3和Vue-cli2配置方法不同,这里主要演示Vue-cli3 Vue-cli3目录结构如下(mock手动创建用于储存模拟数据): 这里我们需要手动创建并配置 配置完成后就可以开始模拟测试了 模拟数据json axios请求地址基本配置 使用模拟的接口API配置使用 登录调用接口 获得了模拟的数据 配置 1、注意在本地模拟请求数据的时候axios的默认请求地址
转载请遵循
基础环境:Node.js(6.0+) + Vue-cli3 + Axios零、Vue-cli3配置
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 一、运行效果
二、进行实践
./mock/vue.config.js {
"Token":{
"code": "200"
,"refresh_token": "123"
,"access_token": "123"
,"username": "AmosHuKe"
},
"CurrentUser":{
"code": "200"
,"data": {
"userAccount": "AmosHuKe"
}
},
"LogOut":{
"code": "200"
}
}
接口传参
body-parser
接收参数进行模拟增删改查
接口使用 req.body
进行接收参数let bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
三、问题
127.0.0.1:xxxx
和localhost:xxxx
,项目访问地址是有区别的。如果axios请求是127.0.0.1:xxxx
,那么项目也需要用127.0.0.1:xxxx
访问地址才能请求到模拟数据,用localhost
也是同样的道理。
协议许可
本文所有内容严禁任何形式的盗用
本文作者:Amos
本文链接:https://amoshk.top/2019050101/