Mock.js基本使用

朴灿烈づ我的快乐病毒、 2021-09-18 11:22 384阅读 0赞

**一 简介**

> 项目中后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行开发。为了方便前端代码自测，提高开发效率，可以使用mock.js模拟生成数据进行前后端数据联调

> 原理：拦截了所有的请求并代理到本地模拟数据，所以 network 中没有发出任何的请求。因为只是模拟数据进行测试，就不必频繁发请求给服务器造成压力

> 所有的 mock 数据都在 @/src/mock 目录下，它只会拦截 @/src/mock/index.js 文件中拦截的 url。  
> 移除只需要在 @/src/main.js 中移除 import ‘./mock’ 并且删除 @/src/mock 文件夹即可。

**二 参考网站**

> 官网：[http://mockjs.com][http_mockjs.com]  
> github：**[https://github.com/nuysoft/Mock/wiki][https_github.com_nuysoft_Mock_wiki]** \*\*很详细的mock.js相关知识介绍

**三 语法规范**  
**数据模板定义规范（Data Template Definition，DTD）  
数据占位符定义规范（Data Placeholder Definition，DPD）**

> 1 数据模板定义规范 DTD  
> 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值–> ‘name|rule’: value  
> 注意：  
> 属性名 和 生成规则 之间用竖线 | 分隔。  
> a. 生成规则 是可选的。  
> b. 生成规则 有 7 种格式：  
> ‘name|min-max’: value  
> ‘name|count’: value  
> ‘name|min-max.dmin-dmax’: value  
> ‘name|min-max.dcount’: value  
> ‘name|count.dmin-dmax’: value  
> ‘name|count.dcount’: value  
> ‘name|+step’: value  
> c. 生成规则 的 含义 需要依赖 属性值的类型 才能确定。  
> d. 属性值 中可以含有 @占位符。  
> e. 属性值 还指定了最终值的初始值和类型。

> 1.  数据占位符定义规范 DPD  
>     a. 用 @ 来标识其后的字符串是 占位符。  
>     b. 占位符 引用的是 Mock.Random 中的方法。  
>     c. 通过 Mock.Random.extend()  
>     d. 来扩展自定义占位符。  
>     e. 占位符 也可以引用 数据模板 中的属性。  
>     f. 占位符 会优先引用 数据模板 中的属性。  
>     g. 占位符 支持 相对路径 和绝对路径。

**vue中使用mock需要先npm安装mock，再引入到main.js中，不然接口会报404  
Vue引入mock参考：[https://www.cnblogs.com/vae860514/p/8405294.html][https_www.cnblogs.com_vae860514_p_8405294.html]**

**三 简单例子**

1.  npm install mockjs
2.  在文件夹根目录下中创建mock的目录，里面放你要写的mock.js  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70]  
    3.在根目录中的js中引入  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 1]  
    4.在mockjs中定义mock数据模板和生成模拟数据

> 1.mock.js中的数据模板方式：**（‘name|rule’: value）**–>分别对应： **‘属性名 |生成规则‘ : 属性值**  
> 2. **Mock.mock( rurl?, rtype?, template|function( options ) ) 根据数据模板生成模拟数据**

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

5.在根目录下创建api文件夹，新建js调接口。我这用的是axios调的，也可以用别的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 3]  
6.最后就可以使用了，在其他vue文件中引入这个js用api中js配置的名字调接口了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 4]  
**四 另外一个例子(其实和上面例子一样只是多写了一个接口，可以不看第三个直接看这个)**

1.  还是一样，在根目录下的mock文件夹中新建你的mockjs文件，可以把同一个模块的模拟接口和数据全部写在同一个文件中，但是我这里是分了两个文件分别写的  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 5]
2.  把第一步的mockjs引入到mock文件夹的index.js中  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 6]  
    3.在api中配置好刚模拟的接口信息  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 7]  
    4.在自己测试的界面文件中，引入刚刚api中配置的接口进行调用，可以使用你之前配置的模拟数据了  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 8]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 9]  
    5.界面有显示数据就可以了  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 10]

[http_mockjs.com]: http://mockjs.com
[https_github.com_nuysoft_Mock_wiki]: https://github.com/nuysoft/Mock/wiki
[https_www.cnblogs.com_vae860514_p_8405294.html]: https://www.cnblogs.com/vae860514/p/8405294.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70]: /images/20210812/128a1d44106d4963afd8c8578e7b8f88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 1]: /images/20210812/afeeaa328d83422282c3b55efac1d7b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 2]: /images/20210812/4e88373c26ec48f9bf82d57ab65a0ad0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 3]: /images/20210812/4d698491394e4a859fe32b38c879f314.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 4]: /images/20210812/98bbc2867d964b6fa879a3efad31be1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 5]: /images/20210812/79d1b36aa9024f20ab381a0fc6883d8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 6]: /images/20210812/e22813ecf4074759b1cfa684eccaf618.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 7]: /images/20210812/0bd9bf980b2f46ddb4bc0deb758141a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 8]: /images/20210812/d88d1b3fdffd406fbf8c41d1ced7948c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 9]: /images/20210812/6e0c2838e31949c8ada9fd55bb0b5eff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NzNTE1ODk2NzQ1_size_16_color_FFFFFF_t_70 10]: /images/20210812/be0ed54d12334163badeecc9aa637839.png