vue中使用mock.js进行数据模拟
文章 1303 0 0 0
发布时间:2020年01月20日

概述

前言及使用原因

mock.js没有用过的觉得很鸡肋,不就是填充数据吗,我开发的时候页面有数据啊,等等,我们要应用的场景就是我们调好接口,在没有网的情况下发现页面空荡荡的,而这个时候老板过来说看一下你的项目,怎么难道直接给老板看空白页面吗,当然是no,这时候mock.js这个数据生成器就派上了用场,用来展示数据,这样老板看到带数据的页面就感觉你这工作很ok!

简介

Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了。

特点

前后端分离

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

增加单元测试的真实性

通过随机数据,模拟各种场景。

开发无侵入

不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

用法简单

符合直觉的接口。

数据类型丰富

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

方便扩展

支持支持扩展更多数据类型,支持自定义函数和正则。

安装

npm install —save-dev mockjs

引入

为了只在开发环境使用mock,而打包到生产环境时自动不使用mock,我们可以在config/dev.env.js(开发环境)中做一个配置。

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    MOCK: 'true' //添加一个属性
})

config/prod.env.js(生产环境)

'use strict'
module.exports = {
    NODE_ENV: '"production"',
    MOCK: 'false' //添加一个属性
}

src/main.js

import Mock from 'mock/index.js' //也可以不写index.js
import axios from 'axios'; //引入axios,发送Ajax请求用的。
// 如果process.env.Mock == true执行startMock()
if (process.env.MOCK) {
    Mock.startMock();
}
// 也可以不用创建MOCK属性,正常用NODE_ENV判断。
// if (process.env. NODE_ENV == "development") {
//   Mock.startMock();
// }
// 为了要在其他组件中使用,将axios改为vue的原型属性。

目录和文件创建

在src目录下创建mock目录,添加index.js文件。

mock/index.js (普通使用)

import Mock from 'mockjs';
Mock.mock('/list/index',{
    'list|5':[{
        'title':'@ctitle(5,20)'
    }]
})

这里建议 (模块管理) 给每类api使用单独的mock文件,例如listapi中使用的所有接口要使用的mock放到listmock.js文件里。

src/mock/view.js (模块管理)

import Mock from 'mockjs'
export default {
  listData: confit => {
  // confit中存放的是{url: "/api/ui/getCommunityList", type: "GET", body: null}
  // body是传过来的值
  console.log(confit)
    return Mock.mock({
       'list|5':[{
         'title':'@ctitle(5,20)'
      }]
    })
  }
}

mock/index.js

import Mock from 'mockjs'
// 将所有的mock文件引入
import listAPI from './list'
export default {
    startMock(){
        // 设置所有ajax请求的超时时间,模拟网络传输耗时
        Mock.setup({
          timeout: 0-300
        })
        //在index.js中引入数据
        Mock.mock('/api/ui/getCommunityList', 'get', listAPI.listData);
    }
}

用Ajax请求打印出来我们在mock写入的虚拟数据。

src/component/list.vue

<template>
  <div>
    <ul>
      <li v-for='(item,index) in message'>{{item.c_title}}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'List',
    data () {
      return {
        message: ''
      }
    },
    mounted(){
      this.getData();
    },
    methods:{
      getData:function(){
        var that = this;  //用that去保存vue的实例
        that.$axios.get('/api/ui/getCommunityList').then(function (res) {
          that.message = res.data.result.communityList
          console.log(res);
        })
      }
    }
  }
</script>

执行之后console.log(res)打印出来的如下图:

vue中使用mock.js进行数据模拟

拦截ajax请求,配置mock的数据

拦截ajax请求主要可以使用Mock中的两个方法:

Mock.mock( rurl, rtype, template )
Mock.mock( rurl, rtype, function( options ) )
rurl:表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如:

/\/domain\/list.json/
'/domian/list.json'

rtype:表示需要拦截的 Ajax 请求类型。例如 GET、POST等。

template:表示数据模板,可以是对象(obj)或字符串(string)。如果需要要把数据写死,可以直接写一个普通的对象。如果要让Mock随机生成,可以根据Mock模板的规则自定义。例如:

{ ‘data|1-10’:[{}] } 表示生成生成包含 1到10个空对象的数据

@EMAIL’ 表示随机生成一个email地址

@CNAME’ 表示随机生成一个中文人名

评论专区