【无标题】mockjs入门

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：mock.js是基于node平台的一款生成随机数据的资源包，因此需要在node环境下安装以及使用它，我们通过操作mock指令完成对数据的增删改查，是前后端分离过程中前端的比较优秀的模拟API的工具。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、mockjs的作用？

1.拦截ajax。
2.生成伪随机数据，当前端开发，程序员写好了接口文档没有实现接口文档先自己造数据，模拟后端，开发前端的功能，等待后端接口做好，和后端联调，更改baseURL,实现切换接口服务器，在后端接口（API）尚未完成之前，前端制作的“假数据”或者写死的数据时使用，并在接口文档拟定之后切换成真实数据组，完成页面的相互交互效果以及对程序性能的相关测试。

2.安装

二、使用步骤

1.安装mockjs

npm i mockjs -D

代码如下（示例）：

2.使用mockjs

1.首先在vue项目文件包src创建个文件夹建个名为mock的js文件
2.模拟一下拦截ajax请求，在mock.js里导入mack.js import Mock from "mockjs"; （有的是mock.js一样的，单纯的格式化样式不一样）在mock.js里写入

	//只要网络地址匹配到这个正则就会拦截
Mock.mock(/\/v5\/list/, {
    name: 'baize',
    age: 18
})

3.在mian.js导入

mack.js import "@/utils/mock";

4.在需要使用的页面里发送请求 

import axios from "axios"
	export default{
			created(){
					axios.get("/v5/list")
			.then(res => {
                console.log("模拟数据", res.data)
            })
            .catch(err => {
                console.log(err);

            })

  }

}

三、mock常用的语法

1、@cname生成姓名

"name": "@cname",

2、随机生成1-100之间

            "agel1-100": 1,

3、随机生成25-50之间小数点后2-5位

            "price|25-50.2-5": 1,

4、随机生成1-5个★

             "score|1-5": "★",

5、随机生成8-14位的标题

             "title": "@ctitle(8,14)",

6、随机生成段落

             "description": "@cparagraph",

7、随机ture或false

              "isLog|1": true,

8、随机从数组中生成2-10个数据的Array

              "friend | 2-10": ["小红", "小绿", "小蓝"],

9、随机从Object中生成2个数据的Object

        "des|2": {
            "eye": 1,

            "hand": 2,

            "job": "teacher"

        },

10、随机生成1开头11位的字符串

        "tel": /1\d{10}/,

11、随机生成邮箱

        "email": /[a-z]{2,6]@(126|163|qq)\.(com|cn|net)/,

12、随机生成函数内的数据并运行函数

“canMerry”: function () {
if (this.age > 22) {
return true;

            } else {
                return false;

            }

        },

13、随机生成日期

 "day": "@date( 'yyyy-MM-dd' )",

14、随机生成时间

 "time": "@time( 'HH:mm:ss' )",

15、随机生成城市地点

 "add": "@county(true)",

16、随机生成200x180图例

"avatar": "@dataImage('200x180','图例')"

总结：优点

提示：
1.前后端分离

2。可随机生成大量的数据

3.用法简单

4.数据类型丰富

5.可扩展数据类型