前端mock数据安装

90 阅读 0 评论 60 点赞

我是靠谱客的博主迷人路人，这篇文章主要介绍前端mock数据安装，现在分享给大家，希望可以做个参考。

在后端接口没有写完，保证不影响前端开发进度的情况，可以前端自行模拟数据进行页面联调，直接上代码！

官网：Mock.js

Mock.js

生成随机数据，拦截 Ajax 请求

安装

npm install mockjs

在main.js里

复制代码

1
2
3
// 测试用的代码
import axios from 'axios'
Vue.prototype.$http = axios

在vue.config.js里的

复制代码

1
2
3
4
5
6
devServer: {

    before: require('./mock/index.js'), // 引入mock/index.js
...

},

创建一个mock文件夹，里面新建一个json数据，和一个读取json数据解析返回

在index.js里

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')// mockjs 导入依赖模块
const bodyParser = require('body-parser');

// 读取json文件
function getJsonFile(filePath) {
  // 读取指定json文件
  var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
  // 解析并返回
  return JSON.parse(json)
}

// 返回一个函数
module.exports = function (app) {
  if (process.env.MOCK == 'true') {
      app.get('/roles', function (req, res) {
          let json = getJsonFile('./roles.json')
          res.json(Mock.mock(json))
      })
  }
}

在json文件里

复制代码

1
2
3
4
5
6
7
8
9
{
  "rows":[
    {
      "id": 204,
      ...
    }
  ],
  "total": 1
}

调用

复制代码

1
2
3
4
5
6
7
8
9
let _this = this;
this.$http.get('http://localhost:82/roles').then(function (res){
if (res.status !== 200) {
  return this.$message.error('获取列表失败！')
}
_this.list = res.data.rows;
_this.total = res.data.total;
_this.loading = false;
})

结果