建企业网站哪个平台好百度浏览器网址是多少
简介
前后端分离架构是现在比较常用的架构，它的主要思想是由前端工程师负责用户的交互逻辑。后端工程师负责代码接口的编写，使用swagger生成api文档提供给前端工程师调用使用。
但是在实际开发过程中，后端写接口往往很慢，可是前端代码的编写却不能因此而耽搁。所以前端需要模拟一些数据，来填补项目的空洞。Mock.js是一种模拟数据的办法，它可以使我们前端在后端没有写好接口的前提下，也可以进行独立开发
安装
npm i mockjs -S
安装完mockjs之后，我们可以在node_modules文件夹内找到mock.js文件，复制它并引入到我们的项目中
或者直接srcipt引入
<script src="https://web.chengqige.com/CSDN/json-server/mock.js"></script>
基本用法
下面演示的是，前端模拟数据。并发出xhr请求这个模拟数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Mock拦截器</title><script src="https://web.chengqige.com/CSDN/json-server/mock.js"></script>
</head>
<body>
<script>// 前端生成Mock数据，进行批量导出const data = Mock.mock({code: 200,msg: '商品列表数据','data|5-10': [{'id|+1': 1,'title': '@ctitle(5,10)','img': "@img('400x400')"}]})Mock.mock('http://xxxx.com/demo', data)// 可以拦截请求var xhr = new XMLHttpRequest()xhr.open('GET', 'http://xxxx.com/demo')xhr.send()xhr.onload = function () {if (xhr.status === 200) {console.log(JSON.parse(xhr.responseText))}}
</script>
</body>
</html>
接下来我们对上面的代码进行解读：
1. 生成mock格式的数据
// 前端生成Mock数据，进行批量导出
const data = Mock.mock({code: 200,msg: '商品列表数据','data|5-10': [{'id|+1': 1,'title': '@ctitle(5,10)','img': "@img('400x400')"}]
})
在mock中json数据的key值有着特殊的格式，下面介绍它的几个常见格式
| 格式语法 | 含义 |
|---|---|
| data|5-10 | data数组长度是随机变化的，长度变化范围是5-10 |
| id|+1 | id是一个自增字段每次+1 |
| @ctitle(5,10) | 从汉字字典中随机抽取5-10个汉字，形成随机汉字串（语义不通顺） |
| @img(400x400) | 生成400x400的占位图片 |
这种格式语法方便我们自动化生成大量的模拟数据
上面的data生成的数据为;
{"code": 200,"msg": "商品列表数据","data": [{"id": 1,"title": "不装四传活院即油物","img": "http://dummyimage.com/400x400"},{"id": 2,"title": "四切起权条与据写","img": "http://dummyimage.com/400x400"},{"id": 3,"title": "日列领而子律被持管","img": "http://dummyimage.com/400x400"},{"id": 4,"title": "主行同府华亲","img": "http://dummyimage.com/400x400"},{"id": 5,"title": "五理导相利把严","img": "http://dummyimage.com/400x400"},{"id": 6,"title": "参连每斯些圆想省马","img": "http://dummyimage.com/400x400"},{"id": 7,"title": "消复织总标指","img": "http://dummyimage.com/400x400"},{"id": 8,"title": "适类统务前京着按青","img": "http://dummyimage.com/400x400"},{"id": 9,"title": "家别处几音六它","img": "http://dummyimage.com/400x400"}]
}
2. 创造拦截器
创造拦截器的意思是，我的模拟数据生成之后，把它映射到一个网址上。前端发送请求，当请求这个网址时候，请求会被自动被拦截，然后重定向到我们的模拟数据上
// 网址可以随便写，因为被解析成字符串，但是http://不能乱写剩下的都行
Mock.mock('http://xxxx.com/demo', data)
好了现在，我们的data数据已经映射在接口http://xxxx.com/demo上了
注意：Mock这个映射只适用于基于xhr的网络请求,不适用于fetch请求。对于axios、fetch的拦截是不起作用的
3.发送AJAX请求
我们使用xhr发送请求，发现我们的请求到的数据是我们的mock模拟数据了
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://xxxx.com/demo')
xhr.send()
xhr.onload = function () {if (xhr.status === 200) {console.log(JSON.parse(xhr.responseText))}
}
小练习：你可以把拦截器的地址修改为https://www.baidu.com，然后xhr请求百度的地址，看看会发生什么？
高级用法
通过基本用法的练习，我们了解了mock的格式语法特点，了解了拦截器机制。接下来我们玩点高级的技术吧，我们直接创建一个服务器
json-server
json-server是一个直接把json数据当成服务器的一种手段，非常的好用。
安装
npm install -g json-server
使用方法
我们在项目文件夹下新建文件server.json
server.json
{"stu": [{"id": "18413001","name": "cqg"},{"id": "18413002","name": "wht"},{"id": "18413003","name": "hkc"}],"age": [{"age": 18},{"age": 19}]
}
然后我们在项目文件夹打开终端
json-server server.json
你会看到控制台下面生成这两个服务(分别对应key中的stu、age)
我们访问这个链接就生成了这个服务了
结合mockjs使用
json-server虽然强大，但是json数据还是需要我们自己去写呀。但是mock有格式化语法可以帮助我们生成json数据，所以它们两个配合是有戏看的
server.js
// json-server和mockjs混合解决方案
const Mock = require('mockjs')
const data = Mock.mock({'data|5-10': [{'id|+1': 1,'title': '@ctitle(5,10)','img': '@img(\'400x400\')'}]
})
module.exports = () => {return data
}
启动服务：
json-server server.js
生成的服务:
这里需要解读一下，我们的json-server不仅可以启动json文件，还可以启动js文件。不过需要导出模块，而且模块必须返回一个json格式数据才行
以上就是mock教学的全部内容