循序漸進BootstrapVue，開發公司門戶網站（5）--- 使用實際數據接口代替本地Mock數據

在我們開發一些門戶網站功能的時候，有時候我們需要快速的創建數據模型來進行數據展示，因為數據結構可能處於不斷的修正變化之中，因此服務端的接口我們可以暫時不開發，當我們基本完成數據結構和界面展示的時候，就可以正式開發並接入后端接口了，本篇隨筆介紹在使用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類地址即可，平緩過度到實際接口，非常方便。

其他動態數據展示效果如下所示。

 

 

 

系列文章如下所示：

循序漸進BootstrapVue，開發公司門戶網站（1）---基於Bootstrap網站模板構建組件界面

循序漸進BootstrapVue，開發公司門戶網站（2）--- 使用wow.js動畫組件以及自定義的CSS樣式處理動態效果

循序漸進BootstrapVue，開發公司門戶網站（3）--- 結合郵件發送，收集用戶反饋信息

循序漸進BootstrapVue，開發公司門戶網站（4）--- 使用b-carousel-slide組件實現圖片輪播以及vue-awesome-swiper實現圖片滑動展示

循序漸進BootstrapVue，開發公司門戶網站（5）--- 使用實際數據接口代替本地Mock數據

循序漸進BootstrapVue，開發公司門戶網站（6）--- 門戶網站后端內容管理