關于vue專案介面失效，簡單的解決辦法-自己搭建本地JSON資料
寫在前面，系本人學識淺薄，懂得不多，寫博客目的是能幫助小白解決問題就OK，如有操作不當，望見諒，
當我們在使用 vue 做些比如電影，商城類專案的時候，經常遇到介面地址失效，無法訪問的問題，就會阻礙我們做專案的行程，
我這里給小白，也算溫習下，利用簡單有效的辦法，自己搭建一個請求介面，
首先我以電影影院介面為例，json 資料如下：
(很好用的插件：JSON-handle)
此時介面失效了，該怎么做呢？
首先，我們將需要的 json 資料復制，在專案根目錄下新建一個 coming.json 檔案，粘貼進去保存（若沒有去網上搜個修改下也可以），
需求代碼請求的介面地址如下：
之后在根目錄下新建一個 vue.config.js 檔案用來寫相關配置（至于為什么不是 build : 新版本沒有 build 檔案夾，相關請自行查閱），
話不多說直接代碼走起來：
先下載并引入需要的模塊
const express = require('express')
const app = express()`
var apiRoutes = express.Router() /* 定義express.Router() 物件 */
app.use('/api', apiRoutes) /* 定義介面在/api 地址下 */
var appComing = require('./coming.json') //引入 json 資料并賦值
var comingList = appComing.coming /* coming.json檔案檔案下的 coming 資料賦值給變數 comingList */
apiRoutes.get('/coming', function(req, res) { /* 定義介面并回傳資料 */
res.json({
data: comingList //上面被賦值的資料名
})
})
//vue devServer 配置
module.exports = {
devServer: {
proxy: { //代理
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
},
app.get('/api/coming', (req, res) => {
res.json({
code: 200,
data: comingList //和上面的 data 一致
})
});
}
}
}
還需要下載 vue-resource
(vue 實作異步加載需要用到 vue-resource ，是vue中使用的請求網路資料依賴于vue的插件，用來調介面)
運行
npm install --save vue-resource
安裝 vue-resource
在 main.js 匯入并使用 ：
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.config.productionTip = false //消除控制臺訊息
好了，啟動專案，瀏覽器搜索
http://127.0.0.1:8080/api/coming
即可查看要請求的介面資料，
這樣就配置好相關介面請求設定，以上配置項所涉及知識以及是否可行，且能滿足簡單需求，請讀者手動搜索和嘗試，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/163518.html
標籤：python
上一篇：上海交通大學谷國迎老師課題組的一種 “ 軟體仿人手（an anthropomorphic hand）” 設計_01
下一篇：一些基礎數論的知識和證明