概述 在 vue 项目开发过程中,免不了的要进行 api 接口的调用,当后端接口未搭建完成时,可以使用 json 文件模拟数据调用来搭建功能,同时有一些相关数据也是需要

概述

在 vue 项目开发过程中,免不了的要进行 api 接口的调用,当后端接口未搭建完成时,可以使用 json 文件模拟数据调用来搭建功能,同时有一些相关数据也是需要本地 json 文件支持,于是在这里介绍自己实战项目内嵌 api 接口调用本地数据 json 的方式

实现方法

第一步:将 json 放入项目目录

第二步:接口声明

在 build/webpack.dev.conf.js 文件里添加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const express = require('express')
const app = express()
var appData = require('../address.json')
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

// 在devServer对象里添加如下代码:

before(app) {
app.get('/api/address', (req, res) => {
res.json({
errno: 0,
data: appData
})
})
}

第三步:接口调用

测试

这时候在浏览器输入 http://localhost:8080/api/address 便可看到 json 文件的数据了。

axio 调用

在组件里可以用 axios 或者其它方式请求获取数据,请求 URL 为:’/api/address’,例如用 axios 的话:

(1)、下载 axios,如果没有的话

1
npm install --save axios vue-axios

(2)、在 main.js 里引入

1
2
import axios from 'axios'
Vue.prototype.$http = axios

(3)、开始请求

1
2
3
4
5
this.$http.get('/api/address').then(response => {
console.log(response)
}, response => {
console.log('数据加载失败')
})

参考文档