六角學院 – wordpress_blog

Vue3 複習10

gee.hsu — Tue, 06 Aug 2024 06:24:43 +0000

從頭開始 – Pinia 製作一個購物車 2023 新增章節

Pinia 相關資源

Pinia 官方文件
陣列方法補充
課程 Pinia CDN 範例

// 課程 Pinia CDN 範例

01. pinia 簡介

元件資料獨立與傳遞

頁面元件結構

Pinia 好處

跨元件的狀態、方法管理
易於學習，許多觀念與 Vue.js 連貫
相對於其他狀態管理工具更容易上手

02. 專案簡介

完成版型製作
將產品資料渲染至畫面上
最終範例

03. 版型製作

新增 layout.html 檔案
開啟 Bootstrap 5 文件
Components > Navbar > Text
選擇單純的結構複製程式碼
修改 layout.html 檔案
品牌名稱、按鈕
Components > Buttons
選擇單純的結構複製程式碼
在購物車的地方加上數字
Components > Badge > Pill Badges，選擇 danger 的顏色
修改 Badge 的 class
完成購物車版型
Form > Select
Utilities > Vertical align
製作產品卡片結構
Components > Card

// pinia/layout.html


  
    
    
    完整版型製作
    
    
    
  
  
    
      
        完成版型製作
        
          
            香香餅乾店
            
          
        

        
          購物車沒有任何品項
 
          
          
          
            
              
                x
              
              
                
              
              好吃的餅乾
              
                
              
              
                $900
              
            
          
          
            總金額 NT$ 900
          
          
        

        
          
            
              
              
                好吃的餅乾
                  $900
                
                加入購物車

04. 轉換vue元件

修改 layout.html 檔案，增加 script 片段
新增 homeworkComponents 資料夾
製作 Navbar 元件，避免出錯可以先直接在目前的專案位置進行撰寫
新增 navbarComponent.js 檔案
修改 navbarComponent.js 檔案
修改 layout.html 檔案，匯入 NavbarComponent
新增 cartComponent.js 檔案
修改 cartComponent.js 檔案
修改 layout.html 檔案，匯入 CartComponent
新增 productsComponent.js 檔案
修改 prodcutsComponent.js 檔案
修改 layout.html 檔案，匯入 ProductComponent

// pinia/layout.html


  
    
    
    完整版型製作
    
    
    
  
  
    
      
        完成版型製作

// pinia/homeworkComponents/navbarComponent.js

export default {
  template: `
    
      香香餅乾店
      
    
  `
}

// pinia/homeworkComponents/cartComponent.js

export default {
  template: `
    購物車沒有任何品項
 
    
    
    
      
        
          x
        
        
          
        
        好吃的餅乾
        
          
        
        
          $900
        
      
    
    
      總金額 NT$ 900
    
    
  `
}

// pinia/homeworkComponents/productsComponent.js

export default {
  template: `
    
      
        
        
          好吃的餅乾
            $900
          
          加入購物車
        
      
    
  `
}

05. 導入產品資料

從範例程式碼 productComponet.js 檔案複製產品資料
修改 productsComponent.js 檔案

// pinia/homeworkComponents/productsComponent.js

export default {
  data() {
    return {
      products: [
        {
          id: 1,
          title: '多色餅乾',
          imageUrl: 'https://images.unsplash.com/photo-1576717585968-8ea8166b89b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
          price: 80
        },
        {
          id: 2,
          title: '綠色馬卡龍',
          imageUrl: 'https://images.unsplash.com/photo-1623066463831-3f7f6762734d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1135&q=80',
          price: 120
        },
        {
          id: 3,
          title: '甜蜜左擁右抱',
          imageUrl: 'https://images.unsplash.com/photo-1558312657-b2dead03d494?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
          price: 200,
        },
        {
          id: 4,
          title: '巧克力心連心',
          imageUrl: 'https://images.unsplash.com/photo-1606913084603-3e7702b01627?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
          price: 160
        },
        {
          id: 5,
          title: '粉係馬卡龍',
          imageUrl: 'https://images.unsplash.com/photo-1612201142855-7873bc1661b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
          price: 120
        }
      ]
    }
  },
  template: `
    
      
        
        
          {{ product.title }}
            $ {{ product.price }}
          
          加入購物車
        
      
    
  `
}

06. 建立 store

修改 layout.html 檔案，複製範例片段程式碼、載入套件程式碼，實戰中比較少用這種方式
使用 log 查詢 Pinia 是否有正確匯入
在 pinia 資料夾裡面建立 store 資料夾
在 store 資料夾裡面建立 productsStore.js 檔案
會使用到的 layout.html、productsComponent.js、productsStore.js 檔案
修改 layout.html 檔案，匯入 productStore
修改 productsStore.js 檔案
修改 productsComponent.js 檔案

// pinia/layout.html


  
    
    
    完整版型製作
    
    
    
  
  
    
      
        完成版型製作

// pinia/store/productsStore.js
const { defineStore } = Pinia;

export default defineStore('productsStore', {
  // data, methods, computed
  // state, action, getters
  state: () => ({
    products: [
      {
        id: 1,
        title: '多色餅乾',
        imageUrl: 'https://images.unsplash.com/photo-1576717585968-8ea8166b89b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 80
      },
      {
        id: 2,
        title: '綠色馬卡龍',
        imageUrl: 'https://images.unsplash.com/photo-1623066463831-3f7f6762734d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1135&q=80',
        price: 120
      },
      {
        id: 3,
        title: '甜蜜左擁右抱',
        imageUrl: 'https://images.unsplash.com/photo-1558312657-b2dead03d494?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 200,
      },
      {
        id: 4,
        title: '巧克力心連心',
        imageUrl: 'https://images.unsplash.com/photo-1606913084603-3e7702b01627?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 160
      },
      {
        id: 5,
        title: '粉係馬卡龍',
        imageUrl: 'https://images.unsplash.com/photo-1612201142855-7873bc1661b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 120
      }
    ]
  }),
  getters: {
    sortProducts: ({ products }) => {
      return products 
    }
  }
})

// pinia/homeworkComponents/productsComponent.js
import productsStore from "../store/productsStore.js"
const { mapState } = Pinia

export default {
  data() {
    return {
      
    }
  },
  template: `
    
      
        
        
          {{ product.title }}
            $ {{ product.price }}
          
          加入購物車
        
      
    
  `,
  computed: {
    ...mapState(productsStore, ['sortProducts'])
  }
}

07. 建立購物車 Store

修改 productsStore.js 檔案
加入購物車的行為
在 store 資料夾裡面建立 cartStore.js 檔案，專門管理購物車所有方法
修改 cartStore.js 檔案
修改 productsComponent 檔案，匯入 cartStore
修改 cartStore.js 檔案

// pinia/store/productsStore.js
const { defineStore } = Pinia;

export default defineStore('productsStore', {
  // data, methods, computed
  // state, action, getters
  state: () => ({
    products: [
      {
        id: 1,
        title: '多色餅乾',
        imageUrl: 'https://images.unsplash.com/photo-1576717585968-8ea8166b89b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 80
      },
      {
        id: 2,
        title: '綠色馬卡龍',
        imageUrl: 'https://images.unsplash.com/photo-1623066463831-3f7f6762734d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1135&q=80',
        price: 120
      },
      {
        id: 3,
        title: '甜蜜左擁右抱',
        imageUrl: 'https://images.unsplash.com/photo-1558312657-b2dead03d494?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 200,
      },
      {
        id: 4,
        title: '巧克力心連心',
        imageUrl: 'https://images.unsplash.com/photo-1606913084603-3e7702b01627?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 160
      },
      {
        id: 5,
        title: '粉係馬卡龍',
        imageUrl: 'https://images.unsplash.com/photo-1612201142855-7873bc1661b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        price: 120
      }
    ]
  }),
  getters: {
    sortProducts: ({ products }) => {
      return products.sort((a, b) => a.price - b.price)
    }
  }
})

// pinia/store/cartStore.js
const { defineStore } = Pinia;

export default defineStore('cart', {
  // methods
  // actions
  state: () => ({
    cart: []
  }),
  actions: {
    addToCart(productId, qty = 1) {
      console.log(productId, qty);
      this.cart.push({
        id: new Date().getTime(),
        productId,
        qty
      })
      console.log(this.cart);
    }
  }
})

// pinia/homeworkComponents/productsComponent.js
import productsStore from "../store/productsStore.js"
import cartStore from '../store/cartStore.js'
const { mapState, mapActions } = Pinia

export default {
  data() {
    return {
      
    }
  },
  template: `
    
      
        
        
          {{ product.title }}
            $ {{ product.price }}
          
          加入購物車
        
      
    
  `,
  computed: {
    ...mapState(productsStore, ['sortProducts'])
  },
  methods: {
    ...mapActions(cartStore, ['addToCart'])
  },
}

08. 購物車資訊 Store

使用簡報解釋頁面元件結構
修改 cartStore.js 檔案
修改 cartComponent.js 檔案，匯入 cartStore、使用 mapState
修改 cartStore.js 檔案，調整 cartList

// pinia/store/cartStore.js
const { defineStore } = Pinia;
import productsStore from './productsStore.js';

export default defineStore('cart', {
  // methods
  // actions
  state: () => ({
    cart: []
  }),
  actions: {
    addToCart(productId, qty = 1) {
      console.log(productId, qty);
      this.cart.push({
        id: new Date().getTime(),
        productId,
        qty
      })
      // console.log(this.cart);
    }
  },
  getters: {
    cartList: ({ cart }) => {
      // 1. 購物車的品項資訊，需要整合產品資訊
      // 2. 必須計算小計的金額
      // 3. 必須提供總金額
      const { products } = productsStore();
      // console.log(products);
      // console.log(cart);
      const carts = cart.map((item) => {
        // console.log(item);
        // 單一產品取出
        const product = products.find((product) => product.id === item.productId);
        // console.log('相同 id 的產品', product);
        return {
          ...item,
          product,
          subtotal: product.price * item.qty
        }
      })
      // console.log(carts);
      const total = carts.reduce((a, b) => a + b.subtotal ,0);
      // console.log(total);

      return {
        carts, // 列表
        total
      }
    }
  }
})

// pinia/homeworkComponents/cartComponent.js
import cartStore from '../store/cartStore.js'
const { mapState } = Pinia;

export default {
  template: `
    購物車沒有任何品項
 
    
    
    
      
        
          x
        
        
          
        
        好吃的餅乾
        
          
        
        
          $900
        
      
    
    
      總金額 NT$ {{cartList.total}}
    
    
  `,
  computed: {
    ...mapState(cartStore, ['cartList'])
  }
}

09. 呈現購物車列表並刪除品項

修改 cartComponent.js 檔案
修改 cartStore.js 檔案，撰寫刪除的方法

// pinia/homeworkComponents/cartComponent.js
import cartStore from '../store/cartStore.js'
const { mapState, mapActions } = Pinia;

export default {
  template: `
    購物車沒有任何品項
 
    
    
      
        
          x
        
        
          
        
        {{ item.product.title }}
        
          
        
        
          $ {{ item.subtotal }}
        
      
    
    
      總金額 NT$ {{cartList.total}}
    
    
  `,
  computed: {
    ...mapState(cartStore, ['cartList'])
  },
  methods: {
    ...mapActions(cartStore, ['removeCartItem'])
  }
}

// pinia/store/cartStore.js
const { defineStore } = Pinia;
import productsStore from './productsStore.js';

export default defineStore('cart', {
  // methods
  // actions
  state: () => ({
    cart: []
  }),
  actions: {
    addToCart(productId, qty = 1) {
      console.log(productId, qty);
      this.cart.push({
        id: new Date().getTime(),
        productId,
        qty
      })
      // console.log(this.cart);
    },
    removeCartItem(id) {
      const index = this.cart.findIndex((item) => item.id === id);
      this.cart.splice(index, 1);
    }
  },
  getters: {
    cartList: ({ cart }) => {
      // 1. 購物車的品項資訊，需要整合產品資訊
      // 2. 必須計算小計的金額
      // 3. 必須提供總金額
      const { products } = productsStore();
      // console.log(products);
      // console.log(cart);
      const carts = cart.map((item) => {
        // console.log(item);
        // 單一產品取出
        const product = products.find((product) => product.id === item.productId);
        // console.log('相同 id 的產品', product);
        return {
          ...item,
          product,
          subtotal: product.price * item.qty
        }
      })
      // console.log(carts);
      const total = carts.reduce((a, b) => a + b.subtotal ,0);
      // console.log(total);

      return {
        carts, // 列表
        total
      }
    }
  }
})

10. 新增品項加總至原品項

修改 cartStore.js 檔案

// pinia/store/cartStore.js
const { defineStore } = Pinia;
import productsStore from './productsStore.js';

export default defineStore('cart', {
  // methods
  // actions
  state: () => ({
    cart: []
  }),
  actions: {
    addToCart(productId, qty = 1) {
      // 取得已經有加入購物車的項目
      // 進行判斷，如果購物車有該項目則 +1，如果沒有則是新增一個購物車項目
      const currentCart = this.cart.find((item) => item.productId === productId)

      if (currentCart) {
        currentCart.qty += qty;
      } else {
        this.cart.push({
          id: new Date().getTime(),
          productId,
          qty
        });
      }
      console.log(this.cart);
      // console.log(this.cart);
    },
    removeCartItem(id) {
      const index = this.cart.findIndex((item) => item.id === id);
      this.cart.splice(index, 1);
    }
  },
  getters: {
    cartList: ({ cart }) => {
      // 1. 購物車的品項資訊，需要整合產品資訊
      // 2. 必須計算小計的金額
      // 3. 必須提供總金額
      const { products } = productsStore();
      // console.log(products);
      // console.log(cart);
      const carts = cart.map((item) => {
        // console.log(item);
        // 單一產品取出
        const product = products.find((product) => product.id === item.productId);
        // console.log('相同 id 的產品', product);
        return {
          ...item,
          product,
          subtotal: product.price * item.qty
        }
      })
      // console.log(carts);
      const total = carts.reduce((a, b) => a + b.subtotal ,0);
      // console.log(total);

      return {
        carts, // 列表
        total
      }
    }
  }
})

11. 設定數量

修改 cartComponent.js 檔案
修改 cartStore.js 檔案

// pinia/homeworkComponent/cartComponent.js
import cartStore from '../store/cartStore.js'
const { mapState, mapActions } = Pinia;

export default {
  template: `
    購物車沒有任何品項
 
    
    
      
        
          x
        
        
          
        
        {{ item.product.title }}
        
          
        
        
          $ {{ item.subtotal }}
        
      
    
    
      總金額 NT$ {{cartList.total}}
    
    
  `,
  computed: {
    ...mapState(cartStore, ['cartList'])
  },
  methods: {
    ...mapActions(cartStore, ['removeCartItem', 'setCartQty'])
  }
}

// pinia/store/cartStore.js
const { defineStore } = Pinia;
import productsStore from './productsStore.js';

export default defineStore('cart', {
  // methods
  // actions
  state: () => ({
    cart: []
  }),
  actions: {
    addToCart(productId, qty = 1) {
      // 取得已經有加入購物車的項目
      // 進行判斷，如果購物車有該項目則 +1，如果沒有則是新增一個購物車項目
      const currentCart = this.cart.find((item) => item.productId === productId)

      if (currentCart) {
        currentCart.qty += qty;
      } else {
        this.cart.push({
          id: new Date().getTime(),
          productId,
          qty
        });
      }
      console.log(this.cart);
      // console.log(this.cart);
    },
    setCartQty(id, event) {
      // console.log(id, event);
      // console.log(event.target.value, typeof event.target.value);
      const currentCart = this.cart.find((item) => item.id === id);
      // console.log(currentCart);
      currentCart.qty = event.target.value * 1;
    },
    removeCartItem(id) {
      const index = this.cart.findIndex((item) => item.id === id);
      this.cart.splice(index, 1);
    }
  },
  getters: {
    cartList: ({ cart }) => {
      // 1. 購物車的品項資訊，需要整合產品資訊
      // 2. 必須計算小計的金額
      // 3. 必須提供總金額
      const { products } = productsStore();
      // console.log(products);
      // console.log(cart);
      const carts = cart.map((item) => {
        // console.log(item);
        // 單一產品取出
        const product = products.find((product) => product.id === item.productId);
        // console.log('相同 id 的產品', product);
        return {
          ...item,
          product,
          subtotal: product.price * item.qty
        }
      })
      // console.log(carts);
      const total = carts.reduce((a, b) => a + b.subtotal ,0);
      // console.log(total);

      return {
        carts, // 列表
        total
      }
    }
  }
})

12. Navbar 數量呈現

修改 navbarComponent.js 檔案

// pinia/homeworkComponents/navbarComponent.js
const { mapState } = Pinia;
import cartStore from "../store/cartStore.js";

export default {
  template: `
    
      香香餅乾店
      
    
  `,
  computed: {
    ...mapState(cartStore, ['cart'])
  }
}

Vue3 複習09

gee.hsu — Tue, 23 Apr 2024 09:06:43 +0000

最終挑戰

最終作業課程介紹

課程目標

透過課程專屬 API 完成獨立作品

電商網站操作流程

管理員
用戶

開發的架構說明

前端
- 前台
- 後台
後端

學習面向

後台 – 登入授權、編輯商品、檢視訂單、建立優惠券…
學習開發流程、後台邏輯建構
前台 – 檢視商品、選購並加入購物車、提交訂單、模擬付款…
- 完整作品經營
- 美感、細節培養
- 解決問題的能力

API 說明

[API]: https://站點/api/:api_path/admin/product

申請帳號 – 登入授權也是使用此帳號
申請專屬 API 連結 – 資料內容也會獨立
開始練習

API 文件

[API]: https://站點/api/:api_path/admin/product

[方法]: POST

// [參數]:
{
  "data": {
    "title": "[賣]動物園造型衣服3",
    "category": "衣服2",
    ...
  }
}

課程 API 文件及相關資源

課程需要先註冊屬於個人的 API 路徑，註冊方法在下一小節會介紹，註冊網址與 API 站點連結
API 文件
課程中後期，不會所有步驟都一一說明，所以課程中有提供每個階段的 commit，讓大家可以看到每個章節老師修改了哪些部分：所有課程進度 Commit (對應課程章節)
課程中也會提供許多 HTML 片段模板，減少重複繁瑣的行為，如提到會提供模板的部分，連結
雖然課程中 ESLint 選擇為 Airbnb 格式：
- 體驗簡單一點的開發規則可選擇 Standard
- 對 ES6 及錯誤排除有一定掌握者可選擇 Airbnb

關於 ESLint 搭配 VSCode 的自動排版可參考（注意，並非所有錯誤都可自動排除）：連結

使用時 ESLint 時：

可多利用文字編輯器的提示來除錯（除錯也是開發者必學的技能之一）
盡可能避免關閉 ESLint 的提示

申請課程 API

流程說明:

申請一個專屬的課程練習帳號
登入帳號，並申請一個 API 路徑
測試 API 是否可以運作，並且開始實作

複習 Vue Cli 建立環境

使用 Vue Cli 建立環境 vue create vue3_dashboard_record
Please pick a preset: Manually select features
Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors, Linter
Choose a version of Vue.js that you want to start the project with 3.x (Preview)
Use history mode for router? (Requires proper server setup for index fallback in production) No
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
Pick a linter / formatter config: Airbnb
Pick additional lint features: Lint on save
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
Save this as a preset for future projects? (y/N) N

API 路徑加到環境變數

在根目錄新增 .env 檔案
API Server 路徑: VUE_APP_API
API 個人路徑: VUE_APP_PATH
開啟 Home.vue 檔案調整程式碼內容
使用生命週期讀出環境變數
重新執行 npm run serve
開啟 Console 查看環境變數是否有顯示

// .env
VUE_APP_API=http://localhost:3000/
VUE_APP_PATH=geehsu-api

// views/Home.vue

// 除錯 Console 警告
// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
  }
}

常見 API 問題解決方式

路徑與方法是一對的

API 是由路徑 + 方法組成的，文件中皆會標示所有 API 可用的方法如 GET、POST、DELETE 等等，必須使用完全對應的方法才能運作喔。

從錯誤訊息中尋找問題

API 發送的過程中錯一個字就會無法運行，盡可能從錯誤的回饋中尋找問題，檢查：

路徑是否拼對
GET、POST 等方法是否正確
程式碼運作是否如預期

遇到錯誤無法解決

發問流程:
可以提供完整程式碼讓老師、助教測試
可以將原始碼上傳至 GitHub 或雲端硬碟，並將說明及連結提供在問答區
上傳時特別注意: 不需要夾帶 node_modules、dist 資料夾
這會導致信件無法開啟，且下載後依然要刪除重新安裝。

另外請盡可能提供完整訊息，由於許多問題並非片段就能判斷
所以盡可能提供越完整越好

錯誤的問題描述 (哪一個 API、做了什麼事、預期有怎樣的進展、錯誤的問題點)
錯誤的 API 連結為何
完整錯誤的訊息圖片 (Chrome Console)
出現錯誤的程式碼

匯入 Bootstrap 並調整版型

安裝 Bootstrap 套件 – npm install bootstrap
引用 Bootstrap 到專案裡面
Bootstrap 文件 > Customize > Sass > Importing
複製 @import “../node_modules/bootstrap/scss/bootstrap”;
開啟 App.vue 檔案貼上程式碼後改寫
@import “~bootstrap/scss/bootstrap”;
重新運行 npm run serve
在 Bootstrap 文件 > 元件 > 按鈕
複製按鈕程式碼貼到 App.vue 檔案測試是否有正確載入 Bootstrap 套件
客製化 Bootstrap 樣式
在 assets 資料夾新增 all.scss 檔案
在 assets 資料夾新增 helpers 資料夾
在 assets/helpers 新增 _variables.scss 檔案 (_在scss不會被編譯出來)
找到 node_modules/bootstrap/scss/_variables.scss 打開
複製 _variables.scss 所有程式碼直接貼到 assets/helpers/_variables.scss 檔案
客製化變數
在 Bootstrap 文件 > Customize > Sass > Importing
複製文件需要的程式碼貼到 assets/all.scss 並改寫
匯入所有的 Bootstrap
在 App.vue 檔案調整成自定義 Sass 匯入路徑
在 assets/helpers/_variables.scss 檔案調整變數

// App.vue

// assets/helpers/_variables.scss
// scss-docs-start theme-colors-map
$theme-colors: (
  "primary":    black , // $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
) !default;
// scss-docs-end theme-colors-map

// assets/all.scss
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "~bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
// 客製化 variables 路徑
@import "./helpers/variables";
@import "~bootstrap/scss/variables-dark";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";

// 匯入所有的 Bootstrap
@import "~bootstrap/scss/bootstrap";

製作登入頁面

注意事項：.env 檔中的站點需要調整才能夠對應到文件範例如下：

VUE_APP_API=https://vue3-course-api.hexschool.io/

登入及驗證、vue-a xio s、課程部分模板

查看登入及驗證 API 文件
[API]、[方法]、[參數]、[成功回應]、[失敗回應]
安裝 vue-axios 套件
npm install –save axios vue-axios
匯入 vue-axios 套件
Vue2, Vue3 載入方式有所不同
複製程式碼貼到 main.js 檔案
調整 main.js 檔案結構
重新運行 npm run serve
新增 views/Login.vue 檔案
製作簡單頁面確保現在頁面已經建立成功
建立檔案再調整路由
查看 login 畫面有無正確運作
http://localhost:8080/#/login
清除 App.vue 檔案多餘的程式碼片段
在 Login.vue 加入登入的版型
使用課程部分模板調整使用

撰寫 Login.vue

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/login',
    component: () => import('../views/Login.vue'),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

// App.vue

// .env
VUE_APP_API=https://vue3-course-api.hexschool.io/
VUE_APP_PATH=geehsu-api

登入與 Cookie

查看瀏覽器 Cookie 儲存位置
查看 MDN 文件 – Cookie 文件連結
撰寫 document.cookie 程式碼
登入後查看瀏覽器 Cookie 是否有正確儲存

// views/Login.vue

Cookie 存取的語法

MDN 文件，將 Cookie 存入、取出: 連結

// MDN 文件，將 Cookie 存入、取出 - 範例程式碼
const token = response.data.token;
const expired = response.data.expired;
console.log(token, expired);
document.cookie = `hexToken=${token};expires=${new Date(expired)};`;

Axios 文件，設定預設 Headers: 連結

// Axios 文件，設定預設 Headers - 範例程式碼
const token = document.cookie.replace(/(?:(?:^|.*;\s*)hexToken\s*=\s*([^;]*).*$)|^.*$/, '$1');
this.$http.defaults.headers.common.Authorization = `${token}`;

確認是否維持登入狀態

查看登入及驗證文件
檢查用戶是否仍持續登入
驗證方法 – 將 Token 加入 Headers
Token
把 Token 從 Cookie 取出
把 Token 加到 Headers
查看 MDN 文件 – Cookie 文件連結
複製 myCookie 程式碼並做改寫
查看 axios 文件 – Global axios defaults
實作把 Cookie 取出來、以及把 Token 發送出去
新增 views/Dashboard.vue 檔案
在 router/index.js 檔案把 Dashboard 加到路由表
http://localhost:8080/#/dashboard
查看是否有正確運作
在 Dashboard.vue 檔案撰寫程式碼
專注在 JS 撰寫
取出 token
把token 夾帶到 headers 裡面
複製 Global axios defaults 程式碼
試著觸發剛剛的 API
複製 Login.vue signIn() 裡面的程式碼
把多餘的程式碼清掉
檢查用戶是否仍然持續登入，把 API 路徑改成 api/user/check
查看 console 回傳的 data 是否是成功
清除 Cookie 查看是否仍正確登入
在 Login.vue 檔案補上登入判斷，登入成功後會轉址到 Dashboard 頁面
在 Dashboard.vue 檔案補上登入判斷，登入失敗後會轉址到 Login 頁面

// views/Dashboard.vue

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue'),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

// views/Login.vue

調整巢狀路由並且加入 Navbar

新增 Products.vue 檔案 – 產品頁面
在 Dashboard.vue 檔案新增 Navbar
在 Bootstrap 文件搜尋 Navbar 尋找相對簡單的程式碼複製使用
在 App.vue 檔案把預設的連結清除
複製貼到 Dashboard.vue
打開 router/index.js 路由表
在 dashboard 路由新增 products 子路由
http://localhost:8080/#/dashboard/products
在 Login.vue 檔案調整程式碼
登入成功後的轉址改為 /dashboard/products
在 Dashboard.vue 檔案把 Navbar 程式碼拆分到元件
在 src/components 新增 Navbar.vue 檔案
把 Dashboard.vue 檔案 Navbar 程式碼剪下貼到 Navbar.vue 檔案
在 Dashboard.vue 匯入 Navbar.vue
import Navbar from ‘../components/Navbar.vue’;
使用 components 區域註冊 Navbar
再把標籤加到畫面
在 Navbar.vue 新增登出的功能
查看登入及驗證文件
從 Login.vue 檔案查看 signIn 方法
撰寫 Navbar.vue logout 方法

// views/Products.vue

// views/Dashboard.vue

// App.vue

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue'),
    // 巢狀路由 - 產品列表
    children: [
      {
        path: 'products',
        component: () => import('../views/Products.vue'),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

// Login.vue

// src/components/Navbar.vue

導航守衛

防止使用者觀看到後台介面。

參考: Day17：如何防止使用者未登錄就要訪問頁面？

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import axios from 'axios';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('../views/Dashboard.vue'),
    meta: { requiresAuth: true },
    children: [
      {
        path: 'products',
        name: 'Products',
        component: () => import('../views/Products.vue'),
        meta: { requiresAuth: true },
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  console.log('導航守衛啟動');
  if (to.meta.requiresAuth) {
    console.log('need auth');
    const token = document.cookie.replace(/(?:(?:^|.*;\s*)hexToken\s*=\s*([^;]*).*$)|^.*$/, '$1');
    axios.defaults.headers.common.Authorization = token;
    const api = `${process.env.VUE_APP_API}api/user/check`;
    axios.post(api).then((res) => {
      console.log(res.data);
      console.log(res.data.success);
      if (res.data.success) {
        next();
      } else {
        next({
          path: '/login',
        });
      }
    });
  } else next();
});

export default router;

參考: Vue Router Guard

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('../views/Dashboard.vue'),
    meta: { requiresAuth: true },
    children: [
      {
        path: 'products',
        name: 'Products',
        component: () => import('../views/Products.vue'),
        meta: { requiresAuth: true },
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

document.isAuthenticated = false;

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !document.isAuthenticated) next({ name: 'Login' });
  else next();
});

export default router;

// views/Login.vue

建立 NotFound 頁面，然後轉址到首頁。

// views/NotFound.vue

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('../views/Dashboard.vue'),
    meta: { requiresAuth: true },
    children: [
      {
        path: 'products',
        name: 'Products',
        component: () => import('../views/Products.vue'),
        meta: { requiresAuth: true },
      },
    ],
  },
  // 404 頁面
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../views/NotFound.vue'),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

document.isAuthenticated = false;

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !document.isAuthenticated) next({ name: 'Login' });
  else next();
});

export default router;

加入產品列表

主要撰寫 Products.vue 檔案
稍微調整 Dashboard.vue 檔案
調整 Dashboard.vue 檔案程式碼
標籤外層加上 .container-fluid
在 Products.vue 檔案
用列表的形式完成，複製課程部分模板程式碼貼上
在 Products.vue 撰寫 JS 部分
定義 data() 回傳資料，products 資料是陣列、分頁資訊是物件
在 Products.vue 撰寫取得遠端資料的方法
定義 methods 物件，getProducts() 方法
getProducts() 取得產品列表是多數的產品資訊
查看 API 文件 – 管理控制台 [需驗證]
找到取得商品列表，透過 API 路徑取得遠端資料
參考 Login.vue 檔案 signIn() 方法調整成取得商品列表的 API 結構
[API]: /api/:api_path/admin/products?page=:page
尚未製作分頁可以先把分頁後面的 API 移除
把 API 和 PATH 改寫成環境變數的路徑
${process.env.VUE_APP_API}api/${process.env.VUE_APP_PATH}/admin/products
API 方法是使用 get
使用生命週期 created() 觸發 getProducts() 方法
查看 Console 是否有正確取得遠端資料
可以儲存產品資訊和分頁資訊，調整 getProducts() 方法程式碼
使用 Vue 開發者工具檢視
把產品資訊渲染到畫面上

// views/Products.vue

分類	產品名稱	原價	售價	是否啟用	編輯
{{ item.category }}	{{ item.title }}	{{ item.origin_price }}	{{ item.price }}	啟用未啟用

// views/Dashboard.vue

增加 Bootstrap Modal

製作新增產品的彈跳視窗
使用事件的方式呼叫元件
查看 Bootstrap 文件
元件 > 互動視窗 Modal > 完整範例 Live Demo，是透過 HTML 方式呼叫 Modal
因為使用 Vue.js，所以盡可能使用 JS 方式呼叫 Modal
元件 > 互動視窗 Modal > 用法 > 傳遞選項
使用 new bootstrap modal 方法把 modal 實體化
在 components 資料夾新增 ProductModal.vue 檔案
在 Bootstrap 複製完整範例 Live Demo Modal 部分的程式碼貼到 ProductModeal.vue 檔案
在 ProductModal.vue 檔案加入 JS
著重在 JS 的部分
在元件新增方法讓外部元件呼叫
調整 ProductModal.vue 檔案 HTML 的部分
加上 ref 屬性，透過 ref 方式直接存取 DOM 元素
撰寫 ProductModal.vue 檔案 JS 的部分
參考 Bootstrap 文件元件 > 互動視窗 Modal > 用法 > 透過 JavaScript
複製程式碼貼到 mounted 裡面
在調用之前必須把 Bootstrap 的 Modal 方法載出來
在 node_modules/bootstrap/js/dist/modal.js 檔案，把 modal.js 檔案載進來
會使用 import 方法載入 Modal
調整 mounted 裡面程式碼，改成 new Modal
透過 refs方式把 DOM 元素指向外層的 ref modal
繼續調整 mounted 裡面程式碼
this.$refs.modal
前面的變數再指回 data 裡面定義的變數
改成 this.modal
在 mounted 加上 this.modal.show();
在 Products.vue 檔案
直接到 JS 部分直接使用 import 方式把 ProductModal 方法載進來
定義 components 進行 ProductModal 區域註冊
把 Productmodal 加到畫面上面
把剩餘的一些方法補上
showModal 方法、hideModal 方法
在 Products.vue 檔案
找到標籤定義名稱 ref=”productModal”
使用 ref 方式直接呼叫 Modal 方法
在 Products.vue 檔案
在上方加入一些程式碼
使用 @click=”$refs.productModal 方式指向所定義的元件，直接呼叫裡面的 showModal 方法

// components/ProductModal.vue

// views/Products.vue

分類	產品名稱	原價	售價	是否啟用	編輯
{{ item.category }}	{{ item.title }}	{{ item.origin_price }}	{{ item.price }}	啟用未啟用

透過彈出視窗新增品項

新增產品在互動邏輯是相對複雜很多
查看管理控制台 [需驗證] API 文件 – 商品建立
新增產品是如何運作
預期點擊右上方新增產品會跳出一個彈出視窗，輸入內容後按下確認把資料新增
這個章節最複雜的是有一個列表的元件，彈出視窗會有另外一個元件，這兩個元件之間的溝通是這個章節最複雜的地方
透過繪圖的形式了解元件之間是怎麼溝通
在 ProductModal.vue、Products.vue 檔案
在 ProductModal.vue 檔案建構表單所需要的 HTML 以及 v-model 雙向綁定
提醒: 上傳圖片的行為
在 ProductModal.vue 檔案 data() 裡面新增 tempProduct 物件進行外層的資料傳送的接收
在外層 Products.vue 檔案調整程式碼
新增 updateProduct() 方法的事件
調整獨立 openModal() 事件
openModal() 方法加到增加一個產品按鈕
tempProduct 資料傳送到內層
在內層 ProductModal.vue 建立 props 使用物件格式建立，名稱為 product
在外層 Products.vue data() 新增 tempProduct
內層所接收的 props
傳進來時使用 product 進行接收，product 是一個物件，預期傳進來的型別是物件 object，預設的情況下如果外層沒有正確的傳遞給予一個預設值 default() 直接回傳一個空的物件
props 原則是前內後外
在 Products.vue 檔案標籤撰寫程式碼
:product=”tempProduct”
運作流程，外層的 tempProduct 透過 props 傳送進來，內層會使用 product 進行接收
監聽 product 內容有沒有更動，使用 watch 監聽，watch 是一個物件，監聽外層傳進來的 props
watch 的目的把傳進來的資料寫到 tempProduct 裡面
因為單向數據流不可以直接修改外層的資料
this.tempProduct = this.product;
打開開發人員工具 > Vue 開發者工具
可以找到
按下增加一個產品，輸入表單內容就可以看到 tempProduct 有增加一些內容
使用 emit 事件把 tempProduct 資料傳送到遠端
在內層 ProductModal.vue 檔案
在外層 Products.vue 預期會使用 updateProduct 進行接收，標籤使用 @update-product=”updateProduct”
使用前內後外的概念，前面是內層的元件、後面是外層所接收的函式
運作流程會使用 $emit 觸發外層的事件，觸發事件的名稱 updateProduct，接下來觸發 updateProduct() 函式，觸發的同時會把 tempProduct 資料內容透過參數的方式傳到 item 裡面
測試 tempProduct 參數有沒有正確傳過來
測試新增品項功能是否能正常運作
必須把開啟的 modal 關閉、再重新取得列表的資料

// components/ProductModal.vue

// views/Products.vue

分類	產品名稱	原價	售價	是否啟用	編輯
{{ item.category }}	{{ item.title }}	{{ item.origin_price }}	{{ item.price }}	啟用未啟用

產品資料更新

在 Products.vue 檔案的 tempProduct不是只為了新增，還為了編輯做使用
在範例點擊其中一個品項的編輯，會把這一個產品的品項新增到 tempProduct，送出的不是空物件，而是所點擊的這個產品的品項，因此這個 tempProduct 主要的用途是為了編輯做使用
查看管理控制台 [需驗證] API 文件 > 修改產品
查看 [API]、[方法] 與商品建立的差異
調整程式碼撰寫修改產品的功能
主要調整產品列表的部分
在 Products.vue 檔案
會透過屬性來判斷目前是否是新增的狀態，在 data() 新增一個 isNew 的狀態，目前是 false
在 openModal 新增兩個參數，一個是不是新的、另一個是編輯的話，把編輯的品項加進來
使用 console 查看
在 HTML 的 openModal 加入參數 true
@click=”openModal(true)
在品項的編輯按鈕加上 @click=”openModal(false, item)，false、以及當前的品項
當前的品項是把 v-for 裡面的 item 帶到編輯裡面
在 openModal(isNew, item) 加上流程判斷、調整程式碼
測試編輯功能是否能正確運作
調整更新的部分
查看管理控制台 [需驗證] API 文件 – 修改產品
[API]、[方法]
使用 this.isNew 流程判斷目前是新增還是修改
調整 updateProduct(item) 方法程式碼
測試編輯更新功能是否能正確運作

// views/Products.vue

分類	產品名稱	原價	售價	是否啟用	編輯
{{ item.category }}	{{ item.title }}	{{ item.origin_price }}	{{ item.price }}	啟用未啟用

透過 API 上傳圖片

介紹上傳圖片的功能
查看管理控制台 [需驗證] API 文件 > 上傳圖片
上傳表單是使用傳統的
標籤上傳的時候會用到
action 是 API 路徑、enctype 是使用 form-data 格式、method 使用的方法是 post
input 欄位有 name 屬性是 file-to-upload，是 API 上傳檔案需要對應的欄位
表單傳送 action
在 ProductModal.vue 檔案
觀看上傳圖片部分的程式碼，提及 @chagne=”uploadFile”、uploadFile() 方法
著重在如何把檔案取出，並轉成 form-data 格式
首要條件是取得 input 的檔案內容，在這先定義 ref=”fileInput”，便於取得這個 DOM 元素，並且把檔案取出來使用
在 ProductModal.vue 檔案 JS 部分著重在 uploadFile 函式
把 input 裡面的內容取出
使用 console.dir(uploadFile) 查看，上傳任意圖片測試，查找 files 屬性，是一個陣列，要取得的是第0個檔案，再次上傳任意圖片測試
取出的檔案轉成 form-data 格式
宣告 formData 變數使用 new FormData() JS 方法
formData.append，append 是要增加一個欄位到表單裡面，欄位的名稱是 API 文件 name=”file-to-upload”，欄位內容是取出來的檔案
透過 API 形式發送到遠端
測試 console.log(response.data);

// components/ProductModal.vue

使用 mixin 整合相同程式碼

元件裡面有相同的程式碼要怎麼樣進行合併
試著完成 delModal 功能
DelModal.vue 和 ProductModal.vue 相同片段的程式碼
使用 vue 的特性 mixin 把相同的程式碼抽離出來
在 src 新增資料夾 mixins
在 mixins 新增檔案 modalMixin.js
抽離 DelModal.vue 檔案相同程式碼的部分到 modalMixin.js 檔案
在 DelModal.vue 檔案匯入 modalMixin.js 檔案
在元件加入 mixins 屬性，是一個陣列
mixins: [modalMixin]
使用相同的方式把 ProductModal.vue 檔案相同的程式碼也抽離出來

// components/DelModal.vue - 2. 試著完成 delModal 功能

// mixins/modalMixin.js
import Modal from 'bootstrap/js/dist/modal';

export default {
  methods: {
    showModal() {
      this.modal.show();
    },
    hideModal() {
      this.modal.hide();
    },
  },
  mounted() {
    this.modal = new Modal(this.$refs.modal);
  },
};

// components/DelModal.vue

// components/ProductModal.vue

加入讀取的視覺效果

使用 vue3-loading-overlay 套件
安裝 vue3-loading-overlay 套件
npm install vue3-loading-overlay
查看文件是如何使用讀取效果
載入元件 – Import component
複製 vue3-loading-over Usage 的程式碼
打開 main.js 檔案，然後貼上程式碼
修改程式碼路徑
註冊元件，使用全域註冊方式啟用元件
在 Products.vue 檔案把 Loading 元件加到最上方
加上 active 狀態，這是一個 props，實際上會把自定義的狀態給傳進去，自定義狀態名稱
把狀態加到 data() 裡面
預期在取得產品列表的時候將讀取的效果顯示
在 getProducts() 將讀取的效果加上
可以為所有的 AJAX 行為都加上讀取效果，包含登入、註冊、新增產品、編輯、刪除

// src/main.js
import { createApp } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Loading from 'vue3-loading-overlay';
import 'vue3-loading-overlay/dist/vue3-loading-overlay.css';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(VueAxios, axios);
app.use(router);
app.component('Loading', Loading);
app.mount('#app');

// views/Products.vue

分類	產品名稱	原價	售價	是否啟用	編輯
{{ item.category }}	{{ item.title }}	{{ item.origin_price }}	{{ item.price }}	啟用未啟用

加入錯誤的訊息回饋

錯誤通知算是相對複雜的章節
主要原因會牽動到非常多的檔案的互相溝通
使用 Bootstrap 吐司 (Toasts) 元件
元件 > 吐司 > 方法
透過講解的形式了解吐司元件是怎麼運作
吐司元件跟 Vue 元件如何互動
目的是讓所有的元件都可以使用這個通知的功能
通知功能不會只掛載在特定的元件下，會獨立放在任何可以呼叫到的地方，是獨立元件
可以堆疊產生多個通知
分離可以產生堆疊，每個吐司有自己獨立的生命週期，啟用的時候可以使用參數
產品列表與吐司元件可以使用到 mitt 套件，進行跨元件的溝通
原始碼是如何運作
安裝 mitt 套件，功能為跨元件溝通使用
新增 emitter.js 檔案、撰寫程式碼
在元件利用的時候可以只加在最外層，在 Dashboard 檔案匯入 emitter，使用 provide 讓內層的元件都可以使用外層功能
在 Products.vue 檔案使用 inject
在 ToastMessages.vue 檔案使用 inject
新增 ToastMessages.vue 檔案以及程式碼內容
作為定位使用、列表呈現
在 mounted() 生命週期加上 emitter 事件
新增 Toast.vue 檔案以及程式碼內容
吐司元件
從 Bootstrap 文件複製程式碼
最重要的地方每次吐司元件生成的時候，觸發屬於自己生命周期的時候，吐司元件會開啟 6 秒鐘後消失
Products 如何把訊息傳給吐司元件
如何透過 mitt 送到吐司列表裡面
在 Products.vue 檔案撰寫程式碼，根據判斷狀態推送不同的訊息內容
可以參考課程範例逐步拆解流程該怎麼樣運作

// src/methods/emitter.js
import mitt from 'mitt';

const emitter = mitt();

export default emitter;

// views/Dashboard.vue

// views/Products.vue

分類	產品名稱	原價	售價	是否啟用	編輯
{{ item.category }}	{{ item.title }}	{{ item.origin_price }}	{{ item.price }}	啟用未啟用

// src/components/ToastMessages.vue - 彈出訊息列表元件

// src/components/Toast.vue - 吐司元件

加入分頁切換

分頁會使用元件的方式製作
在之後的訂單、優惠券也可使用分頁的功能
關於分頁是怎麼運作
透過 API 形式進行頁面的切換
查看管理控制台 [需驗證] 文件 > 取得商品列表
示範直接透過分頁的參數切換頁面
在 Products.vue 檔案 getProduct() 直接加入參數切換
在 getProduct() 加上參數預設值的形式 page = 1
api 路徑就可以把變數載進來
查看 Console 顯示的訊息 pagination、products
將後端傳來製作分頁所需要的重要資訊製作成元件
新增 Pagination.vue 檔案和撰寫分頁元件程式碼
關於指令、JS 自己練習撰寫
在 Products.vue 檔案加入標籤
在外層定義 Products 元件，在內層定義 Pagination 元件，把分頁所需要的資訊傳進去，使用 props 的形式把分頁的資訊傳進去 props:pagination，就是從 AJAX 取回來的相關資訊。在點擊分頁的時候會觸發 emit，執行頁面切換使用，會回傳 emits 觸發 getProduct 事件、同時把頁碼帶進來，透過這種方式進行頁面的切換
在 Pagination.vue 檔案預期外面會傳入一個 pages，這個就是 pagination，刻意用不同的名稱來代表，在這裡會傳入一個 pagination，是從 AJAX 所取回來的資料
在 Products.vue 檔案
在產品頁面的 getProducts 之後是有把 pagination 的資訊存起來，存起來的內容可以在標籤帶進來，重點: 前內後外的概念，前面放入內層所需要接收的資訊，外層帶入 pagination
在 Pagination 檔案把頁碼加到這個區塊
在 AJAX 所取回來的資料 pagination 裡面有 total_pages 變數，就可以把變數帶進來，使用 v-for 的形式、page in pages 從外層帶進來的 props 名稱 pages 然後找到 total_pages，使用 v-for 要再加上 key，帶入的是 page 名稱，在連結把 page 帶進來

預期點下按鈕時會切換頁面
使用 @click.prevent 加上一個自定義事件的名稱 updatePage 並且把頁碼帶進去
調整一下函式的內容，會直接對外發送切換頁面的事件
this.$emit(’emit-pages’, page)

在 Products.vue 檔案做主要的切換，預期會透過 emit 事件把事件往外送，在標籤加上由前內後外，內層事件名稱，預期切換 Products、觸發 getProducts 的事件，外層 getProducts 事件

在 Pagination.vue 檔案加上 active 樣式判斷

// src/components/Pagination.vue

// views/Products.vue

分類	產品名稱	原價	售價	是否啟用	編輯
{{ item.category }}	{{ item.title }}	{{ item.origin_price }}	{{ item.price }}	啟用未啟用

套用全域的千分號

數值超過一千以上建議加上千分號，在閱讀上面會比較好，在產品頁面、訂單、優惠券…等都有可能會加入千分號，會建議把千分號功能獨立起來，在每一個頁面、元件都可以使用
新增 filters.js 檔案
加入千分號方法、轉換時間格式方法
在 Products.vue 檔案有 origin_price、price
把函式加入轉換成千分號的形式
匯入 filters.js 檔案，在 Products.vue 檔案只需要匯入 currency 方法
將 currency 加到 methods 方法裡面就可以直接使用
currency 加在金額的前方，因為 currency 本身是函式必須使用括號
額外的技巧，在 Vue3 官方文件有應用配置 > globalProperties，是全域的屬性
可以使用 app.config.globalProperties 定義一個全域的屬性的方法，自定義任何想加入的屬性
在每個子元件下都可以直接去使用 this 方式呼叫這個變數，如果是加入一般的純值效益其實不大，加入方法的話，就像千分號方法使用度就會高很多
實作額外的技巧
在 main.js 檔案就可以把 filters.js 方法匯入
參考官方文件 app.config 設定
app.config.globalProperties 然後加上一個自定義的屬性名稱，使用 $filters 這個名稱作為一個集合，建議在屬性名稱最前方加上$，這樣比較不會跟區域元件裡面的變數產生衝突，等於一個物件，就可以把 currency 方法帶進來
filters.js 其實有很多方法，可以陸續加入許多方法，都可以透過這種方式加到 filters 物件裡面
在 Products.vue 檔案，原本是直接呼叫 currency 方法，現在會在前面加上 $filters，可自定義屬性名稱
使用 $filters 這種方式加到全域的屬性，就必須把原本在區域的方式把移除

// methods/filters.js
export function currency(num) {
  const n = parseInt(num, 10);
  return `${n.toFixed(0).replace(/./g, (c, i, a) => (i && c !== '.' && ((a.length - i) % 3 === 0) ? `, ${c}`.replace(/\s/g, '') : c))}`;
}

export function date(time) {
  const localDate = new Date(time * 1000);
  return localDate.toLocaleDateString();
}

// views/Products.vue

分類	產品名稱	原價	售價	是否啟用	編輯
{{ item.category }}	{{ item.title }}	{{ $filters.currency(item.origin_price) }}	{{ $filters.currency(item.price) }}	啟用未啟用

// src/main.js
import { createApp } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Loading from 'vue3-loading-overlay';
import 'vue3-loading-overlay/dist/vue3-loading-overlay.css';
import App from './App.vue';
import router from './router';
import { currency } from './methods/filters';

const app = createApp(App);
app.config.globalProperties.$filters = {
  currency,
};
app.use(VueAxios, axios);
app.use(router);
app.component('Loading', Loading);
app.mount('#app');

中場加速

完成訂單、優惠券的頁面
訂單 – 訂單列表、編輯訂單、刪除訂單、分頁功能
在 Products.vue 檔案
在每次發送 http 行為的時候，都會針對事件成功與否觸發 emitter，emitter 就會把成功與否透過吐司的方式呈現，封裝方法就放在 pushMessageState.js
在 main.js 檔案加入全域的屬性
app.config.globalProperties.$httpMessageState = $httpMessageState;
加入後就可以在每個程式碼都可以直接呼叫這個方法
注意: 這個方法是整合 AJAX 的一些錯誤事件，統一整理發送給 Toast 使用，正常來說不太建議把太多的方法掛在全域下面，會不知道這個方法來自於哪裡
可以使用 provide 來處理
如何透過 API 完成一個作品
下一個章節介紹客戶購物的部分
如何完成查看特定產品、以及加到購物車的內容裡面
選擇產品的圖片、撰寫產品的文案，並且把內容加到自行設計的介面
如何製作購物車、包含購物車列表以及表單填寫的部分

// src/components/CouponModal.vue

// src/components/Navbar.vue

// src/components/OrderModal.vue

姓名	{{ tempOrder.user.name }}
Email	{{ tempOrder.user.email }}
電話	{{ tempOrder.user.tel }}
地址	{{ tempOrder.user.address }}

訂單編號	{{ tempOrder.id }}
下單時間	{{ $filters.date(tempOrder.create_at)}}
付款時間	{{ $filters.date(tempOrder.paid_date) }} 時間不正確
付款狀態	已付款尚未付款
總金額	{{ $filters.currency(tempOrder.total) }}


{{ item.product.title }}	{{ item.qty }} / {{ item.product.unit }}	{{ $filters.currency(item.final_total) }}

// src/main.js
import { createApp } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Loading from 'vue3-loading-overlay';
import 'vue3-loading-overlay/dist/vue3-loading-overlay.css';
import App from './App.vue';
import router from './router';
import { currency, date } from './methods/filters';
import $httpMessageState from './methods/pushMessageState';

const app = createApp(App);
app.config.globalProperties.$filters = {
  currency,
  date,
};
// 此函式的用途是整合 AJAX 的錯誤事件，統一整理發送給予 Toast 處理
app.config.globalProperties.$httpMessageState = $httpMessageState;

app.use(VueAxios, axios);
app.use(router);
app.component('Loading', Loading);
app.mount('#app');

// src/methods/pushMessageState.js
import emitter from '@/methods/emitter';

export default function (response, title = '更新') {
  if (response.data.success) {
    emitter.emit('push-message', {
      style: 'success',
      title: `${title}成功`,
    });
  } else {
    // 有些訊息是字串，有些則是陣列，在此統一格式
    const message = typeof response.data.message === 'string'
      ? [response.data.message] : response.data.message;
    emitter.emit('push-message', {
      style: 'danger',
      title: `${title}失敗`,
      content: message.join('、'),
    });
  }
}

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue'),
    // 巢狀路由 - 產品列表
    children: [
      {
        path: 'products',
        component: () => import('../views/Products.vue'),
      },
      {
        path: 'orders',
        component: () => import('../views/Orders.vue'),
      },
      {
        path: 'coupons',
        component: () => import('../views/Coupons.vue'),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  linkActiveClass: 'active',
});

export default router;

// src/views/Coupons.vue

名稱	折扣百分比	到期日	是否啟用	編輯
{{ item.title }}	{{ item.percent }}%	{{ $filters.date(item.due_date) }}	啟用未起用

// src/views/Orders.vue

購買時間	Email	購買款項	應付金額	是否付款	編輯
{{ $filters.date(item.create_at) }}		{{ product.product.title }} 數量：{{ product.qty }} {{ product.product.unit }}	{{ $filters.currency(item.total) }}	已付款未付款

練習

使用測試 Web API 應用程式 Postman、 Hoppscotch 建立優惠券和訂單
Vue3_API
- POST 登入功能
- POST 新增優惠券
- GET 取得商品列表
- POST 加入購物車
- PUT 更新購物車
- POST 結帳頁面
- GET 取得訂單列表

用戶端產品列表

製作客戶購物的部分
查看 API 文件 – 客戶購物 [免驗證]
購物流程: 取得商品列表、單一商品細節、加入購物車、刪除某一筆購物車資料、套用優惠券、結帳頁面、結帳付款…等
提醒: 點選任何一個產品的時候，請用單一頁面呈現
在 index.js 路由表加上用戶端路由
新增 user 路徑，不需要驗證流程會放在 user 路徑下
建立 Userboard.vue 檔案並加入程式碼
相較於 Dashboard 較簡單
建立 UserCart.vue 檔案並加入程式碼
在 user 路徑新增子路由 cart 路徑，對應的是購物車
建立 UserProduct.vue 檔案並加入程式碼
在 user 路徑新增子路由 product/:productId 路徑，對應的是單一產品頁面
講解 UserCart.vue 檔案
methods 方法的函式，getProducts() 取得商品列表、getProduct(id) 進入單一商品的頁面
試著把用戶端商品列表呈現

// router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue'),
    // 巢狀路由 - 產品列表
    children: [
      {
        path: 'products',
        component: () => import('../views/Products.vue'),
      },
      {
        path: 'orders',
        component: () => import('../views/Orders.vue'),
      },
      {
        path: 'coupons',
        component: () => import('../views/Coupons.vue'),
      },
    ],
  },
  {
    path: '/user',
    component: () => import('../views/Userboard.vue'),
    children: [
      {
        path: 'cart',
        component: () => import('../views/UserCart.vue'),
      },
      {
        path: 'product/:productId',
        component: () => import('@/views/UserProduct.vue'),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  linkActiveClass: 'active',
});

export default router;

// views/Userboard.vue

// views/UserCart.vue

圖片	商品名稱	價格
	{{ item.title }}	{{ item.origin_price }} 元 ~~原價 {{ item.origin_price }} 元~~ 現在只要 {{ item.price }} 元

// views/UserProduct.vue

用戶端加入購物車

撰寫加入購物車的行為 api
查看客戶購物 [免驗證] 文件 > 加入購物車
在 UserCart.vue 檔案撰寫程式碼
使用 @click 方式觸發加入購物車事件、addCart 方法，把產品的 id 帶進來
在 JS methods 方法新增 addCart 方法，測試 id 有沒有正確的取出
載入 api、建立資料 product_id, qty、發送 api
資料參數格式有加入 data 屬性名稱
避免用戶重複點擊加入購物車，加入單一按鈕的讀取效果，當 loadingItem 為一個特定品項的時候按鈕會轉為 disabled 並加上讀取的狀態
調整 HTML 的部分加上
:disabled=”this.status.loadingItem === item.id”
這個屬性會因為 loadingItem 的品項跟當前 item.id 的品項相同的時候，就會把加入到購物車按鈕轉為 disabled 的狀態
針對點擊購物車後加上額外的讀取效果
在 Bootstrap 文件 > Components > Spinners，選擇放射狀的樣式加到程式碼，尺寸需要調整一下選擇最小的、調整色彩
當前品項加入判斷式，v-if=”this.status.loadingItem === item.id”
白色對比度不佳，轉換成紅色
用戶無法重複點擊，了解目前是讀取狀態
如何加入購物車、如何把特定的按鈕加上讀取的效果
試著加入購物車、特定頁面的加入購物車功能完成

// views/UserCart.vue

圖片	商品名稱	價格
	{{ item.title }}	{{ item.origin_price }} 元 ~~原價 {{ item.origin_price }} 元~~ 現在只要 {{ item.price }} 元

// views/UserProduct.vue

用戶端加入 Bootstrap Icon

製作購物車列表
提醒: api 細節，把購物車 api 打，會發現這邊的結構和先前的不太一樣，這裡是 data 裡面還有 data，主要是因為這個 data 裡面有兩個結構，一個是購物車的品項，加入非常多的項目都會存在這個 carts 裡面
在畫面的部分可以看到非常多的項目
在 Console 查詢顯示的資料， carts、final_total、total
carts、final_total, total 這兩個項目需要存下來，可以存在一個物件裡面，或者拆成兩個來另外做儲存，都是必要出現在畫面上的項目
在 UserCart.vue 檔案撰寫 getCart() 方法
this.cart = response.data.data 所有的項目都存起來，這個 cart 就包含陣列的列表以及總金額
在購物車列表就使用 v-if 判斷陣列有沒有存在，如果存在的情況下就使用 v-for 把陣列的內容完整的呈現
數量調整的功能尚未製作
使用 icon 的形式替換刪除中文字
在 Bootstrap 文件找到 Icons
安裝 Bootstrap Icons 套件
把 Bootstrap Icons 載入到 main.js 檔案
import ‘bootstrap-icons/font/bootstrap-icons.css’;
把 icons 圖示加入

// views/UserCart.vue

圖片	商品名稱	價格
	{{ item.title }}	{{ item.origin_price }} 元 ~~原價 {{ item.origin_price }} 元~~ 現在只要 {{ item.price }} 元

	品名	數量	單價
	{{ item.product.title }} 已套用優惠券	/ {{ item.product.unit }}	折扣價： {{ $filters.currency(item.final_total) }}
總計	{{ $filters.currency(cart.total) }}
折扣價	{{ $filters.currency(cart.final_total) }}

// src/main.js
import { createApp } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Loading from 'vue3-loading-overlay';
import 'vue3-loading-overlay/dist/vue3-loading-overlay.css';
import 'bootstrap-icons/font/bootstrap-icons.css';

import App from './App.vue';
import router from './router';
import { currency, date } from './methods/filters';
import $httpMessageState from './methods/pushMessageState';

const app = createApp(App);
app.config.globalProperties.$filters = {
  currency,
  date,
};
// 此函式的用途是整合 AJAX 的錯誤事件，統一整理發送給予 Toast 處理
app.config.globalProperties.$httpMessageState = $httpMessageState;

app.use(VueAxios, axios);
app.use(router);
app.component('Loading', Loading);
app.mount('#app');

用戶端更新購物車數量品項

看資料的部分
使用 Vue.js devtools 查看元件裡面的資料，購物車品項
>
在 UserCart.vue 檔案
可以看到 v-model.number=”item.qty”，item 指的是 product 品項，目前品項可以透過 input 來調整數量多寡，Vue.js devtools 的 qty 也會跟著做調整，目前 input 已經跟資料綁上
現在有個問題是調整數量的時候，是可以變為 0 或者負值的，要避免變成負值，送出才不會產生問題，在 input 必須加上最小值 min = 1，避免用戶將值調成低於 0 的狀態
看購物車的數量，當調整數量的時候，qty 數值是會跟著做改變，但是價格是不會跟著做改變，主要是因為價格是由後端所計算出，因此必須調整後端的購物車品項的數量，才會回傳新的價格
查看 API 文件更新購物車的部分，更新購物車 api 跟加入購物車很像，在更新購物車會加入購物車的 id，單一品項的 id，所傳遞的參數內容和加入購物車是一樣的
在 Vue.js devtools 購物車裡面有 id、產品的 id，這個 id 就是在購物車裡面單一品項的 id，另一個是產品的 id，因此必須把這兩個資訊傳到後端，才能計算新的金額
在程式碼數量的地方加上事件，使用 change 方法觸發更新購物車 @change=”updateCart()”，因為要傳送相關的資訊，購物車的品項 id 以及產品 id，在這個地方把 item 帶進來
在 JS 部分撰寫 updateCart() 方法
加上 api 路徑、api 方法，會使用 put 方法
組裝要傳遞的資訊，透過物件方式來進行傳遞
使用 console 測試內容有沒有確實更新，在更新購物車項目之後，可以再重新取得完整購物車的內容
避免用戶重複點擊，加上讀取的效果
this.status.loadingItem = item.id; 然後更新後清空
在 HTML 部分加上 :disabled=”item.id === status.loadingItem”

// views/UserCart.vue

圖片	商品名稱	價格
	{{ item.title }}	{{ item.origin_price }} 元 ~~原價 {{ item.origin_price }} 元~~ 現在只要 {{ item.price }} 元

	品名	數量	單價
	{{ item.product.title }} 已套用優惠券	/ {{ item.product.unit }}	折扣價： {{ $filters.currency(item.final_total) }}
總計	{{ $filters.currency(cart.total) }}
折扣價	{{ $filters.currency(cart.final_total) }}

用戶端套用優惠券

要使用優惠券的功能務必先把優惠券的後台完成，才可以套用優惠券的功能
至少先新增一個優惠券
優惠券名稱、到期日、是否啟用、折扣百分比會直接套用在購物車內的所有的品項
在購物車列表 console 看一下關於購物車的內容
購物車品項有兩個價格 total、final_total，實際上套用優惠券會把 final_total 金額重新計算，再加總到最終的總金額，品項最終會套用到 final_total 裡面重新運算
以範例講解套用優惠券試試，看一下重新取得的列表內容，cart 所更新的購物車內容 final_total 的金額成功打折，另外把優惠券相關內容加入進來，品項最終會用打折後的價格方式進行計算
試著完成優惠券功能
套用優惠券按鈕加上 addCouponCode 方法，在程式碼把 addCouponCode() 方法加入
查看 API 文件套用優惠券 api，會發送 data 內容，data 裡面有一個 code 的屬性就是優惠券的名稱，優惠券名稱放在這個地方送出就可以了
api 路徑、建立資料結構、this.$http.post 方法把 url 以及 coupon 內容帶進來，包在 data 的屬性下並且把上面的 coupon 帶進來，加上 then 回傳結果，然後重新取得購物車內容，把金額更新
加入購物車，重新整理後購物車列表就會新增一個品項
套用優惠券，查看 console、折扣相關訊息呈現在畫面
製作 Coupon 也可以把讀取的效果還有相關的回應加上
試著製作刪除的功能

// views/UserCart.vue

圖片	商品名稱	價格
	{{ item.title }}	{{ item.origin_price }} 元 ~~原價 {{ item.origin_price }} 元~~ 現在只要 {{ item.price }} 元

	品名	數量	單價
	{{ item.product.title }} 已套用優惠券	/ {{ item.product.unit }}	折扣價： {{ $filters.currency(item.final_total) }}
總計	{{ $filters.currency(cart.total) }}
折扣價	{{ $filters.currency(cart.final_total) }}

用戶端建立訂單

購物車已經有部分的品項
製作結帳的部分
建立結帳表單結構
安裝、套用 VeeValidate
npm i vee-validate @vee-validate/rules @vee-validate/i18n –save
注意: import * as AllRules from ‘@vee-validate/rules’;
查看購物車 api 的部分，使用結帳頁面的 api
結帳頁面 [參數] – data、message，建立表單的時候結構要注意
在 UserCart.vue 檔案建立結構是使用 form 物件包著 user 以及 message 區塊
建立訂單在標籤加上 @submit 行為觸發強制驗證，使用 createOrder 方法
在程式碼 methods 方法加上 createOrder 方法，把 createOrder 加到 message 裡面，把 @submit 加在標籤上的好處是當送出表單的時候會強制先進行驗證，除非內容都符合資格，否則表但不會送出
在 createOrder 可以先把 api 的網址建立起來
建立表單的結構
使用 this.$http.post 方法，帶上 url 路徑、使用物件把 data 屬性帶上 order 的方式把表單內容送出
使用 console 查看回應有沒有正確
送出訂單要先確定購物車裡面是有品項，再把下面的內容填寫，送出表單查看回應的結果

// src/main.js
import { createApp } from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import Loading from 'vue3-loading-overlay';
import 'vue3-loading-overlay/dist/vue3-loading-overlay.css';
import 'bootstrap-icons/font/bootstrap-icons.css';
import {
  Form, Field, ErrorMessage, defineRule, configure,
} from 'vee-validate';
// import AllRules from '@vee-validate/rules'; // 會產生錯誤
import * as AllRules from '@vee-validate/rules';
import { localize, setLocale } from '@vee-validate/i18n';
import zhTW from '@vee-validate/i18n/dist/locale/zh_TW.json';

import App from './App.vue';
import router from './router';
import { currency, date } from './methods/filters';
import $httpMessageState from './methods/pushMessageState';

const app = createApp(App);
app.config.globalProperties.$filters = {
  currency,
  date,
};

Object.keys(AllRules).forEach((rule) => {
  defineRule(rule, AllRules[rule]);
});

configure({
  generateMessage: localize({ zh_TW: zhTW }), // 載入繁體中文語系
  validateOnInput: true, // 當輸入任何內容直接進行驗證
});
// 設定預設語系
setLocale('zh_TW');

// 此函式的用途是整合 AJAX 的錯誤事件，統一整理發送給予 Toast 處理
app.config.globalProperties.$httpMessageState = $httpMessageState;

app.use(VueAxios, axios);
app.use(router);
app.component('Loading', Loading);
app.component('Form', Form);
app.component('Field', Field);
app.component('ErrorMessage', ErrorMessage);
app.mount('#app');

// views/UserCart.vue

圖片	商品名稱	價格
	{{ item.title }}	{{ item.origin_price }} 元 ~~原價 {{ item.origin_price }} 元~~ 現在只要 {{ item.price }} 元

	品名	數量	單價
	{{ item.product.title }} 已套用優惠券	/ {{ item.product.unit }}	折扣價： {{ $filters.currency(item.final_total) }}
總計	{{ $filters.currency(cart.total) }}
折扣價	{{ $filters.currency(cart.final_total) }}

用戶端結帳流程

建立新的一筆訂單，並填好用戶表端資料，預期在送出訂單之後會產一個 orderId，複製 orderId 的值等下使用，送出訂單之後預期會轉只到另外一個頁面，checkout 路由下的頁面，讓用戶確認產品還有表單內容是否正確，再進行結帳的流程，現在的流程是必須先把 checkout 加上再讓用戶進行結帳
新增 UserCheckout.vue 檔案撰寫程式碼
完成 checkout 頁面，上方是產品的內容，在購物車裡面的品項，下方是用戶自己所填的細節，會透過 orderId 把資訊取回來
著重在 JS 的部分
在 index.js 檔案加上子路由 checkout/:orderId，orderId 作用是取回原本同一筆訂單使用的
直接使用網址路徑進入用戶端結帳頁面
查看 API 文件取得某一筆訂單，透過 orderId 取得相同一筆訂單內容
必須先把路由上面的 id 取出來，在 data() 資料定義 orderId，在 created() 生命週期撰寫 this.orderId = this.$route.params.orderId 把 orderId 取出
使用 console 查看，orderId 是從網址列所取得
加上 this.getOrder() 方法，會觸發 methods 裡面的 getOrder()，會透過 getOrder 取得需要的相關內容
在 getOrder() 方法撰寫取得某一筆訂單
api 路徑取得特定訂單的內容、使用 this.$http.get 方法取得這筆訂單內容
使用 console 是否有正確取得
將相關的內容呈現在畫面上
製作確認付款去的行為
先看 order 包含什麼資訊，新增品項的時間、id、總金額、is_paid 屬性，is_paid 是用戶是否已經付款，is_paid只能由後端進行調整
用戶觸發結帳付款 api，觸發之後就會把 is_paid 的 false 改為 true
結帳付款 api 主要的重點在 orderId，會透過 orderId 搭配前一個 pay api 將這筆訂單的 is_paid 改為 true
針對這筆訂單進行付款
在表單加上 payOrder 方法，當用戶按下按鈕或是送出表單的時候，就會觸發 payOrder 行為
撰寫 payOrder() 方法
url 路徑、使用 this.$http.post 方法將這筆訂單進行付款，發出請求後會使用 then 接收回傳
將這筆訂單完成之後就不能再次使用，重整再重新取得訂單的項目，再重新觸發一次 getOrder 行為
按下確認付款去之後，會觸發一個行為，會出現付款已經完成，在畫面上付款狀態會改成付款完成，確認付款去按鈕就會隱藏
查看 console 關於 this.order 這筆訂單的資訊 is_paid 會改為 true 的狀態，並且增加 paid_date 屬性，紀錄用戶在哪一個時間點進行付款

// views/UserCheckout.vue

品名	數量	單價
{{ item.product.title }}	{{ item.qty }}/{{ item.product.unit }}	{{ item.final_total }}
總計	{{ order.total }}

Email	{{ order.user.email }}
姓名	{{ order.user.name }}
收件人電話	{{ order.user.tel }}
收件人地址	{{ order.user.address }}
付款狀態	尚未付款付款完成

// src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/dashboard',
    component: () => import('../views/Dashboard.vue'),
    // 巢狀路由 - 產品列表
    children: [
      {
        path: 'products',
        component: () => import('../views/Products.vue'),
      },
      {
        path: 'orders',
        component: () => import('../views/Orders.vue'),
      },
      {
        path: 'coupons',
        component: () => import('../views/Coupons.vue'),
      },
    ],
  },
  {
    path: '/user',
    component: () => import('../views/Userboard.vue'),
    children: [
      {
        path: 'cart',
        component: () => import('../views/UserCart.vue'),
      },
      {
        path: 'product/:productId',
        component: () => import('@/views/UserProduct.vue'),
      },
      {
        path: 'checkout/:orderId',
        component: () => import('../views/UserCheckout.vue'),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  linkActiveClass: 'active',
});

export default router;

最終作業說明

最終作業繳交說明

一般練習

僅檢視原始碼
僅需完成課程基本條件
僅需要完成桌面版

求職作品

檢視畫面設計及原始碼
除了課程 API 需增加自己創意在內
行動版、桌面版皆需製作
已正式上線為目標
退件率高
請標示作為求職作品使用

作品製作建議

先決定主題

搜集素材
確認主題製作可行性
定義產品資訊
構思技術小巧思 (我的最愛、抽獎、地圖功能、倒數優惠…)
開始執行

素材資源

你的用心，會讓作品更加耀眼

盡可能避免的錯誤

缺少文案、作品不完整
沒有對齊、畫面跑版
使用者體驗的問題: 例如購物車為空時，避免讓用戶進入下一步
行動版無法運作

不知如何下手嗎

萬丈高樓平地起，規劃優於一切

先參考學長姐的作品
從搜集資料開始，規劃網站的文案、產品、各種小巧思
先製作版型，將流程一一的順好
將功能一一套上版型
最後修正，提交作業

最終作業提交規則文件

最終作業提交 – 程式勇者村

Vue3 複習08

gee.hsu — Wed, 20 Mar 2024 10:02:00 +0000

Vue Router

本章節以後 “發問的重要說明”

由於本章節以後，問題相對會複雜很多，很難從單一片段了解問題點。

如：部分程式碼無法運作，實際卻是其它片段的大小寫錯誤

所以本章節以後，為了加速回覆同學們問題的效率，請上傳完整程式碼至 Github 或個人雲端空間（不需要包含 node_modules），好讓我可以運行完整環境來仔細檢視喔。

如果僅上傳部分程式碼或程式碼的截圖，還是會要求重新上傳完整程式碼再行回覆，也感謝同學們的配合

Vue Router 簡介

關於路由 (MVC 概念)

後端路由在頁面上呈現的狀態

傳統後端路由: https://www.hexschool.com//user

前端路由在頁面上顯示的狀態

前端路由: https://www.hexschool.com/#/user

專案中的概念

前端路由: https://www.hexschool.com/#/user
前端路由: https://www.hexschool.com/#/products

路由表
‘/user’ > User.vue
‘/products’ > Products.vue

User.vue
Products.vue

Vue Router 開發流程

準備流程:

引入 Vue Router 環境
定義元件
定義路由表
加入對應連結

Vue Router 相關資源

注意：Vue 3 搭配的 Router 版本在網址中會有 “next” 的字樣，如：router.vuejs.org 則是 Vue 2 版本的路由

本章節的所有操作紀錄範例

盡可能自己完成本章節的操作。

如果需要參考時，請注意 git 排序是逆向的，也可依據 Commit 名稱尋找，找到後可直接透過 hash 文字打開該章節所調整的片段

在一般網頁中引入 Vue Router

// HTML

  路由示範
  {{ text }}
  a |
  b

// JS

Vue Cli 中使用 Vue Router 開發

使用 vue create vue_router_record
Please pick a preset: Manually select features
Check the features needed for your project: Choose Vue versin, Babel, Router, CSS Pre-processors, Linter
Choose a version of Vue.js that you want to start the project with 3.x (Preview)
Use history mode for router? (Requires proper server setup for index fallback in production) No
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
Pick a linter / formatter config: Airbnb
Pick additional lint features: Lint on save
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
Save this as a preset for future projects? N
運行專案 – npm run serve

講解

Vue Cli 版本和 HTML 開發哪裡不一樣

router/index.js 檔案
main.js 檔案
App.vue 檔案
– 主要的頁面切換
– 用戶頁面連結點擊使用
views 資料夾 – 主要頁面的設定
components 資料夾 – 相對比較小的元件

// src/router/index.js
// 匯入 vue-router 資源
import { createRouter, createWebHashHistory } from 'vue-router';
// 匯入獨立元件
import Home from '../views/Home.vue';

// 路由表
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
];

// router 結構
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 匯出
export default router;

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

// src/App.vue

新增元件和路由

新增一個元件加到畫面上
新增 views/NewPage.vue
原則: 先建立元件再加入路由
打開 router/index.js 檔案
在路由表新增物件內容
把頁面的連結加到畫面上
在 App.vue 檔案加入新的
使用另外一種寫法加入連結，改用動態屬性的方式把連結加入

// views/NewPage.vue

// router/index.js
// 匯入 vue-router 資源
import { createRouter, createWebHashHistory } from 'vue-router';
// 匯入獨立元件
import Home from '../views/Home.vue';

// 路由表
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
  },
];

// router 結構
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 匯出
export default router;

// src/App.vue

中場: 為目前專案加入樣式

在 public/index.html 加入 Bootstrap 5 CSS CDN
在 App.vue 檔案調整 router-link，加入 navbar 的樣式
選擇相對簡單的樣式，直接複製貼到 App.vue 檔案
把 router-link 加進來，並調整 class 樣式
router-view 外層加上 .container 樣式

// public/index.html


  
    
    
    
    
    
    <%= htmlWebpackPlugin.options.title %>

// src/App.vue

巢狀路由

App.vue CSS 樣式移除
建立兩個元件 – ComponentA、ComponentB
建立的元件放在 views 資料夾
加入路由 – 在 router/index.js 檔案
要加入子項目會在 newpage 的下方加入 children 陣列形式，然後加上物件內容
修改 NewPage.vue 檔案
補上左側的選單 – Bootstrap > List Group > Links and buttons
複製程式碼貼到 NewPage.vue 選單的地方
把連結改成標籤、加上路徑

// views/ComponentA.vue

// views/ComponentB.vue

// router/index.js
// 匯入 vue-router 資源
import { createRouter, createWebHashHistory } from 'vue-router';
// 匯入獨立元件
import Home from '../views/Home.vue';

// 路由表
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
    children: [
      {
        // 子項目的路徑不用加上/
        path: 'a',
        component: () => import('../views/ComponentA.vue'),
      },
      {
        path: 'b',
        component: () => import('../views/ComponentB.vue'),
      },
    ],
  },
];

// router 結構
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 匯出
export default router;

// views/NewPage.vue

一個元件插入多個視圖 – 具名視圖

新增元件 C
新增元件 NamedView
加入兩個 router-view
打開 router/index.js 檔案
路由表新增新的物件內容
在路由 namedView 新增 children 子路由
在 children 陣列加入其他子路由項目(c2a、a2b)
因為有兩個視圖(router-view)，所以必須載入兩個元件
components 有加上s，因為要載入多個元件，以物件的形式把它帶進來
把具名視圖(命名視圖)路徑加到左側的選單

// views/ComponentC.vue

// views/NamedView.vue

// router/index.js
// 匯入 vue-router 資源
import { createRouter, createWebHashHistory } from 'vue-router';
// 匯入獨立元件
import Home from '../views/Home.vue';

// 路由表
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
    children: [
      {
        // 子項目的路徑不用加上/
        path: 'a',
        component: () => import('../views/ComponentA.vue'),
      },
      {
        path: 'b',
        component: () => import('../views/ComponentB.vue'),
      },
      // 具名視圖(命名視圖)
      {
        path: 'namedview',
        component: () => import('../views/NamedView.vue'),
        children: [
          {
            path: 'c2a',
            // 載入多個元件
            components: {
              // 命名視圖使用名稱就是物件所使用的名稱
              left: () => import('../views/ComponentC.vue'),
              right: () => import('../views/ComponentA.vue'),
            },
          },
          {
            path: 'a2b',
            components: {
              left: () => import('../views/ComponentA.vue'),
              right: () => import('../views/ComponentB.vue'),
            },
          },
        ],
      },
    ],
  },
];

// router 結構
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 匯出
export default router;

// views/NewPage.vue

透過參數決定路由內容 – 動態路由

安裝 axios 套件 – npm install axios
新增 DynamicRouter 元件 – views/DynamicRouter.vue
重新運行 npm run serve

DynamicRouter 檔案主要會用到

// router/index.js
// 匯入 vue-router 資源
import { createRouter, createWebHashHistory } from 'vue-router';
// 匯入獨立元件
import Home from '../views/Home.vue';

// 路由表
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
    children: [
      {
        // 子項目的路徑不用加上/
        path: 'a',
        component: () => import('../views/ComponentA.vue'),
      },
      {
        path: 'b',
        component: () => import('../views/ComponentB.vue'),
      },
      // 參數 - 動態路由
      {
        path: 'dynamicrouter/:id',
        component: () => import('../views/DynamicRouter.vue'),
      },
      // 具名視圖(命名視圖)
      {
        path: 'namedview',
        component: () => import('../views/NamedView.vue'),
        children: [
          {
            path: 'c2a',
            // 載入多個元件
            components: {
              // 命名視圖使用名稱就是物件所使用的名稱
              left: () => import('../views/ComponentC.vue'),
              right: () => import('../views/ComponentA.vue'),
            },
          },
          {
            path: 'a2b',
            components: {
              left: () => import('../views/ComponentA.vue'),
              right: () => import('../views/ComponentB.vue'),
            },
          },
        ],
      },
    ],
  },
];

// router 結構
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 匯出
export default router;

Compile-Time Flags / vue-cli

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
  }
}

動態路由搭配 Props

Random User 網站

打開 DynamicRouter.vue 檔案
直接另存新檔 DynamicRouterByProps.vue
開啟 router/index.js 檔案
複製參數 – 動態路由的物件，並把對應的檔案調整
在網址列貼上新的路徑
http://localhost:8080/#/newpage/dynamicrouterbyprops/b9039789d7d5a209
在 router/index.js 檔案
在動態路由搭配 Props 物件裡面新增一個屬性 props
加上 id: seed 字串
在 DynamicRouterByProps.vue 檔案
做程式碼修改
新增 props 屬性，props 所取得的是 router/index.js 路由表所定義的 props 的 id
console 改成直接取得 props 的 id 內容
console.log(‘props’, this.id);
在 router/index.js 檔案
id 要改成使用動態路由的方式帶過來
調整程式碼 props 的地方，改成大括號直接 return 結果

// 4. 在 router/index.js 檔案
props: () => ({
  // id: seed 字串
  id: 'b9039789d7d5a209',
}),

// 6. 在 router/index.js 檔案
props: (route) => {
  console.log('route:', route);
  return {
    id: route.params.id,
  };
},

// views/DynamicRouterByProps.vue

// router/index.js
// 匯入 vue-router 資源
import { createRouter, createWebHashHistory } from 'vue-router';
// 匯入獨立元件
import Home from '../views/Home.vue';

// 路由表
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
    children: [
      {
        // 子項目的路徑不用加上/
        path: 'a',
        component: () => import('../views/ComponentA.vue'),
      },
      {
        path: 'b',
        component: () => import('../views/ComponentB.vue'),
      },
      // 參數 - 動態路由
      {
        path: 'dynamicrouter/:id',
        component: () => import('../views/DynamicRouter.vue'),
      },
      // 動態路由搭配 Props
      {
        path: 'dynamicrouterbyprops/:id',
        component: () => import('../views/DynamicRouterByProps.vue'),
        props: (route) => {
          console.log('route:', route);
          return {
            id: route.params.id,
          };
        },
      },
      // 具名視圖(命名視圖)
      {
        path: 'namedview',
        component: () => import('../views/NamedView.vue'),
        children: [
          {
            path: 'c2a',
            // 載入多個元件
            components: {
              // 命名視圖使用名稱就是物件所使用的名稱
              left: () => import('../views/ComponentC.vue'),
              right: () => import('../views/ComponentA.vue'),
            },
          },
          {
            path: 'a2b',
            components: {
              left: () => import('../views/ComponentA.vue'),
              right: () => import('../views/ComponentB.vue'),
            },
          },
        ],
      },
    ],
  },
];

// router 結構
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 匯出
export default router;

路由方法介紹

使用 Options API 來操作路由

路由方法、路由屬性

新增 RouterNavigation.vue 檔案、調整 router/index.js 檔案、調整 views/NewPage.vue 檔案
getRoute 取得屬性以及方法
- $route – 取得目前在這個路由下有哪些的資訊
  fullPath、params、
  http://localhost:8080/#/newpage/routerNavigation?search=123
- $router – 這個路由下可以使用的方法
  常見方法切換頁面: push、replace
push
replace
go
addRoute

// 1. views/RouterNavigation.vue

// 1. router/index.js
// 匯入 vue-router 資源
import { createRouter, createWebHashHistory } from 'vue-router';
// 匯入獨立元件
import Home from '../views/Home.vue';

// 路由表
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
    children: [
      {
        // 子項目的路徑不用加上/
        path: 'a',
        component: () => import('../views/ComponentA.vue'),
      },
      {
        path: 'b',
        component: () => import('../views/ComponentB.vue'),
      },
      // 參數 - 動態路由
      {
        path: 'dynamicrouter/:id',
        component: () => import('../views/DynamicRouter.vue'),
      },
      // 動態路由搭配 Props
      {
        path: 'dynamicrouterbyprops/:id',
        component: () => import('../views/DynamicRouterByProps.vue'),
        props: (route) => {
          console.log('route:', route);
          return {
            id: route.params.id,
          };
        },
      },
      {
        path: 'routernavigation',
        component: () => import('../views/RouterNavigation.vue'),
      },
      // 具名視圖(命名視圖)
      {
        path: 'namedview',
        component: () => import('../views/NamedView.vue'),
        children: [
          {
            path: 'c2a',
            // 載入多個元件
            components: {
              // 命名視圖使用名稱就是物件所使用的名稱
              left: () => import('../views/ComponentC.vue'),
              right: () => import('../views/ComponentA.vue'),
            },
          },
          {
            path: 'a2b',
            components: {
              left: () => import('../views/ComponentA.vue'),
              right: () => import('../views/ComponentB.vue'),
            },
          },
        ],
      },
    ],
  },
];

// router 結構
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 匯出
export default router;

// 1. views/NewPage.vue

// views/RouterNavigation.vue

預設路徑以及重新導向

重新導向說明

新增 NotFound.vue 檔案
在 router/index.js 檔案
製作404頁面以及重新導向
404頁面提供一個頁面資訊給用戶了解到他現在進入到錯誤的路由，可以如何回到正確的路由下
重新導向直接把用戶導到一個正確的頁面

// views/NotFound.vue

// router/index.js
// 匯入 vue-router 資源
import { createRouter, createWebHashHistory } from 'vue-router';
// 匯入獨立元件
import Home from '../views/Home.vue';

// 路由表
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
    children: [
      {
        // 子項目的路徑不用加上/
        path: 'a',
        component: () => import('../views/ComponentA.vue'),
      },
      {
        path: 'b',
        component: () => import('../views/ComponentB.vue'),
      },
      // 參數 - 動態路由
      {
        path: 'dynamicrouter/:id',
        component: () => import('../views/DynamicRouter.vue'),
      },
      // 動態路由搭配 Props
      {
        path: 'dynamicrouterbyprops/:id',
        component: () => import('../views/DynamicRouterByProps.vue'),
        props: (route) => {
          console.log('route:', route);
          return {
            id: route.params.id,
          };
        },
      },
      {
        path: 'routernavigation',
        component: () => import('../views/RouterNavigation.vue'),
      },
      // 具名視圖(命名視圖)
      {
        path: 'namedview',
        component: () => import('../views/NamedView.vue'),
        children: [
          {
            path: 'c2a',
            // 載入多個元件
            components: {
              // 命名視圖使用名稱就是物件所使用的名稱
              left: () => import('../views/ComponentC.vue'),
              right: () => import('../views/ComponentA.vue'),
            },
          },
          {
            path: 'a2b',
            components: {
              left: () => import('../views/ComponentA.vue'),
              right: () => import('../views/ComponentB.vue'),
            },
          },
        ],
      },
    ],
  },
  // 404 頁面
  {
    path: '/:pathMatch(.*)*',
    component: () => import('../views/NotFound.vue'),
  },
  // 重新導向
  {
    path: '/newPage/:pathMatch(.*)*',
    redirect: {
      name: 'Home',
    },
  },
];

// router 結構
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 匯出
export default router;

路由設定選項

路由選項

在 App.vue 檔案程式碼調整
調整 Navbar固定在最上方、調整網頁的高度、在最下方增加一個 router-link
查看 Vue Router 文件
VueRouter > RouterOptions
linkActiveClass
scrollBehavior

// App.vue

// router/index.js
// 匯入 vue-router 資源
import { createRouter, createWebHashHistory } from 'vue-router';
// 匯入獨立元件
import Home from '../views/Home.vue';

// 路由表
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '/newpage',
    name: '新增頁面',
    component: () => import('../views/NewPage.vue'),
    children: [
      {
        // 子項目的路徑不用加上/
        path: 'a',
        component: () => import('../views/ComponentA.vue'),
      },
      {
        path: 'b',
        component: () => import('../views/ComponentB.vue'),
      },
      // 參數 - 動態路由
      {
        path: 'dynamicrouter/:id',
        component: () => import('../views/DynamicRouter.vue'),
      },
      // 動態路由搭配 Props
      {
        path: 'dynamicrouterbyprops/:id',
        component: () => import('../views/DynamicRouterByProps.vue'),
        props: (route) => {
          console.log('route:', route);
          return {
            id: route.params.id,
          };
        },
      },
      {
        path: 'routernavigation',
        component: () => import('../views/RouterNavigation.vue'),
      },
      // 具名視圖(命名視圖)
      {
        path: 'namedview',
        component: () => import('../views/NamedView.vue'),
        children: [
          {
            path: 'c2a',
            // 載入多個元件
            components: {
              // 命名視圖使用名稱就是物件所使用的名稱
              left: () => import('../views/ComponentC.vue'),
              right: () => import('../views/ComponentA.vue'),
            },
          },
          {
            path: 'a2b',
            components: {
              left: () => import('../views/ComponentA.vue'),
              right: () => import('../views/ComponentB.vue'),
            },
          },
        ],
      },
    ],
  },
  // 404 頁面
  {
    path: '/:pathMatch(.*)*',
    component: () => import('../views/NotFound.vue'),
  },
  // 重新導向
  {
    path: '/newPage/:pathMatch(.*)*',
    redirect: {
      name: 'Home',
    },
  },
];

// router 結構
const router = createRouter({
  history: createWebHashHistory(),
  routes,
  linkActiveClass: 'active',
  scrollBehavior(to, from, savedPosition) {
    console.log(to, from, savedPosition);
    // `to` and `from` are both route locations
    // `savedPosition` can be null if there isn't one
    if (to.fullPath.match('newpage')) {
      return {
        top: 0,
      };
    }
    return {};
  },
});

// 匯出
export default router;

Vue3 複習07

gee.hsu — Mon, 18 Mar 2024 06:22:00 +0000

Vue Cli，整合性工具開發好容易

Vue Cli 介紹

為什麼要用 Vue Cli

前端開發日趨複雜，每個開發者習慣亦有很大不同，因此整合性的工具可減少彼此開發上的差異。
編譯環境越來越複雜，缺乏整合工具將會在每次專案都耗去大量時間。
前後端分離形成主流，單頁式應用程式更符合開發習慣。
套件引用越來越多，導致難以管理。

Vue Cli 是什麼

基於 Webpack 所建置的開發工具
便於使用各種第三方套件 (BS4, Vue Router…)
可運行 Sass, Babel 等編譯工具
獨特 .vue 檔案，一次包含 html, js, css
便於開發 SPA 的網頁工具

基於 Webpack 開發的 Vue Cli

整合了哪些開發環境?

編譯各種語言使其可在瀏覽器上運行

程式碼品質檢視導入確保協作一致性

獨特 .vue 檔案開發 Vue 元件更為容易

關於 .vue 檔案

單一檔案同時包含 html, css, js 元件開發更一目了然

SPA 又是什麼?

原文為 single-page application，稱為單頁式應用程式

傳統的路由概念

傳統後端路由 https://www.hexschool.com/user

SPA 的優點

前端路由 https://www.hexschool.com/#/user

實現前後端分離

SPA 的優點

前端路由 https://www.hexschool.com/#/order

關於 Cli

原文為 Command-Line Interface，簡單來說就是命令列介面

Vue 同時提供 GUI 的介面

原文為 Graphical User Interface，簡單來說就是圖形使用者介面

減少許多指令的記憶
定義設定檔案
進行狀態輕鬆檢視

讓我們來開始使用 Vue Cli 吧

準備流程:

安裝 Node.js
安裝 Vue Cli 全域環境
建立 Vue 專案
開始開發!

Vue Cli 章節資源

安裝 Node.js

參考 Gulp 課程，安裝流程的部分均可直接預覽(1-3, 1-4)

Nodejs 官方網站連結

Vue Cli

英文、中文

Vue Cli 4.x 同時可建立 Vue 2.x 及 Vue 3.x 的環境，無論你是要開發 2 or 3 都僅需要安裝當前版本的 Vue Cli 即可。

其他相關連結

以下為課程中會用到的相關連結

Vue Router、Axios、Vue Axios

課程中運用到的指令

建立專案 vue create {{ 專案名稱 }}

運行 Vue 開發環境 npm run serve

編譯 Production 版本 npm run build

CLI 常用指令

通用指令(Mac, Windows 共用)

Nodejs 版本

node -v

npm 版本

npm -v

Windows 指令

回到資料夾頂端 cd\\

回到上一層 cd..

進入資料夾路徑 cd {{ 資料夾路徑 }}

中斷目前操作 ctrl + c

Mac OS 指令

回到資料夾頂端 cd \\

回到上一層 cd ..

進入資料夾路徑 cd {{ 資料夾路徑 }}

中斷目前操作 ctrl + c

安裝 Vue Cli 環境

Vue Cli

// 終端機
// 全域環境
// node.js 是運行環境
node -v
// npm 是套件的管理工具
npm -v
// 安裝 Vue Cli
npm install -g @vue/cli
// 查詢 Vue Cli 版本
vue -V

建立專案

移動到指定資料夾位置
cd {{ 資料夾路徑 }}
創建一個項目 vue create
vue create new-project
Please pick a preset: (Use arrow Keys)
Manually select features
Check the features needed for your project: Choose Vue version, Babel, Router, CSS Pre-processors, Linter
Choose a version of Vue.js that you want to start the project with 3.x (Preview)
Use history mode for router? (Requires proper server setup for index fallback in production) No
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
Pick a linter / formatter config: Airbnb
Pick additional lint features: Lint on save
Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
Save this as a preset for future projects? (y/N) n

打開專案

使用 VSCode 開啟專案
Ctrl + ` 打開終端機
使用 npm run serve 運行環境
點擊連結開啟網頁

// 常用 NVM 指令
// 常見指令:
// nvm ls-remote: 列出目前可用的遠端 Node.js 版本
// nvm install: 安裝特定版本的 Node.js
// nvm ls: 列出本地端所安裝的 Node.js 環境
// nvm alias default node: 設定命令列預設開啟的 Node.js 版本
// nvm use: 當前命令列套用特定版本的 Node.js

Vue Cli 環境中的檔案說明

從下往上說明

README.md – 介紹的檔案
package.json – 專案的配置檔案
- “scripts” – 指令
  執行指令，npm run serve、”serve” 滑鼠點擊 Run Script
package-lock.json – 實際安裝的套件版本以及相關描述
babel.config.js – babel 設定檔案
.gitignore – 在 git 忽略的檔案
.eslintrc.js – eslint 設定檔案
依據選擇把設定檔以及延伸的規則載入
.editorconfig – 編輯器設定檔
.browserslistrc – 預期要支援的版本
src – 在這個專案中最重要的一個資料夾
- main.js – 整個專案的進入點
App.vue – 在 main.js 第一個生成的主要元件
通常只是做簡單的配置
views – 主要的頁面會放在這個資料夾內
router – 路由表放在 router 資料夾 index.js 檔案裡面
components – 掛載的子元件會放在 components 資料夾內
assets – 相關的一些其他資產
例如: 比較小的圖片、CSS、JS 檔案都可以放在這個資料夾內
public – 原則上是跟進入點沒有相關聯的檔案、不需要編譯的檔案
index.html，主要在 Vue 的元件生成之後要掛載在一個實體的頁面上所需要的檔案 (在 public 資料夾內唯一會編譯的檔案)
比較大的圖片或其他資源也可以放在 public 資料夾內
node_modules – 運行所需要的延伸套件
依據 package.json 檔案所列的清單安裝

指令太麻煩，來試試看 GUI 吧

建立專案

指令 vue ui
在 Vue 專案管理器按下新增
選擇專案路徑
在此新增專案
新增新專案
- 專案資料夾 gui-demo
- 包管理器 npm
- Git 倉庫初始化 git 倉庫(建議)
模板
選擇一套模板 – 手動
功能
Choose Vue version、Babel、Router、CSS Pre-processors、Linter / Formatter
設定
- Choose a version of Vue.js that you want to start the project with – 3.x (Preview)
- Use history mode for router? (Requires proper server setup for index fallback in production) – No
- Pick a CSS pr-processor: Sass/SCSS (with node-sass)
- Pick a linter / formatter config: ESLint + Airbnb config
- Pick additional lint features: Lint on save
保存為新模板 – 新增專案，不保存預設

專案控制台

插件 – 加入新的 Vue CLI 插件
依賴 – 是用來管理包 (package)
設定 – 可以設定工具
任務 – 可以執行腳本 (例如 webpack)
serve 編譯和熱更新 (用於開發環境)
build 編譯並壓縮 (用於生產環境)

如何在 Cli 環境中加入 Vue 元件

在 components 資料夾內新增一個檔案 Card.vue
命名通常會使用開頭字母大寫的形式
使用

{{ i + 1 }}	{{ item.name }}
{{ i + 1 }}	{{ item.price }}元	{{ item.vegan ? "素食" : "不可素食" }}

x		{{ item.product.title }}		$ {{ item.subtotal }}
總金額 NT$ {{cartList.total}}

六角學院 – wordpress_blog

Vue3 複習10

從頭開始 – Pinia 製作一個購物車 2023 新增章節

Pinia 相關資源

01. pinia 簡介

元件資料獨立與傳遞

頁面元件結構

Pinia 好處

02. 專案簡介

03. 版型製作

完成版型製作

好吃的餅乾 $900

04. 轉換vue元件

完成版型製作

好吃的餅乾 $900

05. 導入產品資料

{{ product.title }} $ {{ product.price }}

06. 建立 store

完成版型製作

{{ product.title }} $ {{ product.price }}

07. 建立購物車 Store

{{ product.title }} $ {{ product.price }}

08. 購物車資訊 Store

09. 呈現購物車列表並刪除品項

10. 新增品項加總至原品項

11. 設定數量

12. Navbar 數量呈現

Vue3 複習09

最終挑戰

最終作業課程介紹

課程目標

電商網站操作流程

開發的架構說明

學習面向

API 說明

API 文件

課程 API 文件及相關資源

申請課程 API

流程說明:

複習 Vue Cli 建立環境

API 路徑加到環境變數

常見 API 問題解決方式

路徑與方法是一對的

從錯誤訊息中尋找問題

遇到錯誤無法解決

匯入 Bootstrap 並調整版型

製作登入頁面

登入與 Cookie

請先登入

Cookie 存取的語法

確認是否維持登入狀態

請先登入

調整巢狀路由並且加入 Navbar

請先登入

導航守衛

請先登入

加入產品列表

增加 Bootstrap Modal

透過彈出視窗新增品項

產品資料更新

透過 API 上傳圖片

使用 mixin 整合相同程式碼

加入讀取的視覺效果

加入錯誤的訊息回饋

加入分頁切換

套用全域的千分號

中場加速

練習

用戶端產品列表

{{ product.title }}

用戶端加入購物車

{{ product.title }}

用戶端加入 Bootstrap Icon

用戶端更新購物車數量品項

用戶端套用優惠券

用戶端建立訂單

用戶端結帳流程

最終作業說明

最終作業繳交說明

一般練習