为什么需要使用mock ？
作为一个从事前端工作的程序员与后端对接时，经常会遇到临近项目上线时才会收到后端人员的接口信息。大多数人很难在短的时间内完成渲染和调试。这时我们就需要在本地模拟后端接口用来测试前端效果 这种做法称之为构建前端Mock。
方案1.使用mockjs进行Mock
安装：
npm install mockjs --save-dev
关于Mock的API使用介绍和官方文档请移步这里
- 在项目src目录中创建一个 mock.js文件
- 在main.js入口文件中引入刚刚创建的mock 文件
import './mock.js'
创建模拟数据
在 mock.js中创建一条用户信息模拟数据
import Mock from 'mockjs'
const Random = Mock.Random
// 设置全局延时，没有延时的话，有时候会检测不到数据变化
Mock.setup({
timeout: '300-600'
})
// 创建一个数组用来接收模拟的数据
const mocklist = []
const count = 5;
for (let i = 0; i < count; i++) {
mocklist.push(Mock.mock({
id: '@id',
name: '@cname',
'phone|1': /^1[0-9]{10}$/,
email: '@email',
'education|1': ['本科', '大专', '硕士', '博士', '中专'],
'graduationschool|1': ['西南财经', '北京交通大学', '重庆工商大学', '清华大学', '西南大学', '上海复旦大学'],
'profession|1': ['教授', '律师', '医生', '公务员', '大学老师', '警察', '白领'],
profile: '@cparagraph'
}))
}
接下来进一步实现增删改查的各个数据接口，这里我的需求是，只使用一次模拟数据，后面使用 localStorage 来进行存储数据。
// 获取用户信息列表
function getList() {
// 若 localStorage 没有数据，则将 Mock 的数据存入
if (!localStorage.getItem('userlist')) {
localStorage.setItem('userlist',JSON.stringify(mocklist))
}
// 每次获取数据时，再从 localStorage 中拉取数据
var userlist = JSON.parse(localStorage.getItem('userlist'))
return userlist
}
// 获取单个用户信息
function getUser(options) {
// 先从 localStorage 中拉取数据
var userlist = JSON.parse(localStorage.getItem('userlist'))
// 遍历数组，返回id 与传来 id 相当的一个对象
for( let index in userlist) {
if (userlist[index].id === options.body) {
var user = userlist[index]
return user
}
}
}
// 删除用户信息
function deleteUser(options) {
// 先从 localStorage 中拉取数据
var userlist = JSON.parse(localStorage.getItem('userlist'))
// 根据传递的 id 删除 用户
for( let index in userlist ) {
if (userlist[index].id === options.body) {
userlist.splice(index,1)
localStorage.setItem('userlist', JSON.stringify(userlist))
}
}
return {
data: '用户删除成功'
}
}
// 添加用户信息
function addUser(options) {
// 先从 localStorage 中拉取数据
var userlist = JSON.parse(localStorage.getItem('userlist'))
// 获取传入用户信息对象，是一个字符串，需要转化为对象
var user = JSON.parse(options.body)
// 使用 mock 随机生成一个 id
user.id = Random.id()
// 将 user 插入到 userlist 中
userlist.unshift(user)
// 重新将 userlist 存入 localStorage 中
localStorage.setItem('userlist', JSON.stringify(userlist))
return {
data: '用户添加成功'
}
}
// 更新用户信息
function updateUser(options) {
// 先从 localStorage 中拉取数据
var userlist = JSON.parse(localStorage.getItem('userlist'))
var user = JSON.parse(options.body)
// 遍历 userlist 根据传入对象的 id 更新用户信息
for ( let index in userlist ) {
if ( userlist[index].id === user.id ) {
userlist[index] = user
}
}
localStorage.setItem('userlist', JSON.stringify(userlist))
return {
data: '用户更新成功'
}
}
// 制作各个接口
Mock.mock('/getlist', 'get', getList)
Mock.mock('/getuser', 'post', getUser)
Mock.mock('/deleteuser', 'post', deleteUser)
Mock.mock('/adduser', 'post', addUser)
Mock.mock('/updateuser', 'post', updateUser)
// 最后将 Mock 导出
export default Mock
这样在需要的组件里就可以使用相应的接口了
案例预览
在线效果预览
方案2.使用json-server进行Mock
json-server的基本使用
1.首先我们要进行安装
window+R 输入cmd
安装：
npm install json-server --save-dev
2.准备一个json文件（data.json）
运行 json-server data.json
切记一定要开启
这里有个webpack设置技巧，不用每次运行项目都来开启
1，同时启动端口监视与应用，需在package.json 里面做的更改：
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"mock": "json-server --watch mock/db.json --m mock/post-to-get.js",
"mockdev": "npm run mock | npm run dev"
}
这样，在启动webpack时写npm run mockdev就可以同时启动了。
2，在使用post方法时，需要像数据库那样得到返回，而不是更改。这时候需要额外添加一个中间件在mock文件夹里，比如post-to-get.js,写法如下：
module.exports = function (req, res, next) {
req.method = "GET";
next();
}
然后在package.json里面启动中间件就可以了："mock": "json-server --watch mock/db.json --m mock/post-to-get.js"
项目结构如图：
然后我们就可以愉快的使用了（请求方式我们暂用）
1.添加数据
2.删除数据
3.修改数据
4.查找数据
5.模糊查询
这时data中的json数据就会随着你的操作发生改变
方案3.使用一些提供Mock服务的第三方
例如：
easy-mock
阿里的RAP 开源接口管理工具RAP第二代 http://rap2.taobao.org
bmob后端云
网友评论