express应用Mock数据

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)
    })
  },