1. 在webpack.dev.conf.js 里面找到 const portfinder = require(‘portfinder’),然后在下面写上以下代码:
//添加mock数据 //node.js开发框架express,用来简化操作 const express = require('express'); //创建node.js的express开发框架的实例 const app = express(); //加载本地的json地址 var appData = require('../db.json'); var apiRoutes = express.Router(); app.use('/api',apiRoutes);
接着,找到 devServer 的选项,在其{}里面补上一下代码:
//添加mock接口数据 before(app) { app.get('/api/appData',(req, res) => { res.json({ data: appData })//接口返回json数据,上面配置的数据appData就赋值给data请求后调用 }) }
操作如下图:
2. 接着创建一个 db.json 文件。(目录自己设置就行)
注意:不管用get或者post方法,每个数据都得加上一个id(即使后面不需要用到),如果不加的话,运行项目(cnpm run dev)的时候会报错。
3. 接着配置 .vue 文件。
export default {} 里面写上一下代码,并且记得在data里面补上数组的名字:
created: function () { this.$http.get('/api/appData') .then( (res) => { // console.log(res.data); this.infor = res.body.data.appData; }, (req) => { console.log(req) }) }
接着在 template 标签里面用 v-for 将数据渲染出来:(下面只是举个例子)
接着在 template 标签里面用 v-for 将数据渲染出来:(下面只是举个例子)
4. 配置完成后需要用命令重新启动项目
cnpm run dev
5. 效果图如下:
6. 数据成功渲染到页面上,也就是说模拟数据成功!