vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue使用Mock.js模拟数据

在vue中如何使用Mock.js模拟数据

作者：lyc3858

这篇文章主要介绍了在vue中如何使用Mock.js模拟数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

让前端攻城师独立于后端进行开发。

1、环境搭建

安装        

npm install mockjs

在src目录下新建mock文件夹并创建index.js来使用mockjs,然后在main.js中引入这个文件。

main.js

import Vue from 'vue'
import App from './App.vue'
//引入模拟的数据
import './mock/index.js'
new Vue({
  render: h => h(App),
}).$mount('#app')

@mock/index.js

//引入mockjs
import Mock from 'mockjs';

2、Mock 语法规范

Mock.js 的语法规范包括两部分：

数据模板定义规范 DTD

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值。

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

注意：

属性名和生成规则之间用竖线  |  分隔。

生成规则是可选的。

生成规则有7种格式：

生成规则 的 含义 需要依赖 属性值的类型 才能确定。

2.1、生成规则和示例：根据属性值的不同

属性值是字符串 String

"name|min-max": string

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

"name|count": string

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

属性值是数字 Number

"name|+1": number

属性值自动加 1，初始值为 number。

"name|min-max": number

生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。

"name|min-max.dmin-dmax": number

生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位

属性值是布尔型 Boolean

"name|1": boolean

随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。

"name|min-max": value

随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

属性值是对象 Object

"name|count": object

从属性值 object 中随机选取 count 个属性。

"name|min-max": object

从属性值 object 中随机选取 min 到 max 个属性。

属性值是数组 Array

"name|1": array

从属性值 array 中随机选取 1 个元素，作为最终值。

"name|+1": array

从属性值 array 中顺序选取 1 个元素，作为最终值。

"name|min-max": array

通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

"name|count": array

​​​​​​​通过重复属性值 array 生成一个新数组，重复次数为 count。

属性值是函数 Function

"name": function

​​​​​​​执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。

属性值是正则表达式 RegExp

'name': regexp

根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串

数据占位符定义规范 DPD

占位符的格式为：

注意：

Mock.mock({
    //这里的email、phone、last等都是在Mock.Rndom里的方法
    name: {
        //@是语法糖,不使用@ 就需要 Mock.Rndom.email()
        first: '@email',            
        middle: '@phone',
        last: '@LAST',
        full: '@first @middle @last'
    }
})

2.2、发送get请求

@mock/index.js

//引入mockjs
import Mock from 'mockjs';
//get请求
//书写模拟数据
let userInfo = Mock.mock({
    //属性名 | 生成规则 : 属性值
    "userInfo|5-10": [
        {
            "id|+1": 1,
            //关于属性值@指向的 Mock.Random 中的方法,详情可以去官方文档
            //这里属性名没有特殊符号啥的,所以 "name" 可简写为 name
            name: "@cname()",
            address: "@city(true)",
            email: "@email(163.com)",
            userImg: "@image('200x100')",
            date: "@date(yyyy-MM-dd hh:mm:ss)",
            title: "@ctitle(3,5)",
        },
    ],
});
//json-server会提供给我们接口地址,mockjs需要我们自己写
//写接口,并提供返回值
Mock.mock("/user/list", "get", () => {
    return {
        code: 200,
        message: "get请求成功",
        data: userInfo,
        total: userInfo.length,
    };
});
//如果自己生成数据,可以直接写,提供一个请求接口就行
let add = [
    {
        "id": "1",
        "imgUrl": "/images/banner1.jpg"
    },
    {
        "id": "2",
        "imgUrl": "/images/banner2.jpg"
    },
    {
        "id": "3",
        "imgUrl": "/images/banner3.jpg"
    },
]
Mock.mock('/lyc', 'get', () => add)

使用模拟数据

<script>
import axios from "axios";
export default {
  async created() {
    let res = await axios.get("/user/list");
    console.log("get请求", res.data);
    let res1 = await axios.get("/lyc");
    console.log(res1.data);
  },
};
</script>

2.3、发送post请求

//引入mockjs
import Mock from 'mockjs';
let { newData } = Mock.mock({
    "newData|1-3": [
        {
            //随机生成 2 句话
            companyDescription: "@cparagraph(2)",
            //从属性值 `array` 中按顺序选取 1 个元素，作为最终值。
            "positionTitle|+1": [
                "Java开发工程师",
                "Python开发工程师",
                "前端开发工程师",
                "产品经理",
            ],
            //从属性值 `array` 中随机选取 1 个元素，作为最终值。
            "degree|1": ["本科", "硕士", "博士", "专科"],
            //随机生成5个单词
            jobDescription: "@word(5)",
        },
    ],
});
Mock.mock("/api/user", "post", (data) => {
    console.log(data);
    return {
        status: 200,
        message: "post请求成功",
        data: newData,
    };
});

使用模拟数据

<script>
import axios from "axios";
export default {
  async created() {
    let res2 = await axios.post("/api/user", { name: "帅比" });
    console.log(res2);
  },
};
</script>

3、Mockjs配合fastmock使用

使用fastmock配合mock生成模拟数据,不用做以上步骤,只需要把mock生成数据的代码写在接口里就行。也就是前面的都不用看,找上面的 2.1、生成规则和示例：根据属性值的不同就行。

一些例子

phone:”@string(‘number',11)” 
name:”@cname()” 
imgUrl:”@image(‘200x200',#eee)” 
juzi:”@csentence()” 
"categoryId":"@string(number,1,2)",

使用fastmock

登录注册后，新建项目后到这个页面，点红色框

把我们之前的mockjs代码写这，保存就行

使用模拟数据接口

 

//直接书写mockjs代码生成路径,直接使用就行,mockjs都不用安装
<script>
import axios from "axios";
export default {
  async created() {
    let res3 = await axios.get(
      "https://www.fastmock.site/mock/371c1959a072aa34e8a7485e44262576/api/user"
    );
    console.log("res3", res3.data);
  },
};
</script>

普通html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
        function lyc() {
            axios.get(
                "https://www.fastmock.site/mock/371c1959a072aa34e8a7485e44262576/api/user"
            ).then(
                res => { console.log(res.data); }
            );
        }
        lyc()
    </script>
</body>
</html>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文