json-server获取服务器数据只能用get方式,而express支持post方式获取数据
express 一般项目中均安装,若未安装
npm install express --save
build文件夹webpack.dev.config.js添加设置
//支持post mock数据
var express = require('express');
//启动expressServer
var expressServer = express()
//返回json数据
var bodyParser = require('body-parser')
expressServer.use(bodyParser.urlencoded({ extended: true }))
expressServer.use(bodyParser.json())
var expressRouter = express.Router()
var fs = require('fs')
expressRouter.route('/:apiName')
.all(function (req, res) {
//db.json数据存储文件,也即假数据存储位置
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')
}
})
})
//expressServer.use(relative,expressRouter);
//relative可以设置请求前添加的路径
expressServer.use(expressRouter);
expressServer.listen((PORT|| config.dev.port) + 2, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:' + ((PORT|| config.dev.port) + 2) + '\n')
})
设置远程访问代理:
一般在文件config/index.js中
proxyTable: {//访问代理
"/api": {
target:"http://localhost:8082",
changeOrigin:true,
pathRewrite: {
'^/api': ''
}
}
},
创建数据存储文件
创建文件db.json,该文件与package.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元"
}
]
}
}
获取数据
“/api/”+文件db.json中的属性名直接作为访问路径访问即可请求到数据
//后端请求的数据
//express 可以虚拟前端的数据
created: function () {
//注意请求路径
this.$http.post('/api/getNewsList')
.then((res) => {//请求成功
console.log(res)
//this指向当前代码块而非执行环境
this.newsList = res.data
}, (err) => {//请求失败
console.log(err)
})
},