在Vue中使用mockjs代码实例

2024-12-05 10:22:51

前言

　　前后端分离的开发模式，前端需要向后端请求数据（ajax请求），但实际开发过程中，前后端会约定一份接口文档，但前后端开发进度并不一致，当后端没有完善接口功能时，前端需要在本地模拟数据返回，此时需要使用到mockjs。

安装

npm install mockjs --save-dev

目录结构

配置

1、api下的config.js：配置axios的拦截处理

import axios from 'axios'

// 创建一个axios实例
const service = axios.create({
  //请求超时配置
  timeout:3000
})
//添加请求拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  err => {
    console.log(err)
  }
)
//添加响应拦截器
service.interceptors.response.use(
  response => {
    let res = {}
    res.status = response.status
    res.data = response.data
    return res
  },
  err => {
    console.log(err)
  }
)

export default service

另外一个应用场景，劫持请求，获取token，为请求添加token：

// 请求拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('userToken');
  if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
   config.headers.accessToken = token;
  }
  return config;
 },
 error => {
  return Promise.reject(error);
 })

2、mock目录下index.js

import Mock from 'mockjs'
import homeApi from './home'
import userApi from './user'

// 设置200-2000毫秒延时请求数据
// Mock.setup({
//  timeout: '200-2000'
// })

// 首页相关
// 拦截的是 /home/getData
Mock.mock(/\/home\/getData/, 'get', homeApi.getStatisticalData)

// 用户相关
Mock.mock(/\/user\/getUser/, 'get', userApi.getUserList)
Mock.mock(/\/user\/del/, 'get', userApi.deleteUser)
Mock.mock(/\/user\/batchremove/, 'get', userApi.batchremove)
Mock.mock(/\/user\/add/, 'post', userApi.createUser)
Mock.mock(/\/user\/edit/, 'post', userApi.updateUser)
Mock.mock(/\/home\/getData/, 'get', homeApi.getStatisticalData)

import Mock from 'mockjs'

// 图表数据
let List = []
export default {
 getStatisticalData: () => {
  for (let i = 0; i < 7; i++) {
   List.push(
    Mock.mock({
     vue: Mock.Random.float(100, 8000, 0, 2),
     wechat: Mock.Random.float(100, 8000, 0, 2),
     ES6: Mock.Random.float(100, 8000, 0, 2),
     Redis: Mock.Random.float(100, 8000, 0, 2),
     React: Mock.Random.float(100, 8000, 0, 2),
     springboot: Mock.Random.float(100, 8000, 0, 2)
    })
   )
  }
  return {
   code: 20000,
   data: {
    // 饼图
    videoData: [
     {
      name: 'springboot',
      value: Mock.Random.float(1000, 10000, 0, 2)
     },
     {
      name: 'vue',
      value: Mock.Random.float(1000, 10000, 0, 2)
     },
     {
      name: '小程序',
      value: Mock.Random.float(1000, 10000, 0, 2)
     },
     {
      name: 'ES6',
      value: Mock.Random.float(1000, 10000, 0, 2)
     },
     {
      name: 'Redis',
      value: Mock.Random.float(1000, 10000, 0, 2)
     },
     {
      name: 'React',
      value: Mock.Random.float(1000, 10000, 0, 2)
     }
    ],
    // 柱状图
    userData: [
     {
      date: '周一',
      new: Mock.Random.integer(1, 100),
      active: Mock.Random.integer(100, 1000)
     },
     {
      date: '周二',
      new: Mock.Random.integer(1, 100),
      active: Mock.Random.integer(100, 1000)
     },
     {
      date: '周三',
      new: Mock.Random.integer(1, 100),
      active: Mock.Random.integer(100, 1000)
     },
     {
      date: '周四',
      new: Mock.Random.integer(1, 100),
      active: Mock.Random.integer(100, 1000)
     },
     {
      date: '周五',
      new: Mock.Random.integer(1, 100),
      active: Mock.Random.integer(100, 1000)
     },
     {
      date: '周六',
      new: Mock.Random.integer(1, 100),
      active: Mock.Random.integer(100, 1000)
     },
     {
      date: '周日',
      new: Mock.Random.integer(1, 100),
      active: Mock.Random.integer(100, 1000)
     }
    ],
    // 折线图
    orderData: {
     date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
     data: List
    },
    tableData: [
     {
      name: 'ES6',
      todayBuy: Mock.Random.float(100, 1000, 0, 2),
      monthBuy: Mock.Random.float(3000, 5000, 0, 2),
      totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
     },
     {
      name: '小程序',
      todayBuy: Mock.Random.float(100, 1000, 0, 2),
      monthBuy: Mock.Random.float(3000, 5000, 0, 2),
      totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
     },
     {
      name: 'Vue',
      todayBuy: Mock.Random.float(100, 1000, 0, 2),
      monthBuy: Mock.Random.float(3000, 5000, 0, 2),
      totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
     },
     {
      name: 'springboot',
      todayBuy: Mock.Random.float(100, 1000, 0, 2),
      monthBuy: Mock.Random.float(3000, 5000, 0, 2),
      totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
     },
     {
      name: 'React',
      todayBuy: Mock.Random.float(100, 1000, 0, 2),
      monthBuy: Mock.Random.float(3000, 5000, 0, 2),
      totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
     },
     {
      name: 'Redis',
      todayBuy: Mock.Random.float(100, 1000, 0, 2),
      monthBuy: Mock.Random.float(3000, 5000, 0, 2),
      totalBuy: Mock.Random.float(40000, 1000000, 0, 2)
     }
    ]
   }
  }
 }
}

home.js

import Mock from 'mockjs'

// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj(url) {
 const search = url.split('?')[1]
 if (!search) {
  return {}
 }
 return JSON.parse(
  '{"' +
   decodeURIComponent(search)
    .replace(/"/g, '\\"')
    .replace(/&/g, '","')
    .replace(/=/g, '":"') +
   '"}'
 )
}
let List = []
const count = 200
for (let i = 0; i < count; i++) {
 List.push(
  Mock.mock({
   id: Mock.Random.guid(),
   name: Mock.Random.cname(),
   addr: Mock.mock('@county(true)'),
   'age|18-60': 1,
   birth: Mock.Random.date(),
   sex: Mock.Random.integer(0, 1)
  })
 )
}

export default {
 /**
  * 获取列表
  * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
  * @param name, page, limit
  * @return {{code: number, count: number, data: *[]}}
  */
 getUserList: config => {
  const { name, page = 1, limit = 20 } = param2Obj(config.url)
  console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
  const mockList = List.filter(user => {
   if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false
   return true
  })
  const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
  return {
   code: 20000,
   count: mockList.length,
   list: pageList
  }
 },
 /**
  * 增加用户
  * @param name, addr, age, birth, sex
  * @return {{code: number, data: {message: string}}}
  */
 createUser: config => {
  const { name, addr, age, birth, sex } = JSON.parse(config.body)
  console.log(JSON.parse(config.body))
  List.unshift({
   id: Mock.Random.guid(),
   name: name,
   addr: addr,
   age: age,
   birth: birth,
   sex: sex
  })
  return {
   code: 20000,
   data: {
    message: '添加成功'
   }
  }
 },
 /**
  * 删除用户
  * @param id
  * @return {*}
  */
 deleteUser: config => {
  const { id } = param2Obj(config.url)
  if (!id) {
   return {
    code: -999,
    message: '参数不正确'
   }
  } else {
   List = List.filter(u => u.id !== id)
   return {
    code: 20000,
    message: '删除成功'
   }
  }
 },
 /**
  * 批量删除
  * @param config
  * @return {{code: number, data: {message: string}}}
  */
 batchremove: config => {
  let { ids } = param2Obj(config.url)
  ids = ids.split(',')
  List = List.filter(u => !ids.includes(u.id))
  return {
   code: 20000,
   data: {
    message: '批量删除成功'
   }
  }
 },
 /**
  * 修改用户
  * @param id, name, addr, age, birth, sex
  * @return {{code: number, data: {message: string}}}
  */
 updateUser: config => {
  const { id, name, addr, age, birth, sex } = JSON.parse(config.body)
  const sex_num = parseInt(sex)
  List.some(u => {
   if (u.id === id) {
    u.name = name
    u.addr = addr
    u.age = age
    u.birth = birth
    u.sex = sex_num
    return true
   }
  })
  return {
   code: 20000,
   data: {
    message: '编辑成功'
   }
  }
 }
}

user.js

mockjs

Mock.mock( rurl, rtype, function( options ) )
Mock.mock( rurl, rtype, template )
表示当拦截到rurl和rtype的ajax请求时，将根据数据模板template生成模拟数据，并作为响应数据返回。

Mock.mock( rurl, rtype, function( options ) )
记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
其中：
rurl 可选
表示要拦截的url，可以使字符串，也可以是正则
rtype 可选
表示要拦截的ajax请求方式，如get、post
template 可选
数据模板，可以是对象也可以是字符串
function(option) 可选
表示用于生成响应数据的函数

3.main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//全局配置
import http from '@/api/config'
import './mock'

//第三方包

Vue.prototype.$http = http
Vue.config.productionTip = false

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

4、组件中的方法如何使用：

this.$http.get('/home/getData').then(res => {
    //
   })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue+vuecli+webpack中使用mockjs模拟后端数据的示例

前言使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据.使用mock就可以生成你要的数据了,从而实现开发时前后端分离. 其主要功能是: 基于数据模板生成模拟数据. 基于HTML模板生成模拟数据. 拦截并模拟 ajax 请求. 语法规范 Mock.js 的语法规范包括两部分: 1.数据模板定义规范(Data Template Definition,DTD) 2.数据占位符定义规范(Data Placeholder Definition,DPD) 数据模板定义规范 DTD
vue项目中mock.js的使用及基本用法

官方网址:http://mockjs.com/ mockjs是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发.我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据. 使用方式这里主要讨论在vue项目中,使用axios发送ajax请求,mock.js模拟数据的流程. vue-cli搭建项目后,安装axios和mock.js npm install -S axios npm install -D mockjs 在项目中新建mock.js文件夹,来设
vue-cli项目中使用Mockjs详解

背景前端在早期jQuery时代时,前端功能和后端工程基本上都是合在一起,典型的就是常见的maven工程下面的webapp目录包含前端各类静态资源文件. 这个时候,我们总是会遇到这些问题: 老大,接口文档还没输出,我的好多活干不下去啊! 后端小哥,接口写好了没,我要测试啊! 测试时间不够啊,就要发版了,今天难道我有看明天的太阳升起? 诸如种种,就是一句话:劳资,再也不要指望你们了! node出现之后,准确的说是前后端分离之后,前端迫切需要一种机制,不在需要依赖后端接口开发.经过这几年的发展,有好
利用vue + koa2 + mockjs模拟数据的方法教程

前言首先说一下这是本人第一次分享东西第一次写,写的不好或者有错误的请大家多包涵支出错误共同进步,好了,话不多说了,来一起看看详细的介绍吧. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 第一步安装vue-cli项目不多说网上一大把需要的朋友们参考这篇文章:http://www.jb51.net/article/118987.htm ,介绍的非常详细.
详解vue-cli项目中用json-sever搭建mock服务器

vue-cli下配置json-server 使用json-server实现后台数据接口先建一个json文件:db.json 放在build/下在build/dev-server.js中配置 (注意变量命名) github说明: 启动项目地址栏输入 localhost:8081 服务已启动成功 8081后加相应后缀即可访问数据 localhost:8081/posts l localhost:8081/comments 最后做一下浏览器代理设置config/index.jsr如下最后验证
vue+mock.js实现前后端分离

之前都是介绍在普通项目中使用mock.js,那么本次就来介绍一下在vue中使用mock.js实现前后端分离. 安装: npm install mockjs 这里先写个小案例介绍一下具体使用,写法不规范,仅供参考. 然后案例讲完后我们讲具体的规范使用那么一起来看看这个案例吧: <script> import Mock from "mockjs" export default { name: "FunctionsDbSource", methods:{ /
Vue+Mock.js模拟登录和表格的增删改查功能

前言关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 5 项目不背锅(等后端给接口的话可能会背锅) 等等优点,最后一条我加的. 第一步先安装mock.js npm install mockjs --save-dev 第二步使用 mock.js import Mock from 'mockjs' 哪里用就在哪里引入.我是在项目src/mock/index.js里面使用moc
详解在vue-cli项目下简单使用mockjs模拟数据

为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数据来进行后端接口模拟. 看了官方文档之后一脸懵逼,这些都是什么鬼?????因此总结了一篇文章,来介绍mockjs的简单使用. 首先搭建一个vue项目不介绍了安装mockjs npm install mockjs --save-dev 启动项目 npm run dev 创建mock.js文件在s
详解在vue-cli项目中使用mockjs(请求数据删除数据)

在我们的生产实际中,后端的接口往往是较晚才会出来,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的.于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作,在后台数据完成之后,你所做的只是去掉mockjs:停止拦截真实的ajax,仅此而已. 搭建一个vue项目 # 全局安装 vue-cli $ npm install --global vue-
mockjs+vue页面直接展示数据的方法

最近想往数据库里导一些数据,同事推荐了mock,了解一下觉得不错,现将在vue用的mock贴上来写在前默认看此文的盆友都是有vue基础的哟~~ 一.导读将 mockjs 的数据直接展示在 vue 页面上 mockjs官网链接关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 二.安装mockJS //安装mockJS npm install mockjs 不

在Vue中使用mockjs代码实例

相关推荐

随机推荐