mock模板

最新推荐文章于 2024-08-07 10:10:51 发布

qwer22215

最新推荐文章于 2024-08-07 10:10:51 发布

阅读量406

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qwer22215/article/details/114753609

vue 专栏收录该内容

49 篇文章

订阅专栏

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文件我才知道 …

第二种使用方法

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
}

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函数
这才是真正拦截使用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 // 导出封装好的拦截器

在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
})
}
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
})