1.配置 build/webpack.dev.conf.js
// 獲取靜態json數據const express = require('express')const app = express()const apiServer = express()const bodyParser = require('body-parser')apiServer.use(bodyParser.urlencoded({ extended: true }))apiServer.use(bodyParser.json())const apiRouter = express.Router()const fs = require('fs')apiRouter.route('/:apiName') .all(function (req, res) { fs.readFile('./db.json', 'utf8', function (err, data) { if (err) throw err var data = JSON.parse(data) if (data[req.params.apiName]) { res.json(data[req.params.apiName]) } else { res.send('no such api name') } }) })apiServer.use('/api', apiRouter);apiServer.listen(8081, function (err) { if (err) { console.log(err) return } console.log('Listening at http://localhost:' + (8081) + '/n')})
2.新建 db.json
{ "getNewsList": [ { "id": 1, "title": "新聞條目1新聞條目1新聞條目1新聞條目1", "url": "http://starcraft.com" }, { "id": 2, "title": "新聞條目2新聞條目2新聞條目2新聞條目2", "url": "http://warcraft.com" }, { "id": 3, "title": "新聞條3新聞條3新聞條3", "url": "http://overwatch.com" }, { "id": 4, "title": "新聞條4廣告發布", "url": "http://hearstone.com" } ], "login": { "username": "yudongdong", "userId": 123123 }, "getPrice": { "amount": 678 }, "createOrder": { "orderId": "6djk979" }, "getOrderList": { "list": [ { "orderId": "ddj123", "product": "數據統計", "version": "高級版", "period": "1年", "buyNum": 2, "date": "2016-10-10", "amount": "500元" }, { "orderId": "yuj583", "product": "流量分析", "version": "戶外版", "period": "3個月", "buyNum": 1, "date": "2016-5-2", "amount": "2200元" }, { "orderId": "pmd201", "product": "廣告發布", "version": "商鋪版", "period": "3年", "buyNum": 12, "date": "2016-8-3", "amount": "7890元" } ] }}
3.通過 localhost:8081/api/getNewsList 訪問
4.在頁面中獲取的方式
export default { data() { newsList: [] }, created: function(){ this.$http.get('api/getNewsList').then((res)=> { this.newsList = res.data },(err)=> { console.log(err); }) } }
總結
以上所述是小編給大家介紹的vue2.5.2使用http請求獲取靜態json數據的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
|
新聞熱點
疑難解答