mock官网：http://mockjs.com/

一、搭建一个练习项目

1.利用vue的项目脚手架进行搭建

命令：

vue create mock-demo

截图：

2.安装相关的依赖

命令：

#使用 axios 发送 ajax
npm install axios --save
#使用 mock.js 产生随机数据
npm install mockjs --save-dev
#使用 json5 解决json 文件，无法添加注释问题
npm install json5 --save-dev

二、学习mockjs

新建mock文件夹，新建testMock.js

mock语法定义

const Mock = require('mockjs') //导入mockjs以来模块
let id = Mock.mock("@id")//得到随机的id,字符串
// console.log(id);//测试
let obj = Mock.mock({id:'@id()', //得到随机的idusername:'@cname()',//随机生成中文名字date:'@date()',//随机生成日期avata:"@image('200x200','red','#fff','avatar')",//生成图片，参数：size,background,foreground,textdescrtption:"@paragraph()",//描述ip:"@ip()",//ip地址email:"@email()"//email
})
console.log(obj);

以上代码的随机生成位置，还需要自己去官方文档查看，谢谢！

三、在mockjs中使用json5的操作

通过上面 json5 模块的安装后，还需要相应的 vscode 插件

1.设置一个json5文件

2.设置一个js文件，通过 fs \ path 查询 之前设置的 json5 文件夹

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kb0J1jjx-1599721543422)(C:\Users\wangyu123\AppData\Roaming\Typora\typora-user-images\image-20200910121003639.png)]

3.在mock文件夹下通过终端获取得到 “字符串形式的结构”

4.在testJSON5.js文件中引入 模块 json5，然后利用json的parse() 方法进行字符串转对象的形式输出

修改前后的对比：

_在vue项目中使用mock.js_通过devServer配置监听mock请求

1.在新建的vue.config.js文件中进行devServer的配置

module.exports = {devServer: {...,before: require('./mock/index.js')//引入mock/index.js},
}

2.在mock文件夹下，创建 index.js 并引入代码

const fs = require('fs') //文件名称
const path = require('path')//文件路径
const Mock = require('mockjs')//导入mock 依赖
const JSON5 = require('json5');//导入json5// 读取json文件
function getJsonFile(filePath){// 读取指定json文件const json = fs.readFileSync(path.join(__dirname,'./userinfo.json5'),'utf-8')// console.log(json);// 解析并返回return JSON5.parse(json)// console.log(obj);
}// 返回一个函数
module.exports = function(app){// 监听http请求app.get('/user/userinfo', function(rep,res){// 每次响应请求时读取 mock data 的json 文件// getJsonFile 方法定义了如何读取json 文件并解析成数据对象var json = getJsonFile('./userinfo.json5');// 将 json 传入 Mock.mock方法中，生成的数据返回给浏览器res.json(Mock.mock(json));});
}

3.在vue项目中使用mock.js_axios发送请求获取mock提供的数据

3.1 在项目文件夹的HelloWorld.vue文件夹中发送请求

代码设置为：

export default {name: 'HelloWorld',props: {msg: String},mounted:{axios.get('/user/userinfo').then(res => {console.log(res)    }).catch(err => {console.log(err)    })}
}

获取到数据为：

4.在vue项目中使用mock.js_mock移除（当后台接口已写好的时候移除）

4.1 通过设置 vue cli 的环境变量进行设置

先进行环境变量的判断：

在根目录设置 .env.development 文件 设置环境变量的去向值

5.在vue项目中使用mock.js_mock-json5-devServer-axios职责

6.在jQuery项目中使用mock.js_mock拦截请求的原理

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body></body>
</html>
7.在jQuery项目中使用mock.js_使用mock
Mock.mock('/user/userinfo','get',{id:"@id()", //得到随机的idusername:"@cname()",//随机生成中文名字date:"@date()",//随机生成日期avata:"@image('200x200','red','#fff','avatar')",//生成图片，参数：size,background,foreground,textdescrtption:"@paragraph()",//描述ip:"@ip()",//ip地址email:"@email()"//email
})

6.2 发送 jQuery 的ajax 请求

<script src="./index.js"></script>
<script>$.ajax({url:'/user/userinfo',dataType:'json',success:(data) => {console.log(data);}})
</script>

8.在jQuery项目中使用mock.js_移除mock

8.1 : 直接注释或删除引入的mock.js文件

8.2：在编译的mockjs文件中设置判断

```

8.在jQuery项目中使用mock.js_移除mock

8.1 : 直接注释或删除引入的mock.js文件

8.2：在编译的mockjs文件中设置判断


mockjs（接口服务代理）相关推荐

  1. DSF框架使用（DAO、序列化、注解、服务接口、服务代理）

    1.首先说一下什么是DSF DSF(到家服务框架):提供服务接口供客户端调用,实现服务端服务共享.避免服务的不一致及二次开发:(个人理解:类似于对外提供的API接口-只是这里是提供的服务的接口) 2. ...

  2. 基于反射机制的服务代理调用

    转载自http://blog.csdn.net/zhu_tianwei/article/details/18082045 实现原理:通过传递服务bean的名称.执行的方法及参数,通过反射机制进行调用返 ...

  3. Dubbo-go 服务代理模型

    简介:HSF 是阿里集团 RPC/服务治理 领域的标杆,Go 语言又因为其高并发,云原生的特性,拥有广阔的发展前景和实践场景,服务代理模型只是一种落地场景,除此之外,还有更多的应用场景值得我们在研发的 ...

  4. springboot 配置多个请求服务代理

    springboot 配置服务代理 有时候,我们可能有下边这样的需求: 即,针对于分布式服务,我们会有多种业务接口服务,但是服务器上可能只要求开放一个服务的端口,比如上图的restA项目端口是对外开放 ...

  5. SmartSql使用教程（1）——初探，建立一个简单的CURD接口服务

    一.引言 最近SmartSql被正式引入到了NCC,借着这个契机写一个使用教程系列 二.SmartSql简介[摘自官方文档] 1. SmartSql是什么? SmartSql = MyBatis + ...

  6. TreeSet引发的OSGI服务代理创建异常

    看故障日志: Method entry: getService, args org.apache.karaf.deployer.features.FeatureDeploymentListener@4 ...

  7. springboot做代理分发服务+代理鉴权

    还原背景 大家都做过b-s架构的应用,也就是基于浏览器的软件应用.现在呢有个场景就是FE端也就是前端工程是前后端分离的,采用主流的前端框架VUE编写.服务端采用的是springBoot架构. 现在有另 ...

  8. 1.2.1 分层结构 协议 接口 服务

    1.2.1 分层结构 协议 接口 服务

  9. java 模块分离部署_GitHub - yangjiu/Mis: 模块接口服务，如何在一个模块内维护其对外暴露的接口（包括打包发布），而不是把接口和接口实现分离到两个不同的模块？...

    MIS 模块接口服务(Module Interface Service) MIS主要解决的问题是如何在一个模块内维护其对外暴露的接口(包括打包发布),而不是把接口和接口实现分离到两个不同的模块. Us ...

最新文章

  1. C进阶 - 内存四驱模型
  2. WINDOWS SERVER 2003从入门到精通之活动目录数据库的维护
  3. 4.6 explain 之 rows
  4. IOS NSArray 倒序
  5. mybatis返回map键值对_mybatis返回map key怎么指定
  6. bitsadmin命令（Windows下载文件命令）
  7. 10 个非常有用的 SVG 动画的 JavaScript 库
  8. 鲲鹏云实验-.NET Core 3.0-开始使用
  9. python判断list集合中是否包含某个元素_python怎样判断list是否包含某个元素
  10. python移动文件中某个内容_如何在Python中移动文件
  11. WCF生成的json与Extjs交互的日期型问题
  12. 【小窍门tip】oracle sequence 修改增量值
  13. 网页html跑马灯,web实现跑马灯
  14. k近邻法 kd树 平衡kd树
  15. 《稻盛和夫经营学》读后感心得体会3180字范文
  16. 全能修图工具Pixelmator Pro for Mac
  17. 【国际】塞拉利昂重点发展国家区块链计划
  18. linux中萌翻了的cowsay命令
  19. 大家都在做直播，陌陌做的这个有什么不同？
  20. 微信小程序 | 一键生成万圣节头像框工具

热门文章

  1. windows下通过eclipse进行远程执行出错：Permission denied:
  2. Python+Opencv寻找图像中最亮的区域
  3. linux下查找命令which/whereis/locate/find的对比和总结
  4. Linux C 时间函数
  5. web压力测试之siege
  6. spotify音乐下载_使用Python和R对音乐进行聚类以在Spotify上创建播放列表。
  7. 单片机小白学步系列（二十一） IO口：基本的LED和按键操作
  8. php 获取文件大小 修改时建,php遍历目录输出文件大小，类型，修改时间.
  9. eclipse找不到dynamic_Eclipse Juno在Dynamic Web Project中没有JSP(但其他...
  10. java sound api_Java Sound API