Mock.js 安装 及 使用demo_SunPrincess的博客-CSDN博客
Mock.js 安装 及 使用demo
SunPrincess
于 2016-04-15 17:16:12 发布
22335
收藏
分类专栏：
工具
反向代理
mockJS
文章标签：
工具
mockJS
反向代理
工具
同时被 3 个专栏收录
3 篇文章
0 订阅
订阅专栏
反向代理
1 篇文章
0 订阅
订阅专栏
mockJS
1 篇文章
0 订阅
订阅专栏
Mock.js 安装 及 使用demo
Mock.js官方网址： 首页：http://mockjs.com/
1、Mock.js下载安装
下载mock.js文件 npm安装mock模块 项目路径下执行命令： npm install mock
2.1、Mock.js 使用demo （方式1）
文件结构，如图： 以下是文件代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--mock.js 依赖jQuery和require.js-->
<script src="jquery-1.11.1.js"></script>
<script src="require.js"></script>
<!--mock-1.js是mockJs的demo文件-->
<script src="mock-1.js"></script>
</body>
</html>
mock-1.js
// 配置 Mock 路径
require.config({
paths: {
mock: 'mock'
});
// 加载 Mock
require(['mock'], function(Mock) {
/*第一部分与第二部分没有关系*/
/*第一部分*/
// Mock.mock( template )
//数据模板
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
});
//打印到body上
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body');
/*第二部分*/
// Mock.mock(rurl, template)
Mock.mock(/\.json/, { //匹配.json文件
'list|1-10': [{ //数据模板
'id|+1': 1,
'email': '@EMAIL',
'regexp3': /\d{5,10}/
}]
});
$.ajax({
url: 'hello.json', //请求访问json文件，拦截hello.json的请求，返回mock数据模板中的数据
dataType: 'json'
}).done(function(data, status, jqXHR) {
//获得mock数据模板中的数据，打印到body上
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body');
})
});
2.2、Mock.js 使用demo （方式2）
文件结构，可同上：以下是文件代码： index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="mock.js"></script>
<!--mock-2.js是mockJs的demo文件-->
<script src="mock-2.js"></script>
</body>
</html>
mock-2.js
Mock.mock(/\.json/, { //匹配.json文件，可执行匹配成功的参数
'list|1-10': [{ //数据模板
'id|+1': 1,
'email': '@EMAIL',
'regexp3': /\d{5,10}/
}]
});
function sendData(url) {
$.ajax({
url: url,
dataType: 'json'
}).done(function(data, status, jqXHR) {
//获得mock数据模板中的数据，打印到body上
$('<pre>').text(JSON.stringify(data, null, 4)).appendTo('body');
})
sendData("hello.json");
3、运行index.html
运行结果截图：
注明：
mock.js本质是更改了jquery、zepto等库的请求文件前缀。更改了代码的实现，可能存在影响请求的结果。 实际上mock.js的请求并没有被发送。gulp-mock插件：请求被发送但是被拦截，不影响代码的实际实现。
SunPrincess
关注
关注
点赞
收藏
评论
Mock.js 安装 及 使用demo
Mock.js 安装 及 使用demoMock.js官方网址： 首页：http://mockjs.com/1、Mock.js下载安装下载mock.js文件 npm安装mock模块 项目路径下执行命令： npm install mock2、Mock.js 使用demo文件结构，如图： 以下是文件代码：index.html<!DOCTYPE html><html lang="en">
复制链接
扫一扫
专栏目录
Mock.js的Demo
01-13
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。这是一个d入门的小demo
mockjs完整案例代码
05-30
完整的mockjs案例代码，实现前后端分离，随意制造假数据，方便前端快速开发。
参与评论
您还未登录，请先
登录
后发表或查看评论
mockjs安装和介绍
weixin_45645846的博客
01-27
982
安装命令：
cnpm install mockjs --save-dev
一、为什么使用mockjs
在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口，
1.我们可以使用json文件来模拟后台数据，但比较局限，无法模拟数据的增删改查
2.使用json-server模拟，但不能随机生成所需数据
3.使用mockjs模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查
二、mock优点
1.前后端分离，
2.可随机生成大量的数据
3.用法简单
4.数据类型丰富
Mock的安装和使用（图文）
Poppy_LYT的博客
08-14
3193
Mock的安装和使用
第一步：输入指令
cnpm install mockjs -D // windows
sudo cnpm install mockjs -D // mac
第二步：新建文件夹mock，并在里面新建index。js，并写入内容
import Mock from 'mockjs'
Mock.mock('http://121.31.30:aa/get', 'get', '11...
mockjs的安装使用
最新发布
m0_59642141的博客
10-24
863
mockjs安装使用
mockjs使用
热门推荐
xiaoxiaojie12321的博客
07-31
4万+
1.安装
npm install mockjs --save
npm install axios --save
安装axios是为了能模拟后台接口。
2.建立目录结构如下：
3.在main.js引入mockjs
4. mock.js
import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mo...
Mock.js篇1：安装入门
u013089490的博客
12-10
798
1、Mock.js安装
假如我们的项目是在D:\Vs_Code\mockDemo，我们现在来安装mock.js
#进入工程目录
C:\Users\jun>cd d:\Vs_Code\mockDemo
#安装mockjs
d:\Vs_Code\mockDemo>cnpm install mockjs
√ Installed 1 packages
√ Run 0 scripts
√ ...
mock.js的使用demo
weixin_70112665的博客
09-17
20
1.下载
axios和mockjs是必须要下载的。
● 安装mockjs
npm install mockjs --save-dev
● 在项目中创建mockServer.js，并写一个简单的返回示例，后面拦截其他url的ajax请求直接参考这个示例
import Mock from 'mockjs'
import banner from './banner.json'(引入相关的json数据)
// 模拟数据接口
Mock.mock('/mock/banner',{code:200,da
Mock.js的安装和使用
小罗伯特
07-08
546
使用mock.js自定义接口，拦截ajax请求
vue2项目创建详细过程——（五）安装mock
maoge_666的博客
09-30
89
vue2项目创建详细过程——（五）安装mock
【vue】mock.js安装及使用
lorogy的博客
11-18
322
mock.js快速上手
npm安装mockjs
cnpm install mockjs --save-dev
main.js引用
import './mock/mock'
新建mock.js
import Mock from 'mockjs'
import {Random} from 'mockjs'
Mock.setup({
timeout: 1000
})
Mock.mock('/i...
vue2中使用mockjs出现报错proxy error: could not proxy request xxx from xxx to xxx 和404，500问题
qq_43210082的博客
05-23
1187
问题说明
出现proxy error: could not proxy request报错，应该是因为devServer代理的服务器未开启，或者地址错误，改正就好。
404 not found，找不到请求的资源。应该检查发送请求的api地址是否错误。
项目配置
vue.config.js:
devServer: {
proxy: {
"/api": {
target: "http://localhost:8080",
changeOrigin: true,
mockjs最新版总结
L1ke_one的博客
03-21
945
一、定义
1 拦截ajax
2. 生成伪随机数据
当前端开发 程序员写好了接口文档
没有实现接口文档
先自己造数据，模拟后端，开发前端的功能
等待后端接口做好，和后端联调，更改baseURL
实现切换接口服务器
二、安装
npm i mockjs -D
三、使用
1. 定义mock.js
2. 在main.js 导入
import ‘@/mock/mock.js’
四、导入mock
import Mock from ‘mockjs’
五、方法
Mock(url,meth..
Mock.js
ximingx
05-08
191
Mock.js
Mock.js 是一款模拟数据生成器，旨在帮助前端独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
根据数据模板生成模拟数据
模拟 Ajax 请求，生成并返回模拟数据
基于 HTML 模板生成模拟数据
1. 安装使用
安装
# 1. npm 安装
$ yarn add mockjs
# 2. 使用CDN
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js">
mock.js 在html中使用demo示例代码
腾讯全栈-ITCJF
09-13
2470
mock.js 在html中使用demo示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mockjs</title>
<script src="http://c
mock.js demo
qq_33269443的博客
06-30
199
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Mock.js详解(结合官网)
qq_45859670的博客
07-09
1307
Mock.mock()拦截与响应
rurl
可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。可选。表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、‘@EMAIL’。
可选。表示用于生成响应数据的函数。
Mock.mock( template )
示例：根据数据模板生成模拟数据
Mock.mock( rurl, template )
记录数据模板。当拦截
Mock | MockJS 的安装以及基本语法
兀坐晴窗独饮茶
03-27
1063
MockJS 的入门以及安装
1. 安装 NodeJS
// 创建 Mock 目录，先安装 node 下的 mock.js；
npm install mockjs
2. 运行官网示例代码
创建一个 js 文件，键入官网示例代码：
//引入 mock.js，相当于 src=mock.js
const Mock = require('mockjs');
const data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
SunPrincess
CSDN认证博客专家
CSDN认证企业博客
码龄8年
暂无认证
17
原创
98万+
周排名
139万+
总排名
4万+
访问
等级
541
积分
粉丝
获赞
评论
收藏
私信
关注
热门文章
Mock.js 安装 及 使用demo
22335
React—JSX转换成标准的JavaScript
4715
es6 import & export
4576
git commit 过程中error或warning
2359
SPA：React + React-router 入门demo
2335
分类专栏
JavaScript
5篇
css
4篇
git
2篇
database
1篇
工具
3篇
gulp
1篇
html模板
1篇
jade
1篇
反向代理
1篇
mockJS
1篇
React
2篇
ReactRoute
1篇
ES6
1篇
微信
1篇
iphone-UC
1篇
最新评论
es6 import & export
孙朝阳:
It's a so good course!
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
无论页面内容多长，footer始终在页面底部
多异步按序执行
ios uc浏览器截断弹层中的输入框
2016年19篇
目录
目录
分类专栏
JavaScript
5篇
css
4篇
git
2篇
database
1篇
工具
3篇
gulp
1篇
html模板
1篇
jade
1篇
反向代理
1篇
mockJS
1篇
React
2篇
ReactRoute
1篇
ES6
1篇
微信
1篇
iphone-UC
1篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值