梦学谷会员管理系统(二)

最新推荐文章于 2021-05-06 07:34:47 发布

原创最新推荐文章于 2021-05-06 07:34:47 发布 · 294 阅读

CC 4.0 BY-SA版权

本文介绍了如何利用Mock.js生成模拟数据，提升前端开发效率。通过安装Mock.js，创建mock数据，设置本地URL响应，可以在开发初期避免依赖后端接口，加快项目进度。主要涉及的技术点包括Mock.js的使用、模拟数据生成、HTTP请求的本地响应以及在项目中的实际应用。

各模块技术点+难点

用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请求获取数据