vue里mock.js的初次使用

mock的作用：用我通俗的话来讲，前后端分离情况下，在后台没有写好接口没有数据的时候，可以自己造API和数据，方便页面的完整展示并基本跑通逻辑，等后台写好了API，就直接修改路径调试就好了，节省很多时间。
mock的前提是你的项目结构已经基本完善，axios之类不可少
使用npm下载：npm install mockjs --save
在main.js中引用：
创建一个mock文件夹和一个放api的文件夹，一般后台项目会有多级菜单栏，所以最好在mock和api的文件夹中按菜单再建文件夹，放不同模块的文件。如下图：
在mock文件夹下的orangnization.js中造数据，并写不同的方法对应的返回：

import Mock from 'mockjs' // 要引入

const List = []
const num = 10

for (let i = 0; i < num; i++) {
//  如果你一开始有点不太了解，可以写成固定的值，如： 'parent': '西安市',方便你查看效果然后逐步改
  List.push(Mock.mock(
    {
      'id|+1': 1,                                          // id每次循坏自增1
      'parent|1': ['西安市', '宝鸡市', '汉中市', '咸阳市'],  // 每次随机取其中一个
      'name|1': ['福山加油站', '江南加油站', '加乐加油站', '文儒加油站', '龙和加油站', '龙门加油站'],
      'worker|1': ['管理员1', '管理员2', '服务人员'],
      'num|1-5': 5,                                       // 在1-5中随机取一个值
      'type|1': ['远程', '导入'],
      'height|10-17': 10,
      'volumeStart|5-20.1-2': 8.23,                       // 小数点前，从5-20中随机取，小数点后，1-2中随机取
      'volumeEnd|5-20': 8
    }
  ))
}

export default {
// 下面是增删改查方法的返回，和后台约定好之后就会省很多事
  // look
  getOrgList: () => {
    return {
      total: List.length,
      data: List
    }
  },
  // add
  createOrg: () => ({
    resultCode: 200,
    data: 'success'
  }),
  // edit
  updateOrg: () => ({
    resultCode: 200,
    data: 'success'
  }),
  // delete
  orgDelete: () => ({
    resultCode: 200,
    data: 'success'
  })
}

写api中orangnization.js中的接口：

// utils/request里是axios的引入处理
import request from '@/utils/request'
// 列表
export function getOrgList(params) {
  return request({
    url: '/org/list',
    method: 'get',
    params
  })
}
// 修改
export function editOrg(params) {
  return request({
    url: '/org',
    method: 'post',
    data: params
  })
}
// 添加
export function addOrg(params) {
  return request({
    url: '/org',
    method: 'put',
    data: params
  })
}
// 删除
export function deleteOrg(params) {
  return request({
    url: '/org/delete',
    method: 'put',
    data: params
  })
}

在mock文件夹下的index.js中连接mock和api：

import Mock from 'mockjs'
import orangnizationAPI from './permission/orangnization' // 这个是步骤6
//        接口里的地址   请求方式    mock中对应的返回
Mock.mock(/\/org\/list/, 'get', orangnizationAPI.getOrgList)
Mock.mock(/\/org/, 'put', orangnizationAPI.createOrg)
Mock.mock(/\/org/, 'post', orangnizationAPI.updateOrg)
Mock.mock(/\/org\/delete/, 'put', orangnizationAPI.orgDelete)

export default Mock

最后，在vue页面的使用：

  // 引用
  import { getOrgList, editOrg, addOrg, deleteOrg } from '@/api/permission/orangnization'

  // 在methods中使用
  getCompanyData() {
      getOrgList().then(response => {
        // 打印出来的是mock里getOrgList的数据
        console.log(response)
        this.organizeDataList = response.data
        this.length = response.total
      })
    }

总结，步骤9中的各个方法如法炮制，不一一赘述。其实，和后端约定好字段之后自己mock数据，到时后端有数据了，我们只需要改改api里的地址和请求方式就行，很方便。我这里写的都是很基础的，当做引路吧。
此外，看mockjs官网的示例能轻松上手：mockjs官网示例
祝大家每日愉快撸代码~

vue里mock.js的初次使用

猜你喜欢