vue 中简单使用mock

首先,在vue项目中,安装依赖

# 使用axios发送ajax
cnpm install axios --save
# 使用mockjs产生随机数据
cnpm install mockjs --save-dev
# 使用json5解决json文件,无法添加注释问题
cnpm install json5 --save-dev

二、在根目录下,新建一个mock文件

vue 中简单使用mock_第1张图片

三、在vue.config.js文件中使用mock数据

vue 中简单使用mock_第2张图片

四、配置mock中的index.js数据

const fs = require("fs");
const path = require("path");
const Mock = require("mockjs"); //mockjs 导入依赖模块
const JSON5 = require("json5"); //json5的作用是可以解析json文件中的注释
//读取json文件
function getJsonFile(filePath) {
  //读取指定json文件
  var json = fs.readFileSync(path.resolve(__dirname, filePath), "utf-8");
  //解析并返回
  return JSON5.parse(json);
}

//返回一个函数
module.exports = function (app) {
  if (process.env.MOCK == "true") { 
    //为了满足当后台有接口的时候,不是使用mock数据,在此处做一个判断,可以在.env文件中对设置
    //监听http请求
    app.get("/user/userinfo", function (rep, res) {
      //每次响应请求时读取mock data的json文件
      //getJsonFile方法定义了如何读取json文件并解析成数据对象
      var json = getJsonFile("./userInfo.json5");
      //将json传入 Mock.mock 方法中,生成的数据返回给浏览器
      res.json(Mock.mock(json));
    });
  }
};

五、定义mock的数据

vue 中简单使用mock_第3张图片

 六、在任意一个页面检查自己配置的mock

vue 中简单使用mock_第4张图片

打印的结果是:

vue 中简单使用mock_第5张图片

 七、当项目中接口给到我么们时,我们移除mock的方法

vue 中简单使用mock_第6张图片

在env文件中,进行配置。因为在mock.js文件中,我们已经设置了监听,并进行了判断,所以此处MOCK如果为false,就不会执行mock中的内容。 

推荐查看的相关:

mock在vue里怎么用_大可儿小前端的博客-CSDN博客_mock结合vue

mock大法好,让前端从项目中更加的独立,mock的基本使用和介绍 - 灰信网(软件开发博客聚合)

你可能感兴趣的:(mock,vue.js,javascript,前端)