循序漸進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設定為深色背景顏色變體，

布局

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

注意事項:

• 固定位置使用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 =https://www.cnblogs.com/wuhuacong/p/> {
        // 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 =https://www.cnblogs.com/wuhuacong/p/> {
    console.log(data)
     this.navBarList = data.result
  })

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

其他動態資料展示效果如下所示，

標籤：JavaScript

上一篇：Cesium 拾取 API 完全總結

下一篇：Cesium 拾取 API 完全總結