在Vue中安装和使用 Mock 进行数据模拟 (图文教程）

查看本专栏目录

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

热门推荐	内容链接
1	openlayers 从基础到精通，300+代码示例
2	leaflet 热门分解学习教程，150+图文示例
3	cesium 从0到1学习指南，200+代码示例
4	mapboxGL 从入门到实战，150+图文示例
5	canvas 示例应用100+，揭密底层细节
6	javascript从基础到高级，示例展示200+
7	vue2 实战指南，100+个细节深度剖析

在做前后分离的项目时候，比如制作VUE项目，很多时候后端没有提供接口，前端人员可以自己通过mock来造一个接口，返回数据

操作步骤

1） 安装mockjs和axios：

npm install mockjs -S
npm install axios -S （用于页面调用接口数据）

2）创建mock.js文件（以与main.js同级为例子）

var Mock = require(‘mockjs’)
Mock.mock(“/getNewsList”, () => {
return [1,12,3,5,4,45,“nihao”];
})

3）main.js中引用mock.js

require(“./mock.js”)
or
import “./mock.js”

4）页面中发送axios请求，获取数据

import axios from “axios”
export default {
mounted() {
axios.get(“/getNewsList”).then(res => {
console.log(res)
})
}
}

实际例子

效果图

主要目录结构

mock/index.js 代码

//mock/index.js 
import Mock from 'mockjs' //引入mockjs，npm已安装 
import {
   
    Random,toJSONSchema } from 'mockjs' // 引入random对象,随机生成数据的对象，（与占位符@一样） 
Mock.