实战Vue简易项目(5)模拟数据

193 阅读3分钟
原文链接: segmentfault.com

关于模拟数据,这里使用Mock.js这个库,关于用法,官网说的也比较详细,这里我就简单的带一下。

列表数据

我们先将项目中src/components/HelloWorld.vue删除,将src/router/index.js作如下修改:

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/views/vacation/'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
  ]
})

然后,在src/views/vacation/建立index.vue

<template>
  <div>list view</div>
</template>

显示效果

在手机模式下,显示效果如下:

列表初始页面

模拟数据

在项目根目录下,使用命令行npm i -D mockjs

新建src/mock/list.js:

import { mock, Random } from "mockjs";

export default mock({
  'list|0-50': [
    {
      'approveId': '@id',
      'applier': {
        'userId': '@guid',
        'userName': '@cname',
        'sectionId': '@id',
        'sectionName': '@ctitle',
      }
      ...
    }
  ]
})
  • 这里的'@id'(称为“占位符”)是Random.id()的简写形式;
  • 这里的'@id'(称为“占位符”)必须使用引号包裹;
  • 这里的'@id' + 111会是将'@id'当作字符串(返回'@id111'),不等于Random.id() + 111

新建src/mock/index.js

Mock.js拦截请求地址:

import { mock, Random } from "mockjs";
import List from "./list";

mock('\/','get',()=> List);
  • 在这里,使用Mock.mock( rurl?, rtype?, function( options ) )拦截路由请求的/路径,返回模拟的List列表。
  • rurl:拦截路径规则,可以是字符串'/',也可以是一个正则表达式/\//

    • 若请求/?id="1"mock的拦截路径可以写成Mock.mock(/\/?id=\"\d\"/,'get',()=>List)
    • 若需要根据请求参数不同,返回对应id的数据,则需要自己截取url字符串作判断了;
  • rtype:拦截请求类型,getpost
  • function(options):回调函数,拦截成功后的处理逻辑;

    • optioins = {url, type, body}
    • url为请求地址;
    • type为请求类型;
    • body为请求时传入的数据(只在post请求时有用);

状态管理

这里,我们使用vuex作状态管理,axios请求数据:npm i -S vuex axios

新建src/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

const $setApplications = 'SETAPPLICATIONS';

export default new Vuex.Store({
  state: {
    applications: null,
  },
  mutations: {
    [$setApplications]: (state, list) => state.applications = list,
  },
  actions: {
    requestApplications({ commit, state }) {
      axios.get('/')
        .then(({data:{list}}) => {
          commit($setApplications, list);
        })
        .catch(() => {
          console.log(arguments);
        })
    }
  }
})
  • 在这里,state保存整个项目公用的状态,mutations进行同步数据处理,actions处理异步请求。
  • mutations是唯一修改state的入口,actions要想修改state,需要内部调用一下mutations
  • 在项目程序中,通过this.$store.commit('SETAPPLICATIONS',null)修改state的值。

    • 若要传多个值,第二个参数为一个对象(不接受多个参数的传入,最多只接收两个参数);
  • 在项目中,通过this.$store.dispatch('requestApplications')调用一个异步请求。

    • 若需要传参,传第二个参数(不接受多个参数的传入,最多只接收两个参数);

请求数据

目前,通过以上步骤,我们独立的构建了模拟数据和状态管理,但还没有将它们结合起来。

src/main.js中添加import './mock'import store from './store',且修改:

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

结束了?

还没有,我们还要获取数据:
src/views/vacation/index.vue中添加:

<script>
export default {
  beforeCreate(){
    this.$store.dispatch('requestApplications');
  }
}
</script>

触发请求。

请求结果

请求结果.png

Mock.js用法

如果想了解Mock.js的用法,推荐看官网的"文档"页,而不是"示例"页。

Mock.js返回的数据格式都是对象,如果想获取其它格式(如数组...)需要自己另辟蹊径了。

规则

格式:

Mock.mock({
  // 初始化对象,也是输出的对象;
})

语法规范:

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

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


属性名 和 生成规则 之间用竖线 | 分隔(千万不要带空格吖,否则,你的属性名可能会包含空格)。
生成规则 是可选的。
生成规则 有 7 种格式:
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
生成规则 的 含义 需要依赖 属性值的类型 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。

验证

如果你想验证写出来的模拟数据是否正确,可以在“示例”页打开控制台,直接运行。

Mock.mock({
  'list|1-10':[
    Random.id(),
  ]
})

测试结果

mock验证

vue-devtools

安装地址

使用提醒

  • $vm0指向某一组件实例,该实例必须打开控制台的VueTab页,点击某一组件时才能获取到,否则,汇报$vm0未定义
  • 点击哪个组件,$vm0指向哪个组件,才能获取到该组件上的属性。

使用提醒

章节回顾

  • 知道如何模拟数据了吧,接下来我要偷偷的模拟列表的数据了呢,你也不要忘了。
  • 如何使用Mock.js拦截请求呢,如何获得请求时的数据呢?
  • 如何通过axios请求数据呢,它和mutations有何区别?

思考

  • 懒货一枚,选择第三方列表库,如何在Vue项目中使用呢?

相关的官方文档

MockJS使用文档

MockJS示例(可通过控制台测试)

Vuex官网

番外

Vue-router用法