Mock.js相关知识点

说明：Mockjs可以用于前后端同步进行，前端可先用Mockjs模拟端口数据，用于开发时数据的获取以及样式修改，在前端开发完成后，把后端写的接口把mockjs替换，就实现了前后端共同进行一个项目。

Mock.js官网：Mock.js (mockjs.com)

• 拦截异步请求
  Mock.mock拦截ajax请求，有三个参数：
  • 第一个参数：要拦截的请求路径
  • 第二个参数：要拦截的请求方式
  • 第三个参数：拦截之后的处理逻辑（它是一个函数）这个函数必须要有一个返回值，这个返回值就是返回给异步请求的结果

 

作用： 生成随机数据，拦截 Ajax 请求(模拟后端的接口)

使用：

1、下载mock

npm i mockjs -D

2、在utils中新建一个mock.js文件

 //导入mockjs

import Mock from 'mockjs';

Mock.mock(/\/v5\/list/, {

    name: "mumu",

    age: 18

})

3、在main.js里导入

 import '@/utils/mock.js'

4、在创建的mock.js里使用

Mock.mock(/\/v5\/user/,

    {

        code: 0,

        msg: "成功",

        "data|10": [

            {

                //随机生成名字

                "name": "@cname",

                //随机生成一个1-100里的数字字母

                "age|1-100": 1,

                //随机生成一个25-50小数点二位到五位的数字

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

                //随机生成一个到五个五角星

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

                //随机生成一个8-14个字的题目

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

                //随机生成一段文字

                "description": "@cparagraph",

                //随机生成true或者false

                "isLog|1": true,

                //随机生成一组两个到十个重复的数组

                "frirnd|2-10": ["小A", "小B", "小C"],

                //随机生成数组里两个元素

                "des|2": { "eye": 2, "hand": 2, "job": "stu" },

                //随机生成一个用正则的电话号码

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

                //随机生成一个由正则的email

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

                //根据上边的年龄age来返回true或者false

                "canMerrry": function () {

                    if (this.age > 55) {

                        return true;

                    } else {

                        return false;

                    }

                },

                //随机生成时间，格式为yyyy-MM-dd

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

                //随机生成具体时间，格式为HH:mm:ss

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

                //随机生成一个城市

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

                //随机生成一个200x100的图片，图片内容为“图例”

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

            }

        ]

    }

)