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 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
