mock使用详解

84 阅读 0 评论 56 点赞

我是靠谱客的博主完美店员，最近开发中收集的这篇文章主要介绍mock使用详解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

场景1：在vue项目中使用mock.js

步骤1.搭建测试项目

步骤1.1 创建项目

命令：

vue create mock-demo
然后选择：test(router,babel)

步骤1.2 安装依赖

# 使用axios发送ajax
npm install axios --save
# 使用mock.js产生随机数据
npm install mockjs --save-dev
# 使用json5解决json文件，无法添加注释问题
npm install json5 --save-dev

步骤2：学习mockjs

1.在项目根目录下面：新建mock文件夹/新建testMock.js

// 使用 Mock
const Mock = require('mockjs')
const id = Mock.mock("@id"); // 得到随机的id字符串
let obj = Mock.mock({
    id: "@id()", // 得到随机的id,对象
    username: "@cname()", // 随机生成中文名字
    date: "@date()", // 随机生成日期
    avatar: "@image('200x100', '#00405d', '#FFF', 'Mock.js')", 
    // => "http://dummyimage.com/200x100/00405d/FFF&text=Mock.js"
    description: "@paragraph()",// 描述
    ip: "@ip()",// IP地址
    email: "@email()" // email
    
})
// 输出结果
console.log(obj)

步骤3：学习json5

步骤3.1 编辑器安装json5拓展（JSON5 syntax）

在mock文件夹下面/新建user.json5

{
    id: "@id()", // 得到随机的id,对象
    username: "@cname()", // 随机生成中文名字
    date: "@date()", // 随机生成日期
    avatar: "@image('200x100', '#00405d', '#FFF', 'Mock.js')", 
    // => "http://dummyimage.com/200x100/00405d/FFF&text=Mock.js"
    description: "@paragraph()",// 描述
    ip: "@ip()",// IP地址
    email: "@email()" // email
    
}

步骤3.2 引入json5库来解析json5格式

新建mock/testJson5.js

const fs = require('fs')
const path = require('path')
const JSON5 = require('json5')
// 读取json文件
function getJsonFile(filePath) {
    // 读取指定json文件
    const json = fs.readFileSync(path.resolve(__dirname,filePath),'utf-8');
    // 解析并返回
	return JSON5.parse(json)
}
const json = getJsonFile('./user.json5');
console.log('json',json)

步骤4：mock和vue-cli结合

步骤4.1 新建index.js

在mock文件夹下，新建index.js

const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')
const JSON5 = require('json5')

// 读取json文件
function getJsonFile(filePath) {
    // 读取指定json文件
    const json = fs.readFileSync(path.resolve(__dirname,filePath),'utf-8');
    // 解析并返回
	return JSON5.parse(json)
}

const json = getJsonFile('./user.json5');
console.log('json',json)

// 返回一个函数
module.exports = function(app){
    if(process.env.MOCK == 'true') {
         // 监听http请求
    	app.get('/user/userinfo',function(rep,res){
        	// 每次响应请求时读取mock data的json文件
        	// getJsonFile方法定义了如何读取json文件并解析成数据对象
        	const json = getJsonFile('./userInfo.json5');
        	// 将json传入Mock.mock 方法中，生成的数据返回给浏览器
        	res.json(Mock.mock(json));
    	})
    }
  
}

步骤4.2 新建vue.config.js

在项目根目录下，新建vue.config.js

module.exports = {
    devServer: {
        before: require('./mock/index.js')
    }
}

步骤4.3 发送ajax请求

例如：在src/components/helloworld.vue中发送ajax请求

步骤5：mock移除

步骤5.1 在项目根目录下，新建.env.development

MOCK=true		然后重新执行：npm run serve

如果需要真正对接后台接口数据，只需要修改：

MOCK=false		然后重新执行：npm run serve

场景2：在jQuery项目中使用mock.js

步骤1. 搭建项目

步骤1.1 创建项目

新建文件夹 jquery-mock-demo

步骤1.2 新建index.html ,引入jquery.js文件和 mock.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
</head>
<body>
    
</body>
</html>

步骤2： mock 和jquery结合

步骤2.1 新建mock/index.js

Mock.mock('/user/userinfo','get',{
    id: "@id()", // 得到随机的id,对象
    username: "@cname()", // 随机生成中文名字
    date: "@date()", // 随机生成日期
    avatar: "@image('200x100', '#00405d', '#FFF', 'Mock.js')", 
    // => "http://dummyimage.com/200x100/00405d/FFF&text=Mock.js"
    description: "@paragraph()",// 描述
    ip: "@ip()",// IP地址
    email: "@email()" // email
})

步骤2.2 使用jquery发送ajax请求

$.ajax({
	url: '/user/userinfo',
    dataType: 'json',
    success:(data)=>{
        console.log(data)
    }

})

步骤3：移除mock

通过添加全局变量ENV来判断

html结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
</head>

<body>
    <script src="./mock/mock.js"></script>
    <!-- 通过MOCK 的布尔值判断，决定是否移除mock -->
    <script>MOCK = 'true'</script>
    <script>
        $.ajax({
            url: '/user/userinfo',
            dataType: 'json',
            success: (data) => {
                console.log(data)
            }

        })
    </script>
</body>

</html>

js结构

if (MOCK == 'true') {
    Mock.mock('/user/userinfo', 'get', {
        id: "@id()", // 得到随机的id,对象
        username: "@cname()", // 随机生成中文名字
        date: "@date()", // 随机生成日期
        avatar: "@image('200x100', '#00405d', '#FFF', 'Mock.js')",
        // => "http://dummyimage.com/200x100/00405d/FFF&text=Mock.js"
        description: "@paragraph()",// 描述
        ip: "@ip()",// IP地址
        email: "@email()" // email
    })
}