之前一直使用 JSON-server 在前端开发时, 搭建本地数据接口测试, 但有时又需要将做好的项目放于 GitHub page 上做项目演示. 在本地时, JSON server 很好使用, 但一旦放在 GitHub 上就实现不了我们期望的效果了; 后来发现 mockjs 这个插件就满足这一需求. 研究了半天, 感觉 mockjs 模拟数据更强大, 通过随机数据, 可以模拟各种场景, 下面一步步的来实现在 vue-cli 创建的项目中添加一条用户信息的数据模拟接口:
安装 mockjs
在 vue 项目安装 mockjs
NPM install --global vue-cli
在项目 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 放到了线上, 可以点在线预览查看实现的效果
在线预览 https://pingzx.github.io/user-ms/
来源: https://www.cnblogs.com/pingzx/p/10660911.html