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 // 獲取對應(yīng)本地數(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請求后調(diào)用 }), app.get('/api/goods',(reg,res) => { res.json({ errno: 0, data: goods }) // 接口返回json數(shù)據(jù),上面配置的數(shù)據(jù)goods就復(fù)制給data請求后調(diào)用 }), app.get('/api/ratings',(reg,res) => { res.json({ errno: 0, data: ratings }) // 接口返回json數(shù)據(jù),上面配置的數(shù)據(jù)ratings就復(fù)制給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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-music關(guān)于Player播放器組件詳解
這篇文章主要為大家詳細介紹了vue-music關(guān)于Player播放器組件的相關(guān)資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11Vue在echarts?tooltip中添加點擊事件案例詳解
本文主要介紹了Vue項目中在echarts?tooltip添加點擊事件的案例詳解,代碼具有一定的價值,感興趣的小伙伴可以來學(xué)習(xí)一下2021-11-11Vue實現(xiàn)數(shù)據(jù)表格合并列rowspan效果
這篇文章主要為大家詳細介紹了Vue實現(xiàn)數(shù)據(jù)表格合并列rowspan效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級版,提供了更多的表單控件和功能,同時還改進了一些細節(jié)和樣式,本文結(jié)合示例代碼給大家詳細講解,需要的朋友可以參考下2023-04-04