Vue項目api加載json文件

概述

在vue項目開發過程當中，免不了的要進行api接口的調用，當後端接口未搭建完成時，能夠使用json文件模擬數據調用來搭建功能，同時有一些相關數據也是須要本地json文件支持，因而在這裏介紹本身實戰項目內嵌api接口調用本地數據json的方式

實現方法

第一步：將json放入項目目錄

第二步：接口聲明

在build/webpack.dev.conf.js文件裏添加以下代碼：

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，若是沒有的話

npm install --save axios vue-axios

（2）、在main.js裏引入

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

（3）、開始請求

this.$http.get('/api/address').then(response => {
      console.log(response)
 }, response => {
      console.log('數據加載失敗')
 })

參考文檔

• vue.js學習筆記(二)：如何加載本地json文件
• Vue加載json文件