走進Vue的秘密森林 03：後台Dashboard製作

發表於 | 更新於 | In | 0 comments |
文章字數 : 684 | 所需閱讀時間 ≈ 3 分鐘

在後台登入驗證頁面製作完成後，接著要來製作Dashboard的畫面
Dashboard的畫面會直接套用Bootstrap的版型

套用Bootstrap版型製作Dashboard

1.套用Bootstrap中的example

https://getbootstrap.com/docs/4.4/examples/dashboard/

這裡會將Dashboard的css獨立另存並引入all.scss檔案

1
@import "./_dashboard";

2.將Dashboard引入至檔案及增加routers

將建立好的Dashboard頁面引入，以及增加routers至index.js中

1
import Dashboard from '@/components/Dashboard';
1
2
3
4
5
6
7
//routes:
{
    name: 'Dashboard',
    path: '/admin',
    component: Dashboard,
    meta: { requiresAuth: true },  //進入此頁面時，需要被驗證
}

3.拆分出新的vue檔案

這邊會把navbar和sidebar另拆出新的vue檔，原因是待會要做修改更動的只有內頁的部分，navbar和sidebar會是固定的。

:::info
vue新檔案基本配備為：

1
2
3
4
<template>
  <div>
  </div>
</template>

:::

4.引入 navbar & sidebar

回到Dashboard.vue中將navbar和sidebar檔案載入此頁面

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
// 將要置入此頁面的元件import近來，方式與載入至index.js相同
import Sidebar from './Sidebar';
import Navbar from './Navbar';

export default {
  components: {
    Sidebar,
    Navbar,
  },
};

</script>

並將路徑放置上方html中

1
2
<Navbar/>  <!-- 寫法1，Navbar路徑 -->
<Sidebar></Sidebar>  <!-- 寫法2，Sidebar路徑 -->

結果如下：

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div>
    <Navbar/>  <!-- Navbar路徑 -->
    <div class="container-fluid">
      <div class="row">
        <Sidebar></Sidebar>  <!-- Sidebar路徑 -->
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
        </main>
      </div>
    </div>
  </div>
</template>

製作商品頁面(主要內容頁)

新建一個Products.vue檔並將其放至pages資料夾中，並加入基本配備
至Dashboard.vue中將 <router-view></router-view>加入至內頁
結果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div>
    <Navbar/>  <!-- Navbar路徑 -->
    <div class="container-fluid">
      <div class="row">
        <Sidebar></Sidebar>  <!-- Sidebar路徑 -->
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
        <router-view></router-view>  
        <!-- 此為Products路徑，為主要內容頁，且目前router-view為巢狀 -->
        </main>
      </div>
    </div>
  </div>
</template>

※ 目前與app.vue為巢狀結構

再到index.js頁面加入rotues路徑及載入分頁元件

import Products from '@/components/pages/products';

此處products需使用children方式加在dashboard之下，方式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    name: 'Dashboard',
    path: '/admin',
    component: Dashboard,
    children: [
        {
            name: 'Products',
            path: 'products',
            component: Products,
            meta: { requiresAuth: true },  // 移至此處為確保進入此頁面時，需被驗證
        }
    ],
},

這樣Dashboard的初步製作就完成啦！
接著要製作的是產品列表，在產品列表中，會放入未來前台要上架的商品列表，意味著可以使用這個功能將商品做上/下架的功能。