mockjs在Vue中的使用

mockjs可以方便前端模拟后端的数据 ,提高开发效率

一、安装

npm install mockjs --save-dev

npm install axios --save

二、新建目录

在src下新建mock文件夹建立mock.js文件

三、src/mock/mock.js 相关数据模拟

import Mock from 'mockjs' //引入mockjs
import { Random } from 'mockjs' //引入random对象,随机生成数据的对象
// const domain ='http://mockjs.com.api' //定义默认域名
const code = 200 //返回的状态码
Mock.setup({
    timeout:1000 //设置请求延时时间
})
//mock一组数据demo
const produceData = function(opt){
    console.log('opt',opt);
    let articles = [];
    for (let i = 0; i < 6; i++) {//定义假数据生成规则
        let newArticleObject = { //mockjs模拟随机生成6条数据
            title:Random.csentence(5,30),//随机生成一段中文文本
            thumbnail_pic_s:Random.dataImage('300*250','mock的图片'),
            author_name:Random.cname(),//Random.cname()随机生成一个常见的中文姓名
            date:Random.date() + '' + Random.time(),
            email:Random.email('qq.com'),//随机生成一个邮箱
            name:Random.cname(),
            address:Random.county(),
            viewName:Random.cword(4,16),//随机生成任意名称
            billId: Random.string(10),
            orgId: Random.string('number', 8, 10),
            Date:Random.date('yyyy-MM-dd'),
            time:Random.time('A HH:mm:ss')
        }
        articles.push(newArticleObject)
    }
    //返回状态码和数据
    return{
        code,
       list:articles
    }
}
Mock.mock("/user",/post|get/i,produceData);//调用模拟数据方法

var obj = {'aa':'11','bb':'22','cc':'33','dd':'44'};
//自定义扩展属性
Random.extend({
    status:function(date){
        var sexes = ["有效","无效"];
        return this.pick(sexes);
    }
})
const tableData = function(opt){
    console.log('opt',opt);
    let tableList = [];
    for (let i = 0; i < 6; i++) {//定义假数据生成规则
        let newTableObject = { //mockjs模拟随机生成6条数据
            'name':Random.cname(),//中文名称
            'id': Random.increment(1),//属性值自动加1,初始值为1
            'age':Random.integer(18,28),//18至28以内随机整数,花一样的年龄
            'birthday':Random.date("yyyy-MM-dd"),//出生日期
            'color':Random.hex(),//16进制颜色
            'isMale|1':true,//布尔值
            'status':Random.status(),//此项为自定义
            'Date':Random.date('yyyy-MM-dd HH:mm:ss'),
            'address':Random.county(true), //随机生成一个县
            'isFat|1-2':true,//true的概率是1/3
            'fromObj|2':obj,//从obj对象中随机获取2个属性
            'fromObj2|1-3':obj,//从obj对象中随机获取1至3个属性
            'brother|1':['jack','jim'],//随机选取1个元素
            'sister|1':['jack','jim','lily'],//array中顺序选取元素作为结果
            'friends|2':['jack','jim']//重复2次属性值生成一个新数组
        }
        tableList.push(newTableObject)
    }
    //返回状态码和数据
    return{
        code,
       list:tableList
    }
}
Mock.mock("/test",/post|get/i,tableData);//调用模拟数据方法

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios' //引入axios
import Qs from 'qs'
import './mock/mock.js' //引入mockjs

//axios是不能在其他组件中使用的，所以将axios改写为vue的原型属性
Vue.prototype.$http = axios;//组件进行数据请求时可以用this.$http.get().then()来实现
Vue.prototype.qs = Qs;

Vue.config.productionTip = false

Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在xxx.vue中使用

<template>
    <div class="hello">
        <ul>
            <li v-for="(item,index) in data" :key="index">{{item.author_name}}</li>
        </ul>
        <el-button type="primary">主要按钮</el-button>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
                prop="id"
                label="序号">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名">
            </el-table-column>
            <el-table-column
                prop="sex"
                label="性别">
            </el-table-column>
            <el-table-column
                prop="age"
                label="年龄">
            </el-table-column>
             <el-table-column
                prop="birthday"
                label="生日">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
             <el-table-column
                prop="status"
                label="有效标记">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data(){
        return{
            data:[],
            tableData:[]
        }
    },
    created(){

    },
    mounted(){
         this.getAlldata();
         this.getTableData();
    },
    methods:{
        getAlldata(){
            let that = this; //用that保存vue实例
            this.$http.post('/user')
            .then(res => {
               if(res.data.code == 200){
                   that.data = res.data.list;
               }
            })
            .catch(function(err){
                console.log("连接错误"+err)
            })
        },
        getTableData(){
            let that = this; //用that保存vue实例
            this.$http.post('/test')
            .then(res => {
               if(res.data.code == 200){
                   that.tableData = res.data.list; 
               }
            })
            .catch(function(err){
                console.log("连接错误"+err)
            })
        }
    }
}
</script>
<style scoped>
ul{
    list-style: none;
}
</style>