2.Vue中使用mock模拟数据的生成

Vue中使用mock模拟数据的生成

mock是一个模拟数据生成器，旨在帮助前端独立于后台开发，在后台未完成接口时，前端可直接模拟数据开发测试。
mock功能：
1）、根据数据模版生成模版数据；
2）、模拟AJAX请求，生成请求数据；
3）、基于HTML模版生成模版数据。
demo步骤：
1、在vue项目中需要Vue、vue-resource、vue-cli

2、通过 npm i mockjs --save-dev 在项目中安装mockjs依赖

3、通过 npm i axios 在项目中安装axios依赖

4、在src同级下新建mock文件夹，文件夹下新建一个index.js

语法基础，通过node指令执行可以打印看到数据

//导入mockjs
const Mock = require('mockjs');

//调用Mock的方法，生成模拟的数据
//生成一个用户名，*1-10次
// var data = Mock.mock({'username|1-10':'*'})

//生成一个用户名，*5次
// var data = Mock.mock({'username|5':'*'})


//生成一个数字，年龄18-40之间
// var data = Mock.mock({'age|18-40':0})

//随机生成一个id
// var data = Mock.mock('@id')
// var data = Mock.mock('@id()')

//随机生成一个中文名
// var data = Mock.mock('@cname()')

//随机生成一个日期
// var data = Mock.mock('@date(yyyy-MM-dd)')

//随机生成一个描述
// var data = Mock.mock('@paragraph()')

//随机生成一个邮箱地址
// var data = Mock.mock('@email()')

//随机生成一个对象
var data = Mock.mock({
    id:'@id()',
    username:'@cname()',
    date:'@date(yyyy-MM-dd)',
    description:'@paragraph()',
    email:'@email()',
    'age|18-40':0
})
console.log(data);

index.js中的文件内容

//导入mockjs
const Mock = require('mockjs')

module.exports = function (app) {
        //node中的express框架
        //参数1：接口地址；参数2：服务器处理函数
        app.use('/api/userinfo', (req, res) => {
            //随机生成一个对象
            var data = Mock.mock(
                //自己定义的数据
                //自己定义的数据开始
                [
                    {
                        usermessage: '邀请供应商注册',
                        user: [
                            {
                                page: 1,
                                'userinfo|10': [
                                    {
                                        companyname: '有限公司',
                                        username: '@cname()',
                                        phone: /^1[34578]\d{9}$/,
                                        'state|0-3': 0,
                                        date: '@date(yyyy-MM-dd HH:mm:ss)',
                                    }
                                ]
                            }
                        ]
                    },   
                ]
                //自己定义的数据结束
            )
            // 将模拟的数据转成json格式返回给浏览器
            res.json(data)
        })
}

5、跟src文件目录同级下新建一个vue.config.js文件，配置vue.config.js

module.exports = {
    devServer: {
        // devServer在发送请求时，会先走before指定的函数中进行处理，如果before中没有对应的接口路由，才会请求外网等
        before: require('./mock/index.js')
    }
}

6、在vue组件中使用axios请求数据

<template>
	<div>
		//使用通过axios请求获取到的mock数据
		{{ people }}
	</div>
</template>
<script>
//在组件中导入axios
import axios from "axios";
export default {
  name: "DataPage",
  data() {
    return {
      people: [],
    };
  },
  created() {
    axios.get("/api/userinfo").then((result) => {
      //   console.log(result.data);
      this.people = result.data;
      //   console.log(this.people);
    });
  },
};
</script>

{
// console.log(result.data);
this.people = result.data;
// console.log(this.people);
});
},
};