mockjs+axios+vue 入门级demo

今天在做vue项目的mock功能,刚刚查了下网络上的文档,但令我感到以外的是,无论是官方文档还是网上的小例子,很难找到一个能从头到尾说明白mock的最基本用法的文章,大部分都是对接口的说明。拜托,对于一个刚刚接触mock的人来说,最需要的是一个能够运行的小例子,从头到尾给出一个简单的说明,这样能让开发人员最开始对mock的规范有一个很全面的理解。

因为最近做前端项目的缘故,查了很多前端技术的官方文档,很遗憾,大部分文档在我看来写的都是一坨屎。能够像国外的开源文档(比如spring boot,hibernate等)写的清晰有条理的很少很少(说很少都是客气了,基本上没有)。

先说一下我对mockjs的理解。
定义上的东西不用多说,通俗解释,mockjs实际上是假数据+访问假数据的接口的集合,再说通俗点,就像一个水池和输传输水的管道,想要从这个水池抽水,首先管道要插进水池里,其次是水池里要有水。
对于具体的项目来说,axios提供了管道,并将管道插进mock水池,mock.js就是实际的mock水池。
无论项目写的有多复杂,本质上这种概念是不会变的。
废话不多说,直接看demo

首先需要安装axios和mockjs的依赖。
命令如以下所示(顺序不重要)

npm i  mockjs --save
npm install axios

安装成功后,在项目根路径下的package.json的dependencies中会有这两个依赖的版本说明:

"axios": "^0.19.0",
"mockjs": "^1.0.1-beta3",

下面就是核心的code了:

首先,声明vue文件中的template文件。 我在这里用的是ElementUI自带的table组件

<template>
  <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
</template>

注意其中的:data="tableData"这一行,这里指定了table中使用的数据对象。

第二步,写假数据
在项目src目录下新建mock.js文件,在其中加入以下内容: (此处注意一个知识点,大型项目里会创建mock文件夹,并将index.js及各个功能放在其中,本质上这是一样的,mock.js=mock/index.js)

// 引入mockjs
const Mock = require('mockjs')
// 使用mockjs模拟数据
Mock.mock('/route1', (req, res) => { // 当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据
  let list = [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  }, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  }, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  }, {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  }]

  return {
    tableData: list
  }
})

第三步,将数据声明放到vue文件中(第一步涉及的vue文件)

<script>
import axios from 'axios'

export default {
  data () {
    return {
      tableData: []
    }
  },
  mounted: function () {
    axios.get('/route1').then(res => { // get()中的参数要与mock.js文件中的Mock.mock()配置的路由保持一致
      this.tableData = res.data.tableData
      console.log(res.data) // 在console中看到数据
    }).catch(res => {
      alert('wrong')
    })
  },
  methods: {
  }
}
</script>

这样, 一个最简单的mock+axios的vue项目便做好了

阅读 779

推荐阅读

9 人关注
69 篇文章
专栏主页