在vue项目开发过程当中,免不了的要进行api接口的调用,当后端接口未搭建完成时,能够使用json文件模拟数据调用来搭建功能,同时有一些相关数据也是须要本地json文件支持,因而在这里介绍本身实战项目内嵌api接口调用本地数据json的方式vue
实现方法在build/webpack.dev.conf.js文件里添加以下代码:webpack
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文件的数据了。
ios
在组件里能够用axios或者其它方式请求获取数据,请求URL为:'/api/address',例如用axios的话:web
(1)、下载axios,若是没有的话express
npm install --save axios vue-axios
(2)、在main.js里引入npm
import axios from 'axios' Vue.prototype.$http = axios
(3)、开始请求json
this.$http.get('/api/address').then(response => { console.log(response) }, response => { console.log('数据加载失败') })