【vue】在vue-cli2下用axios模拟请求本地数据
前请提要:在未与后台进行交互时,前端先自行对接口进行测试是很有必要的。那么,要如何来模拟数据请求呢?如何请求本地的json文件呢?接下来将会详细说明。创建一个json文件(存放未知自行选择,这里我选择放在全局目录下)——db.json。{"student":[{"name&
·
前请提要:
在未与后台进行交互时,前端先自行对接口进行测试是很有必要的。那么,要如何来模拟数据请求呢?如何请求本地的json文件呢?接下来将会详细说明。
- 创建一个json文件(存放位置自行选择,这里我选择放在全局目录下)——db.json。
{
"student":[
{
"name": "Liz",
"age": 20,
"class": "xinguan1163",
"number": 1
},
{
"name": "aiz",
"age": 22,
"class": "xinguan1163",
"number": 2
},
{
"name": "siz",
"age": 21,
"class": "xinguan1163",
"number": 3
},
{
"name": "qiz",
"age": 25,
"class": "xinguan1163",
"number": 5
}
],
"teacher": [
{
"name": "qiz",
"age": 45,
"class": "xinguan1163",
"number": 5
},
{
"name": "riz",
"age": 35,
"class": "xinguan1163",
"number": 5
}
]
}
-
若未安装express需要先安装,
npm install express
(在安装express的过程中报了错,后面通过删除node_modules文件夹,再以管理员身份运行cmd/git bash,输入命令npm install
得到解决) -
在build/webpack.dev.conf.js文件下配置(以前是在dev-server.js下配置)。
const express = require('express') //1.
const app = express() //2.请求sever
var appData = require('../db.json') //3.加载本地数据文件
var student = appData.student
var teacher = appData.teacher
var apiRoutes = express.Router() //4.
app.use('/api',apiRoutes) //5.通过路由请求数据
然后下拉找到devServer,在其中添加以下代码。
before(app) {
app.get('/api/student', (req, res) => {
res.json({
errno: 0,
data: student
})//接口返回json数据,上面配置的数据appData就赋值给data请求后调用
})
app.post('/api/teacher', (req, res) => {
res.json({
errno: 0,
data: teacher
})
})
}
(这里之所以有get/post之分,是为了分别模拟两种请求)
-
安装axios。
npm install axios --save
-
在src/main.js中,导入axios。
import axios from 'axios'
Vue.prototype.$axios = axios
- 在App.vue文件中
//get请求
this.$axios.get("/api/student",{
params: {
id: 123
}
})
.then(res=>{
console.log(res.data);
}).catch(function(error){
console.log("error init."+error)
})
//post请求
this.$axios.post("/api/teacher",{
userId: "888"
},{
headers: {
token: "tom"
}
}).then(res => {
console.log(res.data);
}).catch(function(error){
})
npm run dev
在浏览器中查看运行结果。
更多推荐
已为社区贡献5条内容
所有评论(0)