mock使用详解

我会带着你远行 2023-07-24 08:53 18阅读 0赞

#### 场景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

###### 步骤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 ######

##### 步骤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>
        
        <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
        })
    }