Vue高仿饿了么项目（2）—mock数据

mock数据即模拟后台收据，此项目提供了一个data.json的文件，包括用于展示所需要的数据信息，模拟了一个数据源，对于真实的实际生产情况就是一个数据库，此节要解决编写一些接口，实现与这些数据的交互。

---

数据的获取

在build文件夹中打开dev-sever.js，发现app是用express编写router接口请求，首先要从data.json中读取数据

var app = express()
var appData = require('../data.json') //获取数据
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings

接下来要编写一些路由

var apiRoutes = express.Router()
apiRoutes.get('/seller',function (req, res) { //function为回调函数
    res.json({
        errno: 0 //通过errno字段来标识数据是正常的.
        data: seller //返回的seller具体的数据
    })
})

apiRoutes.get('/goods',function (req, res) { 
    res.json({
        errno: 0 
        data: goods
    })
})

apiRoutes.get('/ratings',function (req, res) { 
    res.json({
        errno: 0 
        data: ratings
    })
})

接下来就是要在express使用这些编写好的路由。express对应的就是app对象，利用app.use方法，它有两个参数，第一个参数为path，第二个参数为路由对象

app.use('/api', apiRoutes)

这样就可以通过访问localhost:8080/api/seller访问到数据，可以下载jsonview插件，可以使得json数据格式更容易观察。

版本更新

问题来了，原版配置是在build文件夹下中的dev-sever.js文件中配置，但是新版的vue-webpack-template已经删除了dev-sever.js，改用webpack.dev.conf.js代替了，首先webpack.dev.conf.js变动如下

const appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings

devServer: {
    before(app) {
      app.get('/api/seller', function(req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      });
      app.get('/api/goods', function(req, res) {
        res.json({
          errno: 0,
          data: goods
        })
      });
      app.get('/api/ratings', function(req, res) {
        res.json({
          errno: 0,
          data: ratings
        })
      });
    }

接下来重新npm run dev运行，启动后再次输入之前的地址，如果数据正常显示，则数据能正常返回。

相关知识

1. express相关语法
2. app.use和app.get的区别及解析