这篇文章主要介绍了vue2.5.2使用http请求获取静态json数据的实例代码,需要的朋友可以参考下

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 :' + (8081) + '\n') })

2.新建 db.json

{ "getNewsList": [ { "id": 1, "title": "新闻条目1新闻条目1新闻条目1新闻条目1", "url": "" }, { "id": 2, "title": "新闻条目2新闻条目2新闻条目2新闻条目2", "url": "" }, { "id": 3, "title": "新闻条3新闻条3新闻条3", "url": "" }, { "id": 4, "title": "新闻条4广告发布", "url": "" } ], "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); }) } }

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在vue.js中利用select下拉框实现绑定和取值方法

在vue中如何解决v-for使用报红并出现警告的问题(详细教程)

在Vuejs中如何实现搜索匹配功能方法(详细教程)