Vue中使用mock

生如风2021年3月20日

大约 1 分钟

步骤

在vue中使用mockjs可以拦截url请求，生成模拟数据并返回，这样，前端自身也有了很好的数据进行测试，不一定每次都等待后端完成接口后在进行开发。

安装

cnpm install mockjs

使用方法

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

// 2、当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回
Mock.mock( rurl, rtype, function( options ) )

参数

rurl 可选 要拦截的url
rtype 可选 要拦截的ajax请求方式，如get、post
template 可选 数据模板，可以是对象也可以是字符串
function(option) 可选 表示用于生成响应数据的函数

这里就只大概讲一下第二种使用

在项目根目录下新建目录mock，新建index.js

（1）在main.js中导入mockjs

import '../mock'

（2）index.js中定义拦截

引入mockjs和数据块user.js

import Mock from 'mockjs'
import userAPI from './user'

Mock.mock(/\/user\/login/, 'post', userAPI.login)

（3）新建并定义响应数据块user.js

import { param2Obj } from './utils'

const tokens = {
  admin: {
    token: 'admin-token'
  }
}

const users = {
  'admin-token': {
    roles: ['admin'],
    introduction: 'I am a super administrator',
    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
    name: 'Super Admin'
  }
}

export default {
  login: res => {
    const { username } = JSON.parse(res.body)
    const data = tokens[username]

    if (data) {
      return {
        code: 20000,
        data
      }
    }
    return {
      code: 60204,
      message: 'Account and password are incorrect.'
    }
  }
}

(4)在项目中post请求localhost:80\user\login时，将会触发mock的拦截，并且得到响应的响应数据。

ps：初学者，如有不对，感谢指出。

Vue中使用mock

# 步骤

步骤