這篇主要寫一下如何獲取json數(shù)據(jù)，我自己寫了個(gè)簡(jiǎn)單的json數(shù)據(jù)放在根目錄的data文件夾中瞧预。自己寫的要注意下格式屎债，比如最后一項(xiàng)不能有逗號(hào)仅政，鍵值對(duì)都要加雙引號(hào)等，可以去網(wǎng)上找下json格式校驗(yàn)工具校驗(yàn)一下是否正確扔茅。
- vue-resource獲取已旧，因?yàn)楣倬W(wǎng)已經(jīng)不再維護(hù)了。所以就不說(shuō)了召娜，跟axios用法差不多
- axios
下載运褪，引入，并配置下全局玖瘸，方便在各個(gè)組件中應(yīng)用秸讹，雖然不太推薦，但是很方便雅倒。
main.js中：
import axios from 'axios'
Vue.prototype.$axios = axios
good組件中璃诀，引入axios模塊。在鉤子函數(shù)created下獲取本地的json數(shù)據(jù)蔑匣。這樣是為了等待DOM完全渲染劣欢。
import axios from 'axios'
created() {
axios.get('data/good.json').then(res => {
this.menu = res.data.data.menu
this.food = res.data.data.food
})
}
- fetch
es6的fetch也可以使用，因?yàn)槟_手架已經(jīng)幫我們搭建好了本地的服務(wù)器裁良，所以在webpack.config.js中配置一個(gè)接口凿将，再用fetch請(qǐng)求這個(gè)接口。
const express = require('express')
const app = express()
var good = require('./data/good.json')
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true,
before(app) {
app.get('/api/good', (req, res) => res.json(good))
}
},
fetch('/api/good')
.then(res => res.json())
.then(res => {
this.menu = res.data.menu;
this.food = res.data.food
}
