Vue中使用mock.js模拟数据

vue+mockjs 模拟数据，实现前后端分离开发 

安装mockjs

在项目文件夹路径下输入命令

npm install -S mockjs (因为开始是手输入的mockjs  ,写成了mock.js,导致后面出现很多问题，没有逗号没有逗号)

安装axios

在项目文件夹路径下输入命令

npm install -S axios （构建应用时需要访问一个 API 并展示其数据。而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种）

创建mockjs文档

1、上图是自己需要构建的数据，文档随便命名

2、要使用mockjs 必须先引入mockjs ：var Mock = require('mockjs')

3、构造模拟数据

4、Mock.mock('/api/studentList', studentList)  记录数据模板，当拦截到匹配 rurl 的 ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回

main.js导入mockjs

require('./api/mock.js')，括号中引入自己创建mock文档的路径

 

main.js导入axios

1、导入语句 

import axios from 'axios'

2、全局使用axios

Vue.prototype.$axios = axios

使用axios

1、axios只能在methods方法中使用，具体使用如下：

2、this.$axios.get('/api/studentList')，是从mockjs中取的

 

以上完成配置