vue配置請(qǐng)求本地json數(shù)據(jù)的方法
本篇文章主要介紹了vue配置請(qǐng)求本地json數(shù)據(jù)的方法,分享給大家,具體如下:
在build文件夾下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加
const express = require('express')
const app = express()
const appData = require('../data.json') // 加載本地json文件
const seller = appData.seller // 獲取對(duì)應(yīng)本地?cái)?shù)據(jù)
const goods = appData.goods
const ratings = appData.ratings
const apiRoutes = express.Router()
app.use('/api',apiRoutes)
然后找到devServer,插入以下代碼:
//然后找到devSeerver,在里面添加
before (app) {
app.get('/api/seller',(reg,res) => {
res.json({
errno: 0,
data: seller
}) // 接口返回json數(shù)據(jù),上面配置的數(shù)據(jù)seller就復(fù)制給data請(qǐng)求后調(diào)用
}),
app.get('/api/goods',(reg,res) => {
res.json({
errno: 0,
data: goods
}) // 接口返回json數(shù)據(jù),上面配置的數(shù)據(jù)goods就復(fù)制給data請(qǐng)求后調(diào)用
}),
app.get('/api/ratings',(reg,res) => {
res.json({
errno: 0,
data: ratings
}) // 接口返回json數(shù)據(jù),上面配置的數(shù)據(jù)ratings就復(fù)制給data請(qǐng)求后調(diào)用
})
}
請(qǐng)求訪問(wèn)
<script>
import header from './components/header/header.vue'
const ERR_OK = 0
export default {
data () {
return {
seller: {}
}
},
created () {
this.$http.get('/api/seller').then((response) => {
response = response.body; // 獲取到數(shù)據(jù)
if (response.errno === ERR_OK) {
this.seller = response.data;
console.log(this.seller);
}
})
},
components: {
'v-header': header
}
}
</script>
最后重新啟動(dòng)項(xiàng)目即可訪問(wèn)npm run dev
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-music關(guān)于Player播放器組件詳解
這篇文章主要為大家詳細(xì)介紹了vue-music關(guān)于Player播放器組件的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11
vue與原生app的對(duì)接交互的方法(混合開(kāi)發(fā))
vue開(kāi)發(fā)h5項(xiàng)目特別是移動(dòng)端的項(xiàng)目,很多都是打包后掛載在原生APP上的,這篇文章主要介紹了vue與原生app的對(duì)接交互的方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-11-11
Vue在echarts?tooltip中添加點(diǎn)擊事件案例詳解
本文主要介紹了Vue項(xiàng)目中在echarts?tooltip添加點(diǎn)擊事件的案例詳解,代碼具有一定的價(jià)值,感興趣的小伙伴可以來(lái)學(xué)習(xí)一下2021-11-11
Vue實(shí)現(xiàn)數(shù)據(jù)表格合并列rowspan效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)數(shù)據(jù)表格合并列rowspan效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
vue項(xiàng)目出現(xiàn)頁(yè)面空白的解決方案
今天小編就為大家分享一篇vue項(xiàng)目出現(xiàn)頁(yè)面空白的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級(jí)版,提供了更多的表單控件和功能,同時(shí)還改進(jìn)了一些細(xì)節(jié)和樣式,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-04-04

