mockjs的使用模拟后端接口

在开发基于api交互、前后端分离的网页应用时，经常会遇到几个问题：

前端页面已经编排好了，但是后台接口还没准备好，或者是突然出现Bug，这样没办法进行对接测试。
我们希望服务器返回特定类型的数据，以测试某页面在特定条件下是否存在问题，但作为前端我们一般不会接触到后端代码和数据库，每次都找后端添加模拟数据又很麻烦。

为解决这两个问题，最简单的解决办法就是搭建一个mock server，专门返回需要的模拟数据。

1.在vue项目中安装mockjs

npm i mockjs

2. 在项目根目录新建文件 vue.config.js

在里面编写模拟接口就好了

例如：

module.exports = {//导出
    configureWebpack:{//webpack配置
        devServer:{//webpack中的服务
            before(app){
                //模拟数据
                let goodsData = [
                    {
                        id:3,
                        name:'mi6',
                        brand:'xiaomi',
                        price:1555
                    },
                    {
                        id:2,
                        name:'p6',
                        brand:'huawei',
                        price:1677
                    },
                    {
                        id:1,
                        name:'a2',
                        brand:'apple',
                        price:2677
                    }
                ];
                //获取数据的接口
                app.get('/api/goods',(req,res)=>{
                    //返回数据
                    res.json({
                        'code':200,
                        data:goodsData
                    })
                })
            }
        }
    }
}

vue中直接axios请求

  created() {
    this.$http.get("/api/goods").then(res=>{//这里axios被我放入至全局了（main.js文件中 import axios from 'axios'； Vue.prototype.$http = axios;）
      console.log(res);
    })
  },

得到数据