vue2.5.2使用http请求获取静态json数据的实例代码
1.配置build/webpack.dev.conf.js
//获取静态json数据 constexpress=require('express') constapp=express() constapiServer=express() constbodyParser=require('body-parser') apiServer.use(bodyParser.urlencoded({extended:true})) apiServer.use(bodyParser.json()) constapiRouter=express.Router() constfs=require('fs') apiRouter.route('/:apiName') .all(function(req,res){ fs.readFile('./db.json','utf8',function(err,data){ if(err)throwerr vardata=JSON.parse(data) if(data[req.params.apiName]){ res.json(data[req.params.apiName]) } else{ res.send('nosuchapiname') } }) }) apiServer.use('/api',apiRouter); apiServer.listen(8081,function(err){ if(err){ console.log(err) return } console.log('Listeningathttp://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.在页面中获取的方式
exportdefault{ data(){ newsList:[] }, created:function(){ this.$http.get('api/getNewsList').then((res)=>{ this.newsList=res.data },(err)=>{ console.log(err); }) } }
总结
以上所述是小编给大家介绍的vue2.5.2使用http请求获取静态json数据的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!