在vue.config.js中模擬後端接口數據

 

如今都流行先後端分離，前端幹前端的事，後端幹後端的事。

可是咱們在前端的實際開發時，有時候是須要數據輔助的，可是可能後端的接口還沒寫好，或者和後端在開發前期溝通太耗時耗力。咱們前端就須要本身模擬一下後端的數據。

首先我在使用VueCli搭建的項目根目錄下新建一個vue.config.js的文件。可能以前的腳手架版本還有這個文件，可是VueCli3以後的都沒有，因此要本身新建一下。

新建以後寫下以下代碼：

module.exports = {
  devServer: {
    before: (app, serve) => {
      app.get("/api/testReq", (req, res) => {
        res.json({
          title: "後端數據",
          body: "vue.config.js模擬的",
        });
      });
    },
  },
};

這是nodejs的express風格的接口格式。

在module.exports暴露的對象中，寫上devServer屬性。

devServer中存在一個鉤子函數before，咱們在它裏面寫接口內容。

before函數存在兩個參數，app和serve，咱們主要使用app這個參數。

模擬一下get請求，請求內容書寫的方式和express一摸同樣。第一個參數是請求地址，第二個參數是一個回調函數。

咱們以json格式返回一個title和一個body數據。

這就是一個最簡單的模擬後端接口數據的代碼。

下面很重要的一步是，必定要重啓一下項目，否則是沒用的。

ctrl+c 輸入y，npm run serve

而後咱們其實就能夠試着在瀏覽器中請求一下這個接口了。

由於我接口地址寫的**/api/testReq**，而且開放的端口是8080，因此我在瀏覽器中輸入的url地址是http://localhost:8080/api/testReq

而後就能夠看到咱們json格式的後端數據了。

而後咱們就能夠像正常請求後端接口同樣在前端項目中進行請求了。
首先你要安裝axios。

npm instal axios --save

而後在main.js裏，全局引入一下axios。

import axios from 'axios'

爲了咱們使用方便，直接在下面再寫一句

Vue.prototype.$http = axios;

把axios掛載在vue實例上，這樣咱們就能夠直接用this.$http使用axios了。

接下來的話，我爲了演示，就直接在App.vue的created鉤子中簡單請求一下。

async created () {
    const data = await this.$http.get('/api/testReq');
    console.log(data);
  }

而後運行項目，打開控制檯，就能夠看到請求到的後端數據對象了。

以上就是關於前端模擬後端接口數據，而且進行請求的所有內容。