mockjs（接口服务代理）

傷城~ 2022-12-05 12:21 340阅读 0赞

## mock官网：http://mockjs.com/ ##

# 一、搭建一个练习项目 #

### 1.利用vue的项目脚手架进行搭建 ###

##### 命令： #####

> vue create mock-demo

##### 截图： #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center]

### 2.安装相关的依赖 ###

命令：

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

###  ###

# 二、学习mockjs #

新建mock文件夹，新建testMock.js

[mock语法定义][mock]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 1]

const Mock = require('mockjs') //导入mockjs以来模块
    let id = Mock.mock("@id")//得到随机的id,字符串
    // console.log(id);//测试
    let obj = Mock.mock({ 
      id:'@id()', //得到随机的id
      username:'@cname()',//随机生成中文名字
      date:'@date()',//随机生成日期
      avata:"@image('200x200','red','#fff','avatar')",//生成图片，参数：size,background,foreground,text
      descrtption:"@paragraph()",//描述
      ip:"@ip()",//ip地址
      email:"@email()"//email
    })
    console.log(obj);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 2]

# 以上代码的随机生成位置，还需要自己去官方文档查看，谢谢！ #

# 三、在mockjs中使用json5的操作 #

#### 通过上面 json5 模块的安装后，还需要相应的 vscode 插件 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 3]

#### 1.设置一个json5文件 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 4]

#### 2.设置一个js文件，通过 fs \\ path 查询 之前设置的 json5 文件夹 ####

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kb0J1jjx-1599721543422)(C:\\Users\\wangyu123\\AppData\\Roaming\\Typora\\typora-user-images\\image-20200910121003639.png)\]

#### 3.在mock文件夹下通过终端获取得到 “字符串形式的结构” ####

![在这里插入图片描述][20200910164017886.png_pic_center]

#### 4.在testJSON5.js文件中引入 模块 json5，然后利用json的parse() 方法进行字符串转对象的形式输出 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 5]

#### 修改前后的对比： ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 6]

#### \_在vue项目中使用mock.js\_通过devServer配置监听mock请求 ####

#### 1.在新建的vue.config.js文件中进行devServer的配置 ####

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

#### 2.在mock文件夹下，创建 index.js 并引入代码 ####

#### 3.在vue项目中使用mock.js\_axios发送请求获取mock提供的数据 ####

3.1 在项目文件夹的HelloWorld.vue文件夹中发送请求

代码设置为：

export default { 
      name: 'HelloWorld',
      props: { 
        msg: String
      },
      mounted:{ 
        axios.get('/user/userinfo')
        .then(res => { 
    		console.log(res)    
    	})
        .catch(err => { 
            console.log(err)    
        })
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 7]

获取到数据为：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 8]

#### 4.在vue项目中使用mock.js\_mock移除（当后台接口已写好的时候移除） ####

4.1 通过设置 vue cli 的环境变量进行设置

先进行环境变量的判断：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 9]

在根目录设置 .env.development 文件 设置环境变量的去向值

![在这里插入图片描述][20200910164132167.png_pic_center]

#### 5.在vue项目中使用mock.js\_mock-json5-devServer-axios职责 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 10]

#### 6.在jQuery项目中使用mock.js\_mock拦截请求的原理 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 11]

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Document</title>
      <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <script src="http://mockjs.com/dist/mock.js"></script>
    </head>
    <body>
      
    </body>
    </html>

##### 7.在jQuery项目中使用mock.js\_使用mock #####

Mock.mock('/user/userinfo','get',{ 
      id:"@id()", //得到随机的id
      username:"@cname()",//随机生成中文名字
      date:"@date()",//随机生成日期
      avata:"@image('200x200','red','#fff','avatar')",//生成图片，参数：size,background,foreground,text
      descrtption:"@paragraph()",//描述
      ip:"@ip()",//ip地址
      email:"@email()"//email
    })

6.2 发送 jQuery 的ajax 请求

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 12]

#### 8.在jQuery项目中使用mock.js\_移除mock ####

8.1 : 直接注释或删除引入的mock.js文件

8.2：在编译的mockjs文件中设置判断

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 13]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 14]

\`\`\`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 15]

#### 8.在jQuery项目中使用mock.js\_移除mock ####

8.1 : 直接注释或删除引入的mock.js文件

8.2：在编译的mockjs文件中设置判断

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 17]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d4967006169a41f9998512ae026e6401.png
[mock]: http://mockjs.com/examples.html#Random.id%28%29
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/96f34c5786a14e9990231cd495441a8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/d4850fbedae549a9a29997ea2a5aa2fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/bac363bcd7fc4352a0a15995ee2ff6ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/0bcd95e990594f82b08b1feb472327b8.png
[20200910164017886.png_pic_center]: /images/20221123/3eedc976b57f4a22b8283f222ab51299.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/636f684da6ea4bdbb9b3917a8edddee9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/5fa7e2e0d2844135acf066c909948515.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/f9be0b80a5b64f288a40452f037e8a47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/dbaaf01b349147b89ff2baa2298a605a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/0c32e98bc9024362b991276bc34cc524.png
[20200910164132167.png_pic_center]: /images/20221123/73c7ae29f9924caa8432b7ae8a70eb3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/21691c69a82f4fc0adb93d08f52c6693.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/3b9cff3c6fbe40ea9de83f48c59d011a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/85de4d00e49b427bbd3a4f23d6b61afa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/1925a1caf819443888fe1bd416f0b51e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/cba413f015784d25b16c3088700dbbc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221123/0534e3698a1e422abe9078cb8bdc84df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221123/a8535a20688347fea71fc51b716abc0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY5NDY4Mg_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221123/e4ad10a2be1047e8ad8699a250e308b9.png