---
# System prepended metadata

title: 好書客 首頁（前端）

---

# 好書客 首頁（前端）

設計稿：[線上看設計稿與規格](https://wireframepro.mockflow.com/view/Mff84cd85f3c7975e0bbb626e8cafd5ae1532503672412#/page/b1289da0c2ab4553b3c51f2a10352b02)

Tips: **線上設計稿的右方有一個 SPECS 頁籤，點擊 SPECS 後再到設計稿上挑選組件，可以檢視每個組件的 CSS 規格。**

# 操作流程 

#### 熱門書籍列表
   - 進入【首頁】
   - 自動載入熱門書籍

#### 搜尋書籍
   - 點選【搜尋放大鏡】
   - 檢查搜尋框是否為空值
   - 送出「搜尋書籍表單」

![](https://i.imgur.com/QIhaZXe.png)

## UI 邏輯
  - 點擊搜尋按鈕框，將「搜尋表單」送至 base\_url() + book/search
    - Controller: Book->search
    - View: book/search\_result
  - 載入頁面時，發送 Ajax 至 base\_url() + book/ajax\_hot\_books 撈取最熱門 15 筆資料
     - Controller：Book->ajax\_hot\_books()
  - 收到 Ajax 取到的資料後，將書籍資料渲染在頁面中。


## UI 控件用途說明

搜尋表單欄位：
![](https://i.imgur.com/tLPbFUc.png)


## 素材區：
Banner:
![](https://i.imgur.com/sfvmaUD.jpg)
