文档章节

如何在Vue中使用Mockjs模拟数据的增删查改

o
 osc_gu9d45li
发布于 2019/04/06 09:57
字数 841
阅读 108
收藏 0

精选30+云产品,助力企业轻松上云!>>>

之前一直使用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放到了线上,可以点在线预览查看实现的效果 在线预览

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

SnailSVN Pro for mac(SVN客户端) v1.9.9

macw为您带来SnailSVN Pro for mac ,SnailSVN Mac版是一款类似于 TortoiseSVN 的 Apache Subversion(SVN)客户端,与 Finder 紧密集成。SnailSVN Mac版允许你从 Finder 的上下文菜单中快速...

单手绕月
24分钟前
7
0
python网络编程(进程与多线程)

multiprocessing模块   由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程。   multiprocessing包是Pytho...

osc_ky74f26k
24分钟前
5
0
CentOS7 redis5.0高可用部署

概述 Redis Sentinel为Redis提供高可用性。Redis Sentinel是一个分布式系统,Sentinel本身设计为在有多个Sentinel进程协同合作的配置中运行。具有多个Sentinel进程进行协作的优点如下: 1、当...

紅顏為君笑
24分钟前
10
0
Ocelot简易教程(四)之请求聚合以及服务发现

上篇文章给大家讲解了Ocelot的一些特性并对路由进行了详细的介绍,今天呢就大家一起来学习下Ocelot的请求聚合以及服务发现功能。希望能对大家有所帮助。 作者:依乐祝 原文地址:https://www...

osc_zo0djpuu
25分钟前
14
0
leetcode63(不同路径 II)--Java语言实现

求: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” )。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为“Finish”)。 现在...

拓拔北海
26分钟前
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部