vue配置請求本地json數(shù)據(jù)的方法
更新時間:2018年04月11日 15:31:03 作者:懶惰的小白
這篇文章主要介紹了vue配置請求本地json數(shù)據(jù)的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了vue配置請求本地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 // 獲取對應本地數(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就復制給data請求后調(diào)用
}),
app.get('/api/goods',(reg,res) => {
res.json({
errno: 0,
data: goods
}) // 接口返回json數(shù)據(jù),上面配置的數(shù)據(jù)goods就復制給data請求后調(diào)用
}),
app.get('/api/ratings',(reg,res) => {
res.json({
errno: 0,
data: ratings
}) // 接口返回json數(shù)據(jù),上面配置的數(shù)據(jù)ratings就復制給data請求后調(diào)用
})
}
請求訪問
<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>
最后重新啟動項目即可訪問npm run dev
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue在echarts?tooltip中添加點擊事件案例詳解
本文主要介紹了Vue項目中在echarts?tooltip添加點擊事件的案例詳解,代碼具有一定的價值,感興趣的小伙伴可以來學習一下2021-11-11
Vue實現(xiàn)數(shù)據(jù)表格合并列rowspan效果
這篇文章主要為大家詳細介紹了Vue實現(xiàn)數(shù)據(jù)表格合并列rowspan效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07
Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級版,提供了更多的表單控件和功能,同時還改進了一些細節(jié)和樣式,本文結合示例代碼給大家詳細講解,需要的朋友可以參考下2023-04-04

