在我們開發一些入口網站功能的時候，有時候我們需要快速的建立資料模型來進行資料展示，因為資料結構可能處於不斷的修正變化之中，因此服務端的介面我們可以暫時不開發，當我們基本完成資料結構和介面展示的時候，就可以正式開發並接入後端介面了，本篇隨筆介紹在使用BootstrapVue開發公司入口網站的時候，使用實際資料介面代替本地Mock資料的解決思路。

1、使用Mock資料介面

在我之前一些《Vue&Element》的隨筆介紹過Vue 中API模組、Mock模組、Store模組、Proxy代理之間的關係如下

這個對於我們目前的 BootstrapVue 專案來說，也是通用的關係，我們在早期資料變化的時候，為了快速開發介面效果，可以通過Mock模擬一些資料介面，並通過API模組和代理介面的方式構建訪問介面，然後在完成的時候，簡單的替換就可以切換到實際的後端介面中了。

引入了前後端分離的Vue 專案作為前端技術路線，那麼前後端的邊界則非常清晰，前端可以在通過網路獲取對應的JSON就可以構建前端的應用了。

我們以BootstrapVue導航欄元件的使用為例介紹，闡明使用Mock資料的處理方式和實際呼叫後端Api的兩種方式

導航欄(Navbar)

元件<b-navbar>是一個包裝器， 它將品牌、導航和其他元素定位到一個簡潔的標題中。它很容易擴充套件，而且由於<b-collapse>元件，它可以很容易地整合響應行為。

顏色配置

<b-navbar>支援標準引導v4可用的背景色變數。 將variant屬性設定為以下值之一以更改背景顏色： primary, success, info, warning, danger, dark,或 light。

控制文字顏色，方法是將type 屬性設定為light以用於淺色背景顏色變體， 或將dark設定為深色背景顏色變體。

佈局

通過設定兩個屬性之一來控制導航欄的位置：

屬性 型別 預設值 描述
fixed String null 設定為top表示固定到視口的頂部，或設定為bottom表示固定到視口的 底部。
sticky Boolean false 設定為true可使導航欄在滾動時粘在視口（或具有position: relative的父容器）的頂部。

注意事項:

  • 固定位置使用CSS position: fixed。您可能需要調整文件的頂部/底部填充或邊距。
  • CSS位置：不是每個瀏覽器都完全支援sticky（用於 sticky）。 對於不支援position: sticky的瀏覽器， 它將以本機方式回退到position: relative。

支援的內容

導航條帶有對少數子元件的內建支援。根據需要從以下選項中選擇：

  • <b-navbar-brand> 表示您的公司、產品或專案名稱。
  • <b-navbar-toggle>用於<b-collapse is-nav>元件.
  • <b-collapse is-nav> 用於按父斷點分組和隱藏導航欄內容。
  • <b-navbar-nav> 用於全高和輕量級導航（包括支援下拉選單）。 支援<b-navbar-nav> 中的以下子元件：:
    • <b-nav-item>對於連結（和路由器連結）操作項
    • <b-nav-item-dropdown> 導航下拉選單
    • <b-nav-text> 用於新增垂直居中的文字字串。
    • <b-nav-form>用於任何窗體控制元件和操作。

使用程式碼如例項程式碼所示

<div>

  <!-- Image and text -->

  <b-navbar variant="faded" type="light">

    <b-navbar-brand href="#">

      <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">

      BootstrapVue

    </b-navbar-brand>

  </b-navbar>

</div>

詳細的細節我們不一一介紹，需要了解這個元件及其他相關元件的使用，可以參考連結：https://code.z01.com/bootstrap-vue/docs/components/navbar.html

例如我們在專案中準備導航欄的資料如下所示。

// 導航選單

export const navbarlist = [{

    name: '網站首頁',

    link: '/',

    children: []

  },

  {

    name: '產品解決方案',

    link: '/product',

    children: [ ]

  },

  {

    name: '行業解決方案',

    link: '/business',

    children: []

  },

  {

    name: '技術與支援',

    link: '/technology',

    children: [{

        name: '業務培訓範圍',

        link: '/technology',

        children: []

      },

      {

        name: '服務體系',

        link: '/technology',

        children: []

      },

      {

        name: '線上反饋',

        link: '/technology',

        children: []

      }

    ]

  },

  {

    name: '公司新聞',

    link: '/news',

    children: []

  },

  {

    name: '關於我們',

    link: '/about',

    children: [ ]

  }

]

並公佈一個Mock的地址攔截

然後在Api模組類中定義一個指向Mock資料集合的Api介面行，如下所示。

  listNavibar(params) {

    return request({

      url: '/api/portal/listnavibar',

      method: 'get',

      params

    })

  }

當然api的轉義處理，這裡需要使用的是Mock的代理介面，才能訪問到Mock的資料類。

因此在vue.config.js裡面定義好api的代理跳轉，如下所示。

資料準備好了，就再次回到元件<b-navbar>中的介面使用上來，我們定義展示的Layout的頭部導航欄，如下程式碼所示

    <b-navbar toggleable="lg" type="dark" variant="dark" class="active2" :class="{active: showNavbarBg}">

      <div class="container">

        <!-- logo -->

        <b-navbar-brand to="/">

          <img :src="site.icon" class="mr-2" alt="logo" style="height:40px;width:auto">

          {{ site.title }}

        </b-navbar-brand>

        <!-- 切換按鈕 -->

        <b-navbar-toggle target="nav-collapse" :class="{active: showCollaps}" />

        <!-- 實際導航連線 -->

        <b-collapse id="nav-collapse" v-model="showCollaps" is-nav>

          <b-navbar-nav class="ml-auto">

            <div v-for="(item, index) of navBarList" :Key="index">

              <b-nav-item v-if="item.children.length <= 0" :to="item.link" :active="$route.path === item.link">

                {{ item.name }}

              </b-nav-item>

              <template v-else>

                <b-nav-item-dropdown right @show="handleShowDrop">

                  <template v-slot:button-content>

                    <span :class="{active: $route.path.includes(item.link)}" @click="handleNavbarClick(item, '', $event)">{{ item.name }}</span>

                  </template>

                  <!-- 子選單 -->

                  <b-dropdown-item v-for="(ite, ind) of item.children" :key="ind" @click="handleNavbarClick(ite, ind, $event)">{{ ite.name }}

                  </b-dropdown-item>

                </b-nav-item-dropdown>

              </template>

            </div>

          </b-navbar-nav>

        </b-collapse>

      </div>

    </b-navbar>

如果我們需要在JS模組中訪問Mock資料，那麼匯入對應的MockApi類處理即可，如下所示。

import portal from '@/api/test/portal'

然後在函式中呼叫獲取資料放到data變數navBarList 中即可。

      var param = {}

      // 選單資訊

      portal.listNavibar(param).then(data => {

        // console.log(data)

        this.navBarList = data.result

      })

導航就可以根據Mock資料資訊，正常顯示出來導航連線效果了。

2、開發入口網站後端介面

對於入口網站，根據需要我們設計了後端儲存的資料表，如下所示

按照後端ABP框架或者Web API所需的框架類，使用程式碼生成工具生成程式碼後，整合在專案中，常規的增刪改查、分頁管理等基礎介面就可以直接使用了。

後端API介面通過Swagger檢視對應公開介面，如下所示。

由於入口網站不需要使用者登入，或者授權資訊，那麼可以公開部分介面作為匿名訪問，如訪問選單集合的資訊作為匿名介面訪問，如下所示。

再次定義一個API類，這個是直接訪問後端介面獲取資料的，如下所示

這樣我們如果需要使用實際介面獲取資料的話，匯入對應的API類即可，如下所示。

import portal2 from '@/api/system/portal'

然後呼叫API類獲取資料如下所示，整個過程和Mock呼叫方法類似，不同的是一些小細節。

  portal2.listNavibar(param).then(data => {

    console.log(data)

     this.navBarList = data.result

  })

這樣直接就切換到後端資料介面了，這樣對於我們前期開發的Mock方式，修改只需要改動一下匯入的Api類地址即可，平緩過度到實際介面，非常方便。