vue项目结合Mock+Express模拟后台假数据
项目
该项目使用了node中的express+mockjs实现了动态模拟接口，已封装，可多处使用。
Mock.js官方定义生成随机数据，拦截 Ajax 请求。
目录结构
我这里用的是vue-cli3创建的新项目，然后在目录下创建了mock文件夹，用来存放模拟数据的代码，在其中新建了一个serve.js文件。
首先安装express
npm install -save express
在serve.js里写一个简单的express服务：
let express = require('express');
let app = express();
app.get('/',function (req,res) {
res.send(`Hello, World
`)
})
app.listen(8081,function(){
console.log('服务器已启动')
})
然后启动项目
我是在test整个项目下直接启动的serve.js，所以带了mock这个文件夹名字，如出现上图的效果，说明启动成功。
然后在浏览器输入http://localhost:8081就可以看到页面加载出来了
启动的话也可以在项目的package.json中的scripts里加上
"mock": "node api/app.js"
这样我们就可以npm run mock启动这个文件了，也可以实现同样的效果。
上面的实现了效果之后，接下来我们先引入mockjs
npm install --save-dev mockjs
然后修改servr.js:
let express = require('express');
let app = express();
let Mock = require('mockjs');
app.get('/',function (req,res) {
res.send(`Hello, World
`)
});
app.use('/api/test/project',function(req,res){
res.json(Mock.mock({
'code':200,
'data|1-9':[{
'id|+1':1
}]
}))
});
app.listen(8081,function(){
console.log('服务器已启动')
})
重新启动serve.js，在浏览器输入http://localhost:8081/api/test/project，就可以看到返回的数据：
在vue中使用
简单的在app.vue中写一个axios请求
mounted(){
axios.get('/api/test/project').then((data)=>{
console.log(data)
}).catch((err)=>{
console.log(err)
})
}
记得先引入axios，import axios from 'axios'。
启动vue项目后会发现
因为我们vue项目的端口是8080，而serve.js端口号是8081，端口号不同，跨域了，需要我们配置下Vue.config.js
module.exports={
devServer:{
proxy:{
//反向代理
'/api':{
target:'http://localhost:8081/',
}
}
}
}
重新启动vue项目，刷新页面，请求成功
可是这样serve.js的复用性不是很高，我们可以把代码再封装下，在mock文件夹下再建一个test.js文件。代码如下：
let express = require('express');
let router = express.Router();
let Mock = require('mockjs');
router.get('/project',function (req,res) {
let data = Mock.mock({
'code':200,
'data|1-9':[{
'id|+1':1
}]
});
return res.json(data);
})
module.exports = router;
然后再把serve.js修改下
let express = require('express');
let app = express();
let Mock = require('mockjs');
let router = express.Router();
app.get('/',function (req,res) {
res.send(`Hello, World
`)
});
router.use('/test',require('./test'));
app.use('/api',router)
app.listen(8081,function(){
console.log('服务器已启动')
})
重启下serve.js；刷新下页面
请求成功，修改成功，这样我们以后增加接口和修改数据只需修改test.js文件即可。
小知识点
- req.query: 解析url中的querystring，如?name=haha，req.query 的值为{name: ‘haha’}
- req.params: 解析 url 中的占位符，如/:name，访问/haha，req.params 的值为{name: ‘haha’};
- req.body: 解析后请求体，需使用相关的模块，如 body-parser，请求体为{“name”: “haha”}，则 req.body 为 {name: ‘haha’};
可以根据请求方式打印出来具体的参数查看是否传参成功。 - app.use(path,callback)中的callback既可以是router对象又可以是函数
- app.get(path,callback)中的callback只能是函数。
- npm i --save ==dependencies 项目（运行时，发布到生产环境时）依赖
- npm i --save-dev ==devDependencies 工程构建（开发时，打包时）依赖；
如有不足，请大家及时指出。