express应用Mock多文件访问数据

json-server获取服务器数据只能用get方式，而express支持post方式获取数据，之前的为均是从单个文件中获取的数据，若接口非常多，都从单个文件中获取会导致文件过大，也不容易维护假数据，因此希望不同接口可以从不同文件中获取，使其结构更加清楚

express 一般项目中均安装，若未安装

npm install express --save

1.build文件夹webpack.dev.config.js添加设置

/*******mock数据 start**********/
//支持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')

//定义请求路径
//folder文件夹
//file 文件
//apiName 文件中对应接口字段 
expressRouter.route('/:folder/:file/:apiName')
  .all(function (req, res) {
    console.log("want to read more files")
    console.log(req.path)
    console.log(req.params.apiName)
    console.log(req.params.file)
    console.log(req.params.folder)
    var fileName = './mock/' + req.params.folder + "/" + req.params.file + '.json';
    console.log(fileName)
    fs.readFile(fileName, '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')
})
/*******mock数据 end**********/

2.设置远程访问代理：
一般在config文件夹，index.js文件的属性proxyTable中设置：

proxyTable: {//访问代理
      "/api": {
        target:"http://localhost:8082",
        changeOrigin:true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

3.创建模拟数据存储文件
创建文件夹mock用于存放所有模拟文件，该文件夹与package.json同级，直接在项目文件夹下

新建meet模块数据存储文件夹，新建文件meetlist.json，meetlist.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元"
      }
    ]
  }
}

4.获取数据
“/api/meet/meetlist/getNewsList" ，文件meetlist.json中的属性名getNewsList字段对应的内容所需内容数据

//后端请求的数据
  //express 可以虚拟前端的数据
  created: function () {
  //注意请求路径
    this.$http.post('/api/meet/meetlist/getNewsList')
    .then((res) => {//请求成功
      console.log(res)
      //this指向当前代码块而非执行环境
      this.newsList = res.data
    }, (err) => {//请求失败
      console.log(err)
    })
  },

5.如果想查看上述webpack.dev.config.js文件中的配置的输出内容：

    console.log("want to read more files")
    console.log(req.path)
    console.log(req.params.apiName)
    console.log(req.params.file)
    console.log(req.params.folder)

可以通过浏览器直接访问接口：
http://localhost:8082/meet/meetlist/meeting
浏览器输出：

终端输出：

实现了多文件访问数据