vue-cli3 本地數據模擬后台接口

vue-cli3 本地數據模擬后台接口

原理：

　　將本地的json數據在前端模擬為后台接口，然后調用接口，完成前端操作。在后台接通后可以直接在api配置文件中修改路徑，完成前后台對接。

配置：

　　1.文件目錄

　　　　

　　2. 安裝express

npm i express

　　3.配置vue.config.js

　　　　3.1配置express

const express = require('express')
const app = express()
let apiRoutes = express.Router()
app.use('/api', apiRoutes)　

　　　　3.2配置接口

before (app) {
      /* 基年數據列表接口 */
      app.get('/mock/backList', (req, res) => {
        res.json(require('./static/mock/backList.json'))
      })
      /* 業務圖層數據接口 */
      app.post('/mock/geoJson', (req, res) => {
        res.json(require('./static/mock/geoJson.json'))
      })
      /* 基年數據接口 */
      app.post('/mock/baseData', (req, res) => {
        res.json(require('./static/mock/baseData.json'))
      })
    }

　　　　代碼結構：

　　　　

 

　　4.從新啟動項目，即可訪問接口

　　　　

 

 　　5.之后就是正常的前端開發，在api中配置接口路徑，在頁面調用即可。

 

 

 

鑽研不易，轉載請注明出處.......

 

參考自：

https://blog.csdn.net/huijianpang/article/details/86308560