vue實踐---vue配合express實現請求數據mock

mock數據是前端比較常見的技術，這里介紹下vue配合express 實現請求數據mock。

第一步:

安裝 express :  npm install express -D

第二步：

簡歷需要mock的數據，在src下新建mock文件夾，文件里面新建兩個文件data1.json和data2.json，如下：

data1.json內容如下:

{
    "name": "yanyalong",
    "title": "測試",
    "data": [
        {
            "field_code": "111", "code": "initiatorDept", "errcode": 0, "errmsg": "ok","mextendData": null, "formId": "processVariable", "formName": "流程字段11", "id": "initiatorDept", "name": "stringsasassa", "system": true,
            "type" : { "errcode" : 0,"errmsg" : "ok","id" : null, "code" : null,"name" : "string" },
            "relationListType": ["equals","containsIgnoreCase"]
        }, 
        {
            "field_code": "22", "code": "initiatorDept", "errcode": 0, "errmsg": "ok","mextendData": null, "formId": "processVariable", "formName": "流程字段11", "id": "asdada", "name": "發起人部門", "system": true,
            "type" : { "errcode" : 0,"errmsg" : "ok","id" : null, "code" : null,"name" : "reference" },
            "relationListType": ["contains","stringNotContains"]
        }, 
        {
            "field_code" : "33", "errcode" : 0, "errmsg" : "ok","id" : "initiatorUserGroup", "code" : "initiatorUserGroup", "name" : "發起人所屬用戶組","system" : true,
            "type" : {"errcode" : 0,"errmsg" : "ok",  "id" : null, "code" : null, "name" : "string"  }, "formId" : "processVariable","formName" : "流程字段","extendData" : null,
            "relationListType": ["notEquals","containsIgnoreCase", "notContainsIgnoreCase"]
        }
    ]    
}

data2.json內容如下：

{
    "value": "hello 你好"
}

第三步：

修改 webpack.dev.conf.js 的配置，在devServer里新增如下代碼，這樣在請求/api1 這個url路徑的時候就會返回data1.json， /api2返回data2.json 

before (app) {
      const express = require('express')
      const App = express()
      // 加載本地數據文件
      var appData1 = require('./../src/mock/data1.json')
      var appData2 = require('./../src/mock/data2.json')
      var apiRoutes = express.Router()
      App.use('/api1', apiRoutes)
      App.use('/api2', apiRoutes)
  
      app.get('/api1', (req, res) => {
        res.json(appData1)
      })
      app.get('/api2', (req, res) => {
        res.json(appData2)
      })
    }

 第四步：

使用方法如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import axios from 'axios'
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted () {
    axios.get('/api1').then((res) => {
      console.log(res)
    })
    axios.get('/api2').then((res) => {
      console.log(res)
    })
  }
}
</script>

具體的代碼可以看這里：https://github.com/YalongYan/vue-practice/tree/master/express-axios-mock

補充說明：

現在的vue-cli項目沒有了webpack.dev.conf.js文件了，不過有webpack.config.js， 原理是一樣的，在webpack.config.js里面找到devServer， 把 before (app) 這段代碼放進去效果是一樣的。

我這里做了判斷，只有開發環境的時候 才啟用mock請求數據，生產環境的時候就不需要了，代碼如下（這段代碼是在webpack.dev.conf.js最后面）：

if (process.env.NODE_ENV === 'production') {
  // 生產環境的代碼
} else {
  // express 實現 mock數據
  module.exports.devServer.before = (app)=> {
    const express = require('express')
    const App = express()
    // 加載本地數據文件
    var appData = require('./src/mock/data1.json')
    var apiRoutes = express.Router()
    App.use('/api', apiRoutes)

    app.get('/api', (req, res) => {
      res.json(appData)
    })
  }
}

 

vue實踐系列請看這里： https://github.com/YalongYan/vue-practice