vue中mock.js初步简单使用_vue mockjs

最近项目需要重构，在画原型的空隙简单了解了一下mock.js。因为从进度上看，后台接口不会很快 给到前端，那前端也不能坐着干等着。所以可以通过mock.js先造一些数据来实现效果

mock文档地址

一、首先当然是要先安装一下mock.js了

npm install mockjs --save-dev

二、在main.js中导入mock.js

注:上线之前需要将其删掉

import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
  mockXHR()
}

代码结构如下：

三、在项目中找到mock文件夹，在文件夹下新建一个js,用来mock假数据 

代码如下：

import Mock from 'mockjs'
 
 
const Random = Mock.Random  // Mock.Random 是一个工具类，用于生成各种随机数据
 
 
const deptList = [] // 用于接受生成数据的数组(部门数据)
for (let i = 0; i < 20; i++) { // 可自定义生成的个数
  const template = {
    'id|+1': i, // 数字从当前开始，后续+1
    'deptName': '@cname', // 名字为随机中文名字
    'topDept': '@cname', // 名字为随机中文名字
    'remark': Random.cparagraph(), // 随机生成中文
    'className': 'normal', // 自定义的一个固定字段，用于修改表格选中底色
    'date': Random.date() // 生成一个随机日期,可加参数定义日期格式
  }
  deptList.push(template)
}
 
 
Mock.mock('/dept/deptList', 'get', deptList) // 根据数据模板生成模拟数据
 
 
export default [
 
 
]

代码结构如下：

 四、在index.js中导入三中新建的js

 五、在vue页面调用

1.安装axios,如果项目中已安装，就不用安装了

npm install --save axios

2.导入axios

import axios from 'axios'

3.调用

axios.get('/dept/deptList').then(res => {
  console.log('res', JSON.parse(JSON.stringify(res.data)));
})

可得到如下图所示结果：

 到此,对数据的调用也就结束了。接下来我想把数据信息添加在grid-table中，还需要对代码进行修改一翻，如下图所示：

 主要代码：

deptList() {
  return axios.get('/dept/deptList').then(res => {
    this.deptListRow = res.data
    console.log('res', JSON.parse(JSON.stringify(this.deptListRow)));
  })
},
rowDataApi() {
  return this.deptList().then(() => {
    console.log('deptListRow1111', JSON.parse(JSON.stringify(this.deptListRow)));
    return Promise.resolve({
      code: 200,
      data: this.deptListRow
    })
  })
},

实现效果：

六、post请求

上面用到的是个get请求，post请求实例如下：

1.mock.js造假数据

/**
* mock登录接口
* 1.url路径
* 2.请求方式
* 3.参数 option
*/
Mock.mock('/user/login', 'post', function(option) {
  return {
    code: 20000,
    data: 'success',
    mock: true,
    token: 'Bearer AWEWr223rew23erfwFRD@#r34'
  }
})

2.vue页面调用

/**
* 登录接口调用
* 1.url路径
* 3.参数 this.loginForm
*/
axios.post('/user/login', this.loginForm).then(res => {
  console.log('res', JSON.parse(JSON.stringify(res.data)));
})

3.浏览器返回结果