vue中Mock的语法及使用

实际开发中可能用到mock的机会并不多，但作为前端开发，也是必不可少的，记录一下，方便以后查看~

语法规范：

1.数据模板定义规范：

数据模板中的每个属性由三部分组成：属性名，生成规则，属性值

"name|rule":value

2.数据占位符定义规范：

占位符只是在属性值字符串中占个位置，并不出现在最终的属性中。

@占位符

@占位符（参数[,参数]）

属性是字符串的：

'name|min-max':string

例如：'username|1-3':'*'

通过重复string 生成一个字符串，重复次数大于min,小于max

'name|count':strting

例如：'name|3':'123'

通过重复string 生成一个字符串，重复次数为count

属性是number类型

'name|min-max':number

'age|18-40':0

number是初始值，18-40的数字

占位符的定义规范：

@id():随机生成一个id

@cname():s随机生成一个中文名称

@date('yyyy-MM-dd'):随机生成日期

@paragraph():随机生成一段描述

@email()随机生成邮箱地址

下面说说使用：

安装:

npm i mockjs
           

导入:

const Mock = require("mockjs")
let data = Mock.mock({
    username:"@cname()"
})
console.log(data)//data为生成的数据
           

定义数组（直接终端运行文件，node mock.js）：

const Mock = require("mockjs")
let data = Mock.mock({
    'userInfo|10-18': [
        {
            id:"@id()",
            name:'@cname()',
            paragraph:"@paragraph()",
            email:"@email()"
        }
    ]
})
console.log(data)//data为生成的数据
           

在vue中的使用：

在.env.development（可在根目录自行创建）文件中添加mock开关：

MOCK=true
           

在mock.js中，主要运用了nodejs的语法：

const Mock = require("mockjs")

module.exports = function(app){
    if(process.env.Mock==true){ //获取到开关的值
        app.use('/api/userInfo',(req,res)=>{
            let data = Mock.mock({
                'userInfo|10-18': [
                    {
                        id:"@id()",
                        name:'@cname()',
                        paragraph:"@paragraph()",
                        email:"@email()"
                    }
                ]
            })
            res.json(data)
        })
    }
}
           

在vue.config.js中：

module.exports = {
    devServer: {
        before:require("./mock/mock"), //主要是这句话
        headers: {
            'Access-Control-Allow-Origin': '*',
        }
    }
}
           

最后在请求中调用此路径

axios.get("/api/userInfo").then(res=>{})