在Vue中使用mockjs代码实例

前言

　　前后端分离的开发模式，前端需要向后端请求数据（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 => {
    //
   })

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