最新记录vue项目造开发环境用的模拟数据mockjs过程详解有图，2024前端进阶新篇章

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

vue项目中mock.js的使用及基本用法 mockjs模拟新闻数据

在刚才的基础上

mock.js

// import mock from ‘mockjs’

// mock.js

// 引入mockjs

const Mock = require(‘mockjs’)

// 获取 mock.Random 对象

const Random = Mock.Random

// mock新闻数据，包括新闻标题title、内容content、创建时间createdTime

const produceNewsData = function () {

let newsList = []

for (let i = 0; i < 20; i++) {

let newNewsObject = {

title: Random.ctitle(), // Random.ctitle( min, max ) 随机产生一个中文标题，长度默认在3-7之间

content: Random.cparagraph(), // Random.cparagraph(min, max) 随机生成一个中文段落，段落里的句子个数默认3-7个

createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；

}

newsList.push(newNewsObject)

}

return newsList

}

// 请求该url，就可以返回newsList

Mock.mock(‘/mock/news’, produceNewsData) // 后面讲这个api的使用细节

app.vue

// 挂载的时候获取新闻列表

mounted() {

this.axios.get(‘/mock/news’).then(res => { // url即在mock.js中定义的

console.log(res.data) // 打印一下响应数据

})

},

运行效果:

商品有关

const Mock = require(“mockjs”);

let data = Mock.mock({

“data|100”: [ //生成100条数据 数组

{

“shopId|+1”: 1,//生成商品id，自增1

“shopMsg”: “@ctitle(10)”, //生成商品信息，长度为10个汉字

“shopName”: “@cname”,//生成商品名 ， 都是中国人的名字

“shopTel”: /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号

“shopAddress”: “@county(true)”, //随机生成地址

“shopStar|1-5”: “”, //随机生成1-5个星星

“salesVolume|30-1000”: 30, //随机生成商品价格 在30-1000之间

“shopLogo”: “@Image(‘100x40‘,‘#c33‘, ‘#ffffff‘,‘小北鼻‘)”, //生成随机图片，大小/背景色/字体颜色/文字信息

“food|7”: [ //每个商品中再随机生成七个food

{

“foodName”: “@cname”, //food的名字

“foodPic”: “@Image(‘100x40‘,‘#c33‘, ‘#ffffff‘,‘小可爱‘)”,//生成随机图片，大小/背景色/字体颜色/文字信息

“foodPrice|1-100”: 20,//生成1-100的随机数

“aname|14”: [

{

“aname”: “@cname”,

“aprice|30-60”: 20

}

]

}

]

}

]

})

Mock.mock(/goods/goodAll/, ‘post‘, () => { //三个参数。第一个路径，第二个请求方式post/get，第三个回调，返回值

return data

})

2.25

这里最重要的是仿照这个写一个和如下图接口类似的数据

// 商品

let shopdata = Mock.mock({

‘status’: 200,

‘msg’: ‘’,

‘data|20’: [ // 生成20条数据 数组

{

‘id|+1’: 1, // 生成商品id，自增1

‘name’: ‘@cname’, // 生成商品名 ， 都是中国人的名字

‘price|30-1000’: 30, // 随机生成商品价格 在30-1000之间

‘description’: ‘@ctitle(10)’, // 生成商品信息，长度为10个汉字

‘type|1’: [ ‘文创’, ‘航鲜’, ‘旅游’ ],

‘thumbUrls’: [ ‘@Image(‘40x40‘,‘#c33‘)’, ‘@Image(‘40x40‘,‘#c33‘)’, ‘@Image(‘40x40‘,‘#c33‘)’, ‘@Image(‘40x40‘,‘#c33‘)’ ],

‘isfree|1’: [0, 1] // 0收费 1免费

}

]

})

// 三个参数。第一个路径，第二个请求方式post/get，第三个回调，返回值

Mock.mock(‘/api/news/list’, ‘get’, () => { return shopdata })

任意.vue文件

// 挂载的时候获取新闻列表

mounted() {

this.axios.get(‘/api/item/list’).then(res => { // url即在mock.js中定义的

console.log(res.data) // 打印一下响应数据

})

},

输出结果

---

mockjs语法学习

---

数组随机三选一

Mock.mock({

“array|1”: [

“AMD”,

“CMD”,

“UMD”

]

})

打印

{

“array”: “CMD”

}

希望把这个数据更新到页面显示出来

出现的问题：上面的mounted可以打印出来数据，底下的这个不可以

早上写了一下游戏的模拟数据，本想把游戏和视频的模拟数据写好了显示到页面

然后就一直报错

我认为这个错可能和props传值有关，因为获取不到数据所以报错了。所以我放弃这个转战去显示shop的数据，因为这个页面还没怎么写完所以比较好改动

然后我就尝试了一下把接口写进了created里面

结果：

看来我猜的没错，是因为mockjs不识别传过去的参数，就没拦截

遇到的问题

使用 Mock.mock(’/api/item/list’, ‘get’, () => { return shopdata }) 的时候，它只会拦截url等于/api/item/list 的请求，而对于带参数的请求，如/api/item/list?type=文创，因为不等于/api/item/list 就拦截不到。

2.28

那就解决一下Mockjs如何拦截带参数的GET请求的问题

Mock.mock

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】