vue使用模拟数据接口mock.js和json-server

前后端分离的开发中，如果要同时进行开发，可以前端先模拟数据

mock.js

1.安装
npm install mockjs --save-dev

2. 新建src/mock.js文件
   mockjs里面有很多方法，可以模拟许多数据

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"

       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文件，例如

{
  "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）

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

 proxyTable: {
        '/api': {
            changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
            target: 'http://localhost:3000',// 接口的域名
            pathRewrite: {
              '^/api': ''//后面可以使重写的新路径，一般不做更改
            }
        }  
    }

5.使用数据
api/后面的路径是db.json的字段名称，对象或者是数组

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.