Dummy Project - 社群網站

    

Dummy Project -  製作社群網站的前端頁面:


程式碼參考資料:   
作品頁面   
 GitHub


製作流程:




功能描述

- 按照API資料庫顯示用戶

- 點選More顯示用戶的詳情

- 使用分頁器顯示

- 使用名字關鍵字搜尋用戶

- 加好友

- 好友分頁可以檢視已經加入的好友

- 可以移除好友



切版



Bootstrap模塊選用

這邊會需要用到以下模塊.  也可以直接在Bootstrap網站中搜尋關鍵字

Nav Bar - 用來做首頁與好友分頁的切換

Search Bar - 搜尋功能.  有些會合併到Nav Bar.  需要搜尋inline forms

Card - 用來顯示每個用戶的頭像與名字後面會附加其他功能: 詳情 與 加好友

Pagination - 也有人稱為paginator.  分頁器

Modal - 彈出對話框.  用來顯示詳情


Javascript

A. 渲染User List

    1. 使用Ajax將API的用戶資料抓到 model.users中

    2. 定義DOM節點 - 要渲染用戶清單位置

    3. 製作view.renderUserList( ){ } 來渲染用戶頁面 使用Template literals 的方式進行渲染

    4. 在axios時 執行view.renderUserList(model.users) 因為這邊抓取資料式Ajax (非同步)
        所以在外面執行的話, model.users還是空的

    5. 渲染後調整一下margin. 以及Modal內容

B. 顯示詳情 Show Modal

    1. 配對按鈕與Modal   參考範例
        按鈕加上dataset屬性:  data-bs-toggle="modal" data-bs-target="#modal”
        要顯示的<modal>  id需配對  id="modal"

    2.  view.rednerUserList(){} 按鈕加上data-id=${user.id}, 作為後續識別用
                                                  class加上btn-show-modal, 不可以用id, 因為會有很多按鈕  

    3. 在controller{ }, 建立在user-list加上監聽器動作
        監聽器是放在整個user list上. delegation下面全部的元素
        使用辨別event.target的class或是id進行動作判斷. 

    4. 新增view.showUserModal( ){ }依照輸入的id, 從資料庫中修改顯示資料
        定義Modal的DOM節點. 使用tamplete literals修改

    5. 於點擊事件中, 判定如果事件目標是More, 執行view.showUserModal()

    hint: 從html抓出來的id多半是字串,  需要使用Number() 去配合API的資料

            監聽器function要在主程式執行才會用有.  放在controller{ }裡面不會自動執行

            監聽器動作要加上 event.preventDefault() 可以避免瀏覽器默認更新頁面


C.   分頁器 Pagination

       先做分頁器是因為後面會有很多功能會需要重新渲染使用者頁面
       分頁器的功能需要重新架構渲染頁面的函式寫法,
       所以先架構好這些變數後面就不用一個一個改了

        渲染分頁器邏輯:

        先設定好一頁要顯示幾筆資料 >> 用總資料數去算需要多少頁 >> 使用 for 迴圈重複製作需           要的<li>  >> 同時在每個<li>上掛上dataset-page="${page}" 後面使用此page作為要顯示的資           料範圍 

        

        由指定頁面顯示資料的邏輯:

        由點擊回傳的頁數數字設定資料起始點以及終點
        起點為:  (頁數 - 1) x  預設每頁資料個數
        終點為:  起點 + 預設每頁資料個數

        在從model.users中 slice(起點, 終點)  丟進去渲染函式就可以了


D.   搜尋用戶 Search

       搜尋用戶這個功能概念是從input bar抓取字串 >> 刪去空格  >> 轉小寫 >> 使用filter()將所有          用戶的name & surname都轉小寫後做比對, 回傳符合的用戶 >>  用這些用戶重新渲染 

        步驟為:
        - 設定DOM節點 - search form   
        - controller { } 安裝search監聽器,  監聽動作為'submit' , 因為submit包含 enter輸入
          將INPUT欄位的字串抓下來作為keyword
          執行controller.searchUser(keyword)   

       語法注意事項:

  • 監聽器是掛在form上. 這樣可以抓到input欄外的enter鍵動作
  • 使用 || (or gate) 來同時過濾name 或是 surname includes keyword
  • 在getUsersByPage 這邊, 新增了一個條件(三元)運算子的判定來看是否有filteredUsers
    const data = model.filteredUsers.length? model.filteredUsers : model.users
    意思是 若filteredUsers.length為true, 則data = model.filteredUser ; 
    若為false, 則data = model.users
  • 最有意思但是最無聊的是:   0 是 flase !!    那javascript中那些是false

    JavaScript是一種弱型別的語言，沒有明確的布林資料類型供其變數使用。 但是許多值用在邏輯上下文時可以被當成 false ，包括零（ 0 ）、 null 、零長度字串（ "" ）、 NaN 以及 undefined 。 所有其他變數值，包括一（ 1 ）、空陣列和空物件，都被認為是 true 。

E. 加好友功能


        加好友需要用到localStorage 以及JSON資料轉換.  概念如下:

        localStorage的資料拿出來 → 轉換為javastript → 把要加的用戶push進去 → 轉為JSON格式            → 放回去localStorage 


        上面幾個語法分別為: 
        JSON.parse(資料) 將JSON資料轉為Javascript內容 
        JSON.stringify(資料)將Javascript內容轉為JSON格式 
        localStorage.setItem(’key’, value) 存入                 
        localStorage.getItem(’key’) 取出 value


         步驟如下:
            - 建立 + 號 按鈕以及其classList  btn-add-friend,    data-id="${user.id}"
            - 在user-list的監聽器下,  若事件目標判定是btn-add-friend 則進行controller.addFriend(user)
            - 因為事件監聽器一開始已經有把id轉為對應的user了, 所以這邊直接用user傳入函式
      
        Note:
            - localStorage 可以在開發者工具 application裡面找到.  delete可以直接刪掉
            - 為了避免重複加到好友, push之前要先檢查一下user是否已經在好友名單了


F. 顯示好友分頁  Friend Page

            - 複製index.html  &  index.js  到新建立的檔案friend.index  &  friend.js
            - 修改 html script.src
            - 修改 Nav Bar的超連結路徑
            - 將friend.js中, axios的部份去掉, 直接讓model.user = localStorage的名單



G. 刪除好友  remove from friend.  在friend.js下進行以下修改

            - 創建model.friends來記錄好友名單的變化

            - 將原本 + 號按鈕改為  x 號按鈕.   class改為remove

            - user-list事件監聽器下, 若事件判定為remove 執行 controller.remove(user)

            - 用findIndex 找到要移除的user在friends的index.

            - 從localStorage取出friends Array

            - 用friends.splcie (index, 1) 移除後   存回localStorage

            - 渲染前讓model.users等於變更後的model.friends

            - 重新渲染user-list

        Note:  為了要使刪除好友後, 還是留在原畫面.
                   需要創建一個curPage 來記錄當前頁面數
                   點擊paginator時, 則將curPage紀錄為該頁數
                   使用curPage來進行要渲染的頁數


H. 切換顯示模式  

    切換模式的概念是利用javascript的點擊事件去修改變數.
    這個變數也可以放在DOM裡面, 也可以單獨存放在javascript
    根據要替換card-mode 以及 list-mode分別寫兩套渲染的模板
    依照事件發生後的模式, 挑選相對應的渲染模式

    步驟如下:
    - 在HTML中, 新增一個div.  class="current-mode"  data-mode="card-mode" 做為DOM節點
       (默認是card-mode開始)


    - 這個div中再做兩個icon  (card, data-mode="card-mode"  list data-mode="list-mode")


    - 安裝監聽器, 用點擊事件的 dataset.mode 來執行 view.checkMode(mode)

    - checkMode(mode){} 邏輯是, 如果currentMode跟當前一樣則return,
      如果不一樣, currentMode則等於事件傳來的mode

    - 修改view.renderUserList(){} 要寫兩套, 依照currentMode來選擇要用哪種方式來渲染
       這邊有個值得注意的地方是,  大括號{ }裡面是scope, 在裡面宣告的變數是帶不出來的

// 要帶出來有兩個方式

// 1. 在scope {}裡面的使用var宣告,  但是var很容易汙染到其他變數, 不要用

// 2. 在scrop {}外面先宣告, {}裡面做資料變更, 就可以在外面使用了


    - 跟friend.js一樣, 也要多加一個model.curPage這個廣域變數來記錄當前頁面. 用這個來渲染當         前頁面.



                                                                                                            這樣就完成啦~

                                                                                                            有更好的寫法也請提點我一下🙆


留言

張貼留言