1. 搭建一个vue-cli项目
vue-cli脚手架安装一个vue项目
2.npm安装mock
npm install mockjs
3.在项目的src文件夹下创建一个名为 mock的文件夹,在mock的文件夹下创建一个mock.js文件
4.在mock.js文件下写入以下代码:
//引入mockjs
const Mock = require('mockjs')
//使用mockjs模拟数据
Mock.mock('http://localhost:8081/#/api/data', (req, res) => { //
return {
data: [
{
"id" : 1,
"username": "zhoujielun",
"password": "123456"
},
{
"id" : 2,
"username": "guojingming",
"password": "666666"
},
]
}
})
5.在main.js中加入以下代码
import axios from "axios"
import $ from "jquery"
import "./mock/mock"
Vue.prototype.$ = $
Vue.prototype.$axios = axios
require('../node_modules/mockjs')
6.在需要请求的页面加入以下代码:
import axios from 'axios'
import $ from "jquery"
mounted() {
this.$axios.get('http://localhost:8081/#/api/data').then(res=>{
console.log(res.data)}
}
7.在浏览器控制台就可以看到打印结果
data: Array(2)
0: {id: 1, username: "zhoujielun", password: "123456"
1: {id: 2, username: "guojingming", password: "666666"}