mockjs 前端写完 给后台调 mock.js | 改到2.0版本
需求:最近活太忙了,实在是联调没有时间了,无奈又拾起来mockjs
1 安装mockjs
npm install mockjs
// 这是个只在开发的时候用,打包后就没有了,业务更安全
npm install mockjs --save-dev
2 main.js 自动配置导入mock文件
// 实际打包时应该不引入mock
/* eslint-disable */
if (process.env.NODE_ENV !== 'production') require('@/mock/mock.js')
3 mock目录为 @/mock/mock.js
这样写 ctrl+p 直接搜 mock.js就定位到文件了
4 mock的灵魂函数 Mock.mock()
帮助文档
https://github.com/nuysoft/Mock/wiki/Mock.mock()
函数就用这一个 完活
Mock.mock( rurl, template )
记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。
5 template 动态参数帮助文档
http://mockjs.com/examples.html
6 设置延时
Mock.setup({ timeout: 1000 })
7 @/mock/mock.js 文件代码
@/mock/mock.js
import mock from './mockUtils'
import {
gbsCommunicationTempList
} from './mockList'
let useAllMock = true
// 下面一行 取消注释 后将不使用mock 开发时候临时使用
// useAllMock = false
if (useAllMock) {
mock('/api/gbs/communicationTemp/list', gbsCommunicationTempList)
console.info('mock is running')
}
@/mock/mockUtils.js
import Mock from 'mockjs'
Mock.setup({ timeout: 200 })
const mock = (url, func) => {
const rurl = new RegExp(url.replace(/\//g, '\\/'))
// console.info('rurl', rurl)
Mock.mock(rurl, req => {
console.info('-')
console.info('-')
console.info('-==============================')
console.info('api url: ', req.url)
console.info('api params: ', req.body)
const data = func(req)
const res = {
...data, // 返回 data节点 格式必须是 { data: 对象/数组 }
msg: '',
status: 20,
}
console.info('res => ', res)
return res
})
}
export default mock
@/mock/mockList.js
import Mock from 'mockjs'
export const gbsCommunicationTempList = req => {
return Mock.mock({
'data|10': [{
yourKey: 'yourContent',
...otherNodes
})
}
问题记录
早期库的版本是 "mockjs": "^1.0.1-beta3",
url拦截得用 正则 mock(/api/gbs/abc/list/, aaa)
看了个别人的用 或 也很好
'post|/demo': {
'name': '@cname'
}
更新下库 看看能改成字符串吗
"mockjs": "^1.1.0", 从新安装完 版本改成这个了
两个版本库 都是用的 rurl,所以又恢复成老库了
mock 2.0 版本
全局安装 mockjs npm install mockjs
mock数据放在业务目录下 mockData.js
接口调用的时候 this.$api(url, params, { mockData }).then(res => {})
全局 通过 window.isUseMock = true false 控制全局是否开启
if (process.env.NODE_ENV === 'development') window.isUseMock = true
export const api = (url, data, config = {}) => {
const { type = undefined, mockData = null } = config
if (mockData !== null && window.isUseMock) {
console.info('- + + -')
console.info('---- mock 请求 ----')
console.info('url: ', url)
console.info('params: ', { ...data })
console.info('res: ', mockData)
return new Promise(function (resolve, reject) {
resolve(mockData)
})
}
mockjs 前端写完 给后台调 mock.js | 改到2.0版本的更多相关文章
- 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)
预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...
- 后台调用前台JS(查看客户端IE版本)
1.前端代码 </form> //注意放在form下面<script> function readRegedit() { var obj = n ...
- Vue2.0 + ElementUI 手写权限管理系统后台模板(一)——简述
挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616 小提示 ...
- 刚写完的商城erp + 这个商城前台,新鲜出炉。自己1个人写, 包括php框架和前端html页面.
刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面. 刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面.
- 让前端攻城师独立于后端进行开发: Mock.js
一.Mock.js是什么? 目前的大部分公司的项目都是采用的前后端分离, 后端接口的开发和前端人员是同时进行的. 那么这个时候就会存在一个问题, 在页面需要使用大量数据进行渲染生成前, 后端开发人员的 ...
- 一统江湖的大前端(2)—— Mock.js + Node.js 如何与后端潇洒分手
<一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...
- 前后端分离之让前端开发脱离接口束缚(mock)
情景: 领导:小吴啊,最近在忙什么啊? 前吴:(心想:我擦勒,难道划水被领导发现了?也不能怪我啊,后台的哥们接口还没给呢,但要是实话实说不就对不起后台哥们了吗?) ...
- 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题(二)-callback,promise,generator,async-await JS的进阶技巧 前端面试送命题(一)-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制
[原创]分布式之数据库和缓存双写一致性方案解析(三) 正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...
- 前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...
- 前端测试框架Jest系列教程 -- Mock Functions
写在前面: 在写单元测试的时候有一个最重要的步骤就是Mock,我们通常会根据接口来Mock接口的实现,比如你要测试某个class中的某个方法,而这个方法又依赖了外部的一些接口的实现,从单元测试的角度来 ...
随机推荐
- PGL图学习之图游走类metapath2vec模型[系列五]
PGL图学习之图游走类metapath2vec模型[系列五] 本项目链接:https://aistudio.baidu.com/aistudio/projectdetail/5009827?contr ...
- LeetCode刷题日记 2020/03/25
力扣刷题继续! 题目:计算三维形体表面积 题干 在 N * N 的网格上,我们放置一些 1 * 1 * 1 的立方体. 每个值 v = grid[i][j] 表示 v 个正方体叠放在对应单元格 (i ...
- 基于SpringBoot应⽤的logback⽇志配置
SpringBoot默认整合了logback-classic⽇志框架,我们需要对logback⽇志框架进⾏配置 以⾃定义⽇志输出格式.⽇志⽂件配置.⽇志⽂件保存策略等信息 <?xml versi ...
- Python初学(请大神多多指教)
python的注释单行注释用#号多行注释用''' '''注释 基本数据类型 字符串-- n1 = "alex" n2 = 'root' n3 = " ...
- MySQL8 查询优化新工具 Explain Analyze
1.什么是Explain Analyze? Explain 是我们常用的查询分析工具,可以对查询语句的执行方式进行评估(并非实际的执行情况,可能与实际情况存在较大差距),给出很多有用的线索. Expl ...
- [Docker] Dockerfile常用保留字
FROM 基础镜像,当前新镜像是基于哪个镜像的,指定一个已经存在的镜像作为模板.第一条必须是from MAINTAINER 镜像维护者的姓名和邮箱地址 RUN 容器构建时需要运行的命令,也就是在 do ...
- 2023年多校联训NOIP层测试6
2023年多校联训NOIP层测试6 打了 \(10min\) 骗分,就溜了. T1 弹珠游戏 \(0pts\) 没听懂讲评,暂时咕了. T2 晚会 \(20pts\) 部分分( \(20pts\) ) ...
- NC17508 指纹锁
题目链接 题目 题目描述 HA实验有一套非常严密的安全保障体系,在HA实验基地的大门,有一个指纹锁. 该指纹锁的加密算法会把一个指纹转化为一个不超过1e7的数字,两个指纹数值之差越小,就说明两 ...
- Java集合框架学习(五) ArrayList详解
Arraylist介绍 Arraylist类实现了List接口. public class ArrayList<E> extends AbstractList<E> imple ...
- eclipse解决maven不自动下载jar包问题
今天在eclipse中import一个maven项目,由于我手工中断了相关pom.xml中配置的jar包下载. 导致项目找不到一些jar包.具体错误见下图: 原因就是有些jar包下载没有完成导致的. ...