mock模板

vue create mock-demo // cmd vue脚手架命令 创建一个 有bale和route的项目

npm install axios --save // 使用 axios 发送请求
npm install mockjs --save-dev // 使用 mockjs 产生随机数据
npm install json5 --save-dev // 使用 json5 解决 json 文件, 无法添加注释问题

测试用的项目和依赖就准备好了

// 根目录创建mock文件夹 中index.js

const fs = require(‘fs’)
const path = require(‘path’)
const Mock = require(‘mockjs’) // mockjs 导入依赖模块
const JSON5 = require(‘json5’)
// 读取json文件
function getJsonFile (filePath) {
// 读取指定 json 文件
var json = fs.readFileSync(path.resolve(__dirname, filePath), ‘utf-8’)
// 解析并返回
return JSON5.parse(json)
}
// 返回一个函数
module.exports = function (app) {
if (process.env.MOCK === ‘true’) {
// 监听http请求
app.get(’/user/userinfo’, function (rep, res) {
// 每次响应请求时读取mock data的json文件
// getJsonFile方法定义了如何读取json文件并解析成数据对象
var json = getJsonFile(’./userInfo.json5’)
// 将json传入 Mock.mock 方法中, 生成的数据返回给浏览器
res.json(Mock.mock(json))
})
}
}

// 在 ./userInfo.json5
{
id: “@id”, // 得到的随机的id,对象
username: “@cname()”, // 随机生成中文名字
data: “@date()”, // 随机生成日期
avatar: “@image(‘10x10’,‘red’, ‘#fff’, ‘avatar’ )”,
// 生成图片, 长宽 背景颜色 字体颜色 图片显示的文章
description: “@paragraph()”, // 描述 随机无意义字符串
ip: “@ip()”, // IP地址
email: “@email()”, // email
}

mounted () {

// axios({
// url: ‘/user/userinfo’
// }).then(res => console.log(res))

axios
  .get('/user/userinfo')
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })

}

//return JSON.parse(’{"’ + decodeURIComponent(search)
// 解析地址栏
// .replace(/"/g, ‘\"’) // 替换匹配正则 后面是新值 前面是被替换的值
// .replace(/&/g, ‘","’)
// .replace(/=/g, ‘":"’) + ‘"}’)

插件 json5 json5sync

// 在 vue.config.js 中
module.exports = {
devServer: {
// 在devServe中做的任何访问都会被 before 这个中间键拦截到。然后在before里面做你的操作，然后才//会执行后面的操作
before: require(’./mock/index.js’)
}
}

移除 Mock
在cli中 环境变量模式 选择.env.[mode]变量来
dev 开发模式 vue-cli-service serve
pro 发布模式 vue-cli-service build
test 单元测试模式 vue-cli-service test:unit

在项目根目录 创建 .env.development
判断变量 MOCK
MOCK = true 开启
MOCK = false时关闭

创建多个数组 把变量循环push到数组

第三种 在mock.js中
import Mock from “mockjs”;
Mock.setup({
timeout: “10-2500”
});
// Mock.mock(//user/, {});
Mock.mock(//user/, “get”, (data) => {
// 此处可写 js 判断代码
// 如果 为post 请求 data 为请求体 可根据data内容返回数据
return {
status: 200,
total: 21,
per_page: 4,
current_page: 1,
last_page: 6
};
});

// 在main.js中
import “@/util/mock.js”;
全局即可拦截路径为 /user 的 get请求 并return返回数据

// 第四种
axios(‘http://localhost:8999/static/map/china.json’)
…axios能直接读取本地json文件 我才知道 …

第二种 使用方法

1. src/mock/until.js 中 // 定义 验证 过滤 返回参数

const responseBody = {
message: ‘’,
timestamp: 0,
result: null,
code: 0
}
// 定义builder 箭头函数 的参数为4个
export const builder = (data, message, code = 0, headers = {}) => {
responseBody.result = data // responseBody 对象添加result:data
if (message !== undefined && message !== null) {
responseBody.message = message // 如果不为空 获取传入的参数 给responseBody对象
}
if (code !== undefined && code !== 0) {
responseBody.code = code // 如果不为空 获取传入的参数 给responseBody对象
responseBody._status = code // 如果不为空 获取传入的参数 给responseBody对象
}
if (headers !== null && typeof headers === ‘object’ && Object.keys(headers).length > 0) {
responseBody._headers = headers // 如果不为空 获取传入的参数 给responseBody对象
}
responseBody.timestamp = new Date().getTime()
// 给responseBody对象新加属性 timestamp:毫秒时间戳
return responseBody // 新的responseBody 返回给 builder
}

export const getQueryParameters = (options) => { //获取查询参数函数
const url = options.url // 获取传进来的参数
const search = url.split(’?’)[1] // 分割传进来的参数
if (!search) {
return {} // 如果为空 返回空
}
return JSON.parse(’{"’ + decodeURIComponent(search)
// 解析地址栏
.replace(/"/g, ‘\"’) // 替换匹配正则 后面是新值 前面是被替换的值
.replace(/&/g, ‘","’)
.replace(/=/g, ‘":"’) + ‘"}’)
}

export const getBody = (options) => { // 导出获取getBody 函数
return options.body && JSON.parse(options.body)
// 传入参数的.不为空 就转换为json
}

2. src/mock/services/auth.js 中 // 拦截 验证 返回 数据
   import Mock from ‘mockjs2’ // 引入mock为js2
   import { builder } from ‘…/util’ // 导入函数 请求参数 请求体
   const login = (options) => {
   return builder({ // 返回参数 对象builder
   ‘id’: Mock.mock(’@guid’),
   ‘name’: Mock.mock(’@name’),
   ‘username’: ‘admin’,
   ‘password’: ‘’,
   ‘avatar’: ‘https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png’,
   ‘status’: 1,
   ‘telephone’: ‘’,
   ‘lastLoginIp’: ‘27.154.74.117’,
   ‘lastLoginTime’: 1534837621348,
   ‘creatorId’: ‘admin’,
   ‘createTime’: 1497160610259,
   ‘deleted’: 0,
   ‘roleId’: ‘admin’,
   ‘lang’: ‘zh-CN’,
   ‘token’: ‘4291d7da9005377ec9aec4a71ea837f’
   }, ‘’, 200, { ‘Custom-Header’: Mock.mock(’@guid’) })
   }
   Mock.mock(//auth/login/, ‘post’, login) // 正则 /auth/login post 调用login函数

3. 这才是真正拦截 使用VueAxios 请求的都会被拦截
   在src/untils/axios.js 中
   const VueAxios = {
   vm: {},
   // eslint-disable-next-line no-unused-vars
   install (Vue, instance) {
   if (this.installed) {
   return
   }
   this.installed = true

   if (!instance) {
   // eslint-disable-next-line no-console
   console.error(‘You have to install axios’)
   return
   }

   Vue.axios = instance

   Object.defineProperties(Vue.prototype, {
   axios: {
   get: function get () {
   return instance
   }
   },
   $http: {
   get: function get () {
   return instance
   }
   }
   })
   }
   }

export {
VueAxios
}
4. 在src/utils/request.js 中 引入axios请求 和 vuex
import axios from ‘axios’
// 创建 axios 实例
const request = axios.create({
// API 请求的默认前缀
baseURL: process.env.VUE_APP_API_BASE_URL,
timeout: 6000 // 请求超时时间
})
export default request // 导出封装好的拦截器

5. 在src/api/login.js 中 封装请求函数并导出
   import request from ‘@/utils/request’// 加了个头 弹窗提示 限制导出内容
   export function login (parameter) { // 导出函数 login
   return request({
   // url: userApi.Login,// Login: ‘/auth/login’,
   method: ‘post’,
   data: parameter
   })
   }

6. mock的index
   const Mock = require(‘mockjs2’) // 同步此处会一步步执行 mockjs 导入依赖模块
   require(’./services/auth’) // 读取文件
   require(’./services/user’)
   require(’./services/manage’)
   require(’./services/other’)
   require(’./services/tagCloud’)
   require(’./services/article’)
   Mock.setup({
   timeout: 800 // setter delay time
   })

3中会拦截
Mock.mock(//auth/login/, ‘post’, login) // 正则 /auth/login post 调用login函数
3 拦截之后会自动返回数据