vue2.5.2使用http请求获取静态json数据的实例代码

1.配置 build/webpack.dev.conf.js

rush: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

rush:js;"> { "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.在页面获取的方式

{ this.newsList = res.data },(err)=> { console.log(err); }) } }

总结

以上所述是小编给大家介绍的vue2.5.2使用http请求获取静态json数据的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

这篇文章我们将通过debug源码的方式来带你搞清楚defineAsync...
欧阳老老实实的更新自己的高质量vue源码文章,还被某2.6k st...
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了,这个...
组合式 (Composition) API 的一大特点是“非常灵活”,但也因...
相信你最近应该看到了不少介绍Vue Vine的文章,这篇文章我们...
前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文...