mock.js安装使用_篇1_综合

mock.js的gitHub官方文档
mock.js 的存在主要用于生成随机数据，拦截ajax请求。方便前后端分离开发，前端开发人员可以依据接口文档随机模拟出响应数据

安装

// 全局安装
npm install mockjs -g
// 测试安装效果
random url  // 生成随机url
random -h  // 查看帮助

新建了一个vue-cli项目来测试mock.js
使用 axios
需要先安装和引入 axios

npm install axios --save

在 main.js 中引入 axios

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'   // 新添加Vue.config.productionTip = false
Vue.prototype.$axios = axios;  // 新添加new Vue({
    render: h => h(App),
}).$mount('#app')

mock.js的使用

在 main.js 中引入mockjs

import '@/mock/index.js'  // 需要引入，否则会报404错误

在 src 目录下新建 mock/index.js 文件

import Mock from 'mockjs'
Mock.mock('/user/test', 'get', {
    code: 200,data: {
    'name|1-10': '*'}
})

接下来在 vue 文件中测试 mock

this.$axios.get('/user/test').then(res => {
    console.log(res.data)})

控制台打印出测试结果

{
    code: 200data: {
    name: "*****"}
}

最基础的mock.js测试就成功了

补充

mock 中如何模拟 post 请求

Mock.mock('/login', 'post', function(option){
    // 请求相关的参数console.log(option)if (option.body == 'user') {
    return Mock.mock({
    code: 200,data: {
    'token': tokens.user,'name': users[USERTOKEN].name}})} else {
    return Mock.mock({
    code: 200,data: {
    'token': tokens.admin,'name': users[ADMINTOKEN].name}})}
})