各模块技术点+难点
用mock.js来模拟假数据
他可以为我们提供模拟的数据,让我们在开发中便于测试,当后端接口设计好后,只需要将对应的接口请求函数的路径换掉,其他的地方不变,这样就大大提高了我们的开发效率
1.首先,我们需要安装相应的依赖
npm i mockjs --save
2.然后在项目对应的src下创建一个文该件夹mock,在这个文件夹内部创建一个mock.js的文件,在该文件内部,模拟mock产生的模拟数据格式。
先引入mock.js
const Mock = require('mockjs')
获取mock.Random对象
const Random = Mock.Random
模拟数据:先创建一个生成数据的函数,在该函数内部创建一个空的数组dataList,然后使用for循环遍历产生对象,给每个对象添加所需要的相应的属性,然后将产生的对象添加到我们事先创建好的dataList当中,然后返回该数组。
// 模拟数据,包括标题、内容、创建时间
const data = function () {
let dataList = []
for (let i = 0; i < 20; i++) {
let dataObject = {
title:Random.ctitle(), //Random.ctitle(min,max) 随机产生一个中文标题,长度默认在3-7之间
content:Random.cparagraph(), //Random.cparagraph(min,max) 随机生成一个中文段落,段落里句子个数默认3-7个
createdTime:Random.date(),//Random.date() 指定生成的日期字符串格式
img:Random.image(),// 生成默认图片
username:Random.cname() //生成默认名字
}
dataList.push(dataObject)
}
return dataList
}
请求本地的url路径,返回模拟的数据
// 请求该url,就可以返回dataList
Mock.mock('http://localhost:8080/mock/mock_data',data)
3.在main.js中引入mock文件,表明我们要使用的模拟数据
4.在对应的 .vue文件来发送get请求获取数据