之前一直使用json-server在前端开发时，搭建本地数据接口测试，但有时又需要将做好的项目放于 github page上做项目演示。在本地时，json server很好使用，但一旦放在github上就实现不了我们期望的效果了；后来发现 mockjs 这个插件就满足这一需求。研究了半天，感觉 mockjs 模拟数据更强大，通过随机数据，可以模拟各种场景，下面一步步的来实现在 vue-cli创建的项目中添加一条用户信息的数据模拟接口：
安装 mockjs
- 在vue项目安装mockjs
npm install mockjs --save-dev在项目
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这样在需要的组件里就可以使用相应的接口了
案例预览
最后我将的这个demo放到了线上，可以点在线预览查看实现的效果
在线预览