关于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
即可查看要请求的接口数据。
这样就配置好相关接口请求设置,以上配置项所涉及知识以及是否可行,且能满足简单需求,请读者手动搜索和尝试。