vue项目中使用mock.js模拟数据

vue项目中使用mockjs模拟数据

创建
1、在vue项目的根目录下创建mock文件夹。

2、下载依赖

npm i axios --save     //安装axios

npm i mockjs --save     //安装mock.js

npm i json5 --save    //安装json5依赖

使用
1.在mock文件夹下创建index.js（入口文件）和userinfo.json5 文件（用于存放模拟的数据）

2.在index.js引入相应模块，做读取模拟数据返回给前端

const fs = require('fs') //引入fs模块

const path = require('path') //引入path模块

const json5 = require('json5') //引入json5模块

const Mock = require('mockjs'); //引入mockjs

//公共函数，用来读取要模拟的数据模板

function getJSON(filepath) {

  //读取文件

  var json = fs.readFileSync(path.join(__dirname, filepath), 'utf-8')

  return json5.parse(json) //json5格式化

}

module.exports = function (app) {

  //设置请求路径

  app.get('/user/userinfo', (req, res) => {

    var json = getJSON('./userinfo.json5'); //传入路径

    res.json(Mock.mock(json))

  })

}

3. mock文件夹下的userinfo.json5。 （不会mock.js的可自行去mock.js查看官方文档）

{

  id: "@id", //随机id
  
  userName: "@cname()", //随机中文名字
  
  date: "@date()", //日期
  
  avatar: "@image('200x200','red','#fff','MOCK')", //url
  
  ip: "@ip()", //ip
  
  email: "@email()",    //邮箱
}

拦截请求配置（最关键的一步）
根目录下vue.config.js中配置 before: require("./mock/index")

拦截请求，将请求转发到mock文件夹下的index.js文件

module.exports = {
  devServer: {
    open: true, //自动在浏览器打开
    before: require("./mock/index") //拦截请求，将请求转发到mock文件夹下的index.js文件
  }
};

在mian.js中挂载axios

// axios 配置
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8080'
Vue.prototype.$axios = axios

请求
baseUrl为vue项目的端口 默认一般都是 http://localhost:8080,

created() {
    this.getLsit();
    // this.getPostList();
  },
  methods: {
    getLsit() {
      this.$axios
        .get(this.baseUrl + "/user/userinfo")
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
    },
    }

启动项目

到此，大功告成