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数据的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！