需求:完全不用服务器,可以实现跟连上服务器一样的效果,不改动接口,只书写数据
场景:我需要实现一个功能,之前项目是和后台接口直接对接的,我现在不是在家办公嘛,然后我就想脱离后台,在本地弄一个那个模拟数据,可以拦截get,post请求
百度搜了很多的资料,比较了之后,选择了mockjs,我认为它可以解决我的大部分问题
这文章简直说到了我的痛点,且看
什么是mockjs
生成随机数据,拦截 Ajax 请求。
通过随机数据,模拟各种场景;不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据;支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;支持支持扩展更多数据类型,支持自定义函数和正则。
优点
非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型
mockjs在本地即可以实现基本的图片,文字展示,拦截get,post请求并把本地数据渲染到页面
不足 我至今没查到这个如何把本地的图片,或者视频导进来
解决mock和后端接口的切换问题和生产环境、开发环境配置的问题
1下载mockjs: n
pm i mockjs --save
2main.js
// 开发环境 因为只在开发环境使用.if里面不能用import方式导入 当项目启动后,mock会拦截他规则内的http请求
if (process.env.NODE_ENV === 'development') {
require('./mock/mock.js')
}
3src下新建 mock/mock.js文件,编辑mock.js文件,大概逻辑文件如下
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(),