{%hackmd @themes/orangeheart %}
# **商品介紹與商品詳情**

## 商品介紹

### <font color="3E54AC"> **使用到的技術**
:computer: PageHelper
</font>

>這個區塊會展示所有商城內的商品，但是如果一次展示全部商品會造成伺服器壓力過大，響應的速度也會因為資料量過大而非常緩慢。
>所以在這邊使用==PageHelper==來做分頁查詢，並使用Element UI進行按鍵美化

### :question:為什麼要使用PageHelper:question:
1. 用limit語法必須自己計算分頁，PageHelper可以自動幫我們實現分頁
2. 一次查詢所有數據，伺服器壓力大，分頁壓力小
3. 一次顯示所有資料，客戶端加載時間長，需要更多流量
4. 最符合的訊息顯示在前幾頁，方便用戶記憶與使用，使用率低的放後面，用不到就不用搜尋

## 商品詳情

>用戶可以在這個區塊檢視商品詳細資料，並且下單加入購物車。
>購買數量有進行表單驗證，如果沒有選擇購買數量或是購買數量**大於**剩餘數量，都會出現提醒。

###### tags: `java`