前后端分离的开发中，如果要同时进行开发，可以前端先模拟数据
mock.js
1.安装
npm install mockjs --save-dev
2.新建src/mock.js文件
mockjs里面有很多方法，可以模拟许多数据
1
2
3
4
5
| import Mock from 'mockjs';
export default Mock.mock('msg', {
'user' : 'a',
'password|1-100': 100
});
|
3.使用
在模块化开发中，methods方法里面使用axios获取数据，由于axios已经设置过全局注册，所以使用了this.axios
import mockdata from "@/mock.js"
1
2
3
4
5
6
7
8
| methods:{
onSubmit(){
this.axios.get('msg').then(res=>{
// this.data1 = res.data;
console.log(res);
})
}
}
|
json-server
项目练习到后面才感觉json-server居然没有post请求
1.安装
npm install json-server --save
2 .db文件
在根目录下和index同级的位置新建db.json文件，例如
1
2
3
4
5
6
7
8
9
| {
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
|
3.设置json-server
在build/webpack.dev.conf.js中加入如下代码（之前是在 build/dev-server.js）
1
2
3
4
5
6
7
8
9
10
| const jsonServer = require('json-server')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
server.use(middlewares)
server.use(router)
server.listen(3000, () => {
console.log('JSON Server is running')
})
|
4.设置代理
config/index.js中找到proxyTable
1
2
3
4
5
6
7
8
9
| proxyTable: {
'/api': {
changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
target: 'http://localhost:3000',// 接口的域名
pathRewrite: {
'^/api': ''//后面可以使重写的新路径，一般不做更改
}
}
}
|
5.使用数据
api/后面的路径是db.json的字段名称，对象或者是数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| methods:{
Submit(){
this.axios.get('/api/posts')//代替http://localhost:3000/posts
.then((res) => {
console.log(res)
})
}，
//删除数据
deletepizza(index){
this.axios.delete('/api/pizzamenu/'+index).then(res=>{
this.showpizza();
})
}
}
|
6.启动 npm run dev
7.参考This is an json-server.
