前端成神之路-阿裡百秀

項目簡介

阿裡百秀，内容管理系統，分為内容管理和内容展示兩大核心功能。

1. 功能子產品

1.1 内容管理

子產品	功能
使用者	登入、退出、使用者增删改查
文章	文章管理
分類	分類管理
評論	評論管理
網站設定	關鍵字、描述、網站logo、輪播圖

1.2 内容展示

子產品	功能
首頁	導航、文章資料展示
清單頁	根據分類顯示文章清單
詳情頁	文章詳情資料展示、實作評論功能

2. 開發模式

2.1 前後端混合開發模式

所有HTML代碼和資料在伺服器端拼接好，一次性将所有内容發送到用戶端，浏覽器執行代碼，将内容呈現給使用者

問題：

1. 前後端開發人員對互相的代碼都不是别熟悉，混合開發兩者在處理互相的代碼時非常困難
2. 在開發的過程中難免會出現代碼互相覆寫，導緻工作量倍增

2.2 前後端分離開發模式

好處：職責、分工明确，獨立開發，互不影響。

3. 項目架構

系統分層	使用技術
資料層	mongoDB
服務層	node.js (express)

4. 項目運作環境搭建

1. 安裝node.js軟體并測試其是否安裝成功

1. win + R 開啟windows系統中的運作程式，在運作程式中輸入powershell回車，打開指令行程式
2. 輸入​

   ​node -v​

   ​指令檢視node.js的版本，在指令行程式中輸出了版本号沒有報錯即說明安裝成功

1. 安裝mongodb、mongodb-compass軟體
2. 将阿裡百秀項目檔案夾複制到硬碟中（伺服器端程式）
3. 在指令行工具中進入到項目根目錄中

1. 按住shift鍵，點選滑鼠右鍵，選擇在此處打開powershell視窗

1. 使用​

   ​npm install​

   ​指令安裝項目所需依賴檔案
2. 将阿裡百秀靜态頁面複制到public檔案夾中
3. 在指令行工具中輸入node app.js開啟項目

5. 項目搭建

1. 資料庫配置，為alibaixiu資料庫建立普通賬号

   （1）​

   ​mongo​

   ​ 進入mongodb資料庫操作環境

   （2）​

   ​use admin​

   ​ 切換到admin資料庫

   （3）​

   ​db.auth('root', 'root')​

   ​ 登入admin資料庫

   （4）​

   ​use alibaixiu​

   ​ 切換到alibaixiu資料庫

   （5）​

   ​db.createUser({user: 'itcast', pwd: 'itcast', roles: ['readWrite']})​

   ​ 建立賬号

   （6）​

   ​exit​

   ​ 退出mongodb資料庫操作環境
2. 将阿裡百秀項目檔案夾複制到硬碟中（伺服器端程式）
3. 在app.js中配置資料庫賬号密碼
4. 使用指令行工具進行到項目根目錄中
5. 使用​

   ​npm install​

   ​指令安裝項目所需的第三方子產品
6. 将阿裡百秀靜态頁面複制到public檔案夾中
7. 在指令行工具中輸入node app.js開啟項目

登入功能

1. 為登入按鈕添加點選事件
2. 擷取使用者在文本框中輸入的使用者名和密碼
3. 驗證使用者是否輸入了使用者名和密碼，如果沒有輸入，阻止程式向下執行，提示使用者輸入使用者名和密碼
4. 調用實作登入功能的接口，登入成功，跳轉到資料管理的首頁，登入失敗，提示使用者名或密碼錯誤

登入攔截

1. 使用script标簽加載伺服器端提供的接口位址
2. 判斷isLogin變量的值，如果值為false，跳轉到登入頁面

添加使用者

1. 為添加使用者功能的每一個表單項添加name屬性，且name屬性值需要和接口文檔中要求的參數名稱保持一緻
2. 為表單綁定送出事件，在事件處理函數中阻止表單預設送出的行為
3. 在事件處理函數中擷取到使用者在表單中輸入的内容
4. 調用添加使用者接口，将擷取到的内容通過接口發送給伺服器端，操作成功重新整理頁面，操作失敗給出使用者提示

展示使用者清單

1. 向伺服器端發送Ajax請求，索要使用者清單資料
2. 第二步，使用模闆引擎将資料和html模闆進行拼接
3. 第三步就是将拼接好的内容展示在頁面中

使用者頭像上傳

1. 為檔案選擇控件添加onchange事件，在事件處理函數中擷取到使用者選擇到的檔案
2. 建立formData對象用于實作圖檔檔案上傳
3. 調用圖檔檔案上傳接口，實作圖檔上傳
4. 在添加新使用者表單中新增一個隐藏域，将圖檔位址存儲在隐藏域中

使用者清單展示

1. 在頁面加載時向伺服器端發送Ajax請求，索要使用者清單資料
2. 使用模闆引擎将資料和html模闆進行拼接
3. 将拼接好的内容展示在頁面中

使用者資訊修改

1. 通過事件委托的形式為編輯按鈕點選添加事件
2. 在事件處理函數中擷取到目前點選使用者的id值
3. 根據使用者id擷取使用者的詳細資訊，并且通過模闆引擎将使用者的詳細資訊渲染到左側的表單中
4. 為修改按鈕添加點選事件，在事件處理函數中擷取到使用者在表單中輸入的内容，調用修改使用者資訊接口實作使用者資訊修改功能。

删除使用者

1. 為删除按鈕添加點選事件
2. 确認使用者是否要進行删除操作
3. 擷取到目前被點選使用者的id
4. 調用删除使用者接口根據id删除使用者，如果删除成功，重新整理目前頁面，讓頁面顯示最新的内容

批量删除使用者

1. 管理複選框的選中狀态

1. 當全選按鈕被選中時，所有使用者要被選中，當全選按鈕取消選中時，所有使用者要被取消選中
2. 當使用者前面的複選框按鈕狀态被改變時，要檢查是否有使用者處于未選中狀态，如果有，取消全選按鈕的選中狀态，如果沒有，就意味着所有使用者都處于選中狀态，此時将全選按鈕設定為選中狀态

1. 管理批量删除按鈕的狀态

1. 當全選按鈕被選中時，顯示批量删除按鈕，當全選按鈕被取消選中時，隐藏批量删除按鈕
2. 當使用者前面的複選框按鈕狀态改變時，檢查所有使用者的選中狀态，如果有使用者被選中，顯示批量删除按鈕，如果所有使用者都沒有處于選中狀态，隐藏批量删除按鈕

1. 實作批量删除使用者功能

1. 批量删除按鈕添加點選事件，在點選事件處理函數中，将所有被選中的使用者id執行存儲在一個數組中
2. 調用用删除使用者接口，實作删除使用者功能

修改密碼

1. 為修改密碼表單中的每一個表單項添加name屬性，name屬性的值要和接口中的參數名稱保持一緻
2. 為修改密碼表單添加表單送出事件，在事件處理函數中，阻止表單的預設送出行為
3. 擷取到使用者在表單中輸入的内容
4. 調用修改密碼接口，實作密碼修改功能，如果密碼修改成功，跳轉到登入頁面，讓使用者重新登入

添加分類

1. 為表單中的每一個表單項添加name屬性，name屬性的值要和接口文檔中要求的參數名稱保持一緻
2. 為表單添加表單送出事件，在事件處理函數中，阻止表單送出的預設行為
3. 擷取到使用者在表單中輸入的内容
4. 調用分類添加接口，實作添加分類功能

分類資料展示

1. 向伺服器端發送Ajax請求，索要分類頁面資料
2. 使用模闆引擎将伺服器端傳回的資料和HTML模闆進行拼接
3. 将拼接好的内容展示在頁面中

分類資料修改

1. 通過事件委托為編輯按鈕添加點選事件，在事件處理函數中擷取到要修改的分類資料id
2. 根據id調用接口，擷取分類資料的詳細資訊
3. 利用模闆引擎将分類資料和HTML字元進行拼接，拼接完成以後将内容渲染到頁面中
4. 為修改按鈕添加點選事件，在事件處理函數中擷取到管理者在表單中輸入的内容
5. 調用修改分類資料接口，實作分類資料修改功能。

分類資料删除

1. 通過事件委托的方式為删除按鈕添加點選事件，在點選事件處理函數彈出删除确認框
2. 在使用者點選了确認删除後，擷取要删除的分類資料的id
3. 調用删除分類資料接口，實作删除分類資料功能，如果分類删除成功，重新整理頁面

添加文章

1. 擷取文章分類資料，并将資料顯示在所屬分類的下拉清單中供管理者選擇
2. 實作文章封面圖檔的上傳，并将上傳後的圖檔位址儲存在一個隐藏域中
3. 為添加文章表單中的每一個表單項添加name屬性，并且name屬性值要和接口中要求的參數名稱保持一緻
4. 為添加文章表單綁定表單送出事件，在事件處理函數中阻止表單預設送出的行為
5. 擷取到管理者在表單中輸入的内容
6. 向伺服器端發送添加文章的請求，實作文章添加功能，文章添加成功以後要跳轉到文章清單頁面

文章清單資料展示

1. 在頁面一上來的時候向伺服器端發送請求索要文章清單資料
2. 通過模闆引擎将文章清單資料和HTML進行拼接，拼接完成以後将内容顯示在頁面中
3. 根據分頁資料實作清單資料分頁功能

文章資料清單篩選

1. 向伺服器端發送請求，索要文章分類資料，并将資料顯示在所屬分類的下來清單中
2. 為篩選按鈕添加點選事件，在事件處理函數中擷取到使用者選擇到的内容
3. 向伺服器端發送請求，索要管理者要求的文章清單資料，并将資料顯示在頁面中

文章編輯

1. 為編輯按鈕添加連結，并将文章id作為連結的查詢參數傳遞到文章編輯頁面
2. 在文章編輯頁面擷取位址欄中的id參數
3. 根據id擷取文章詳細資訊，并将文章資訊顯示在文章編輯表單中
4. 為修改文章表單綁定表單送出事件，在事件處理函數中阻止表單預設送出的行為
5. 擷取到使用者在表單中輸入的内容
6. 向伺服器端發送請求，實作修改文章資訊功能，如果文章資訊修改成功，跳轉到文章清單頁面

文章删除

1. 通過事件委托為删除按鈕添加點選事件，在事件處理函數中彈出一個删除确認框，跟管理者确認删除操作
2. 在事件處理函數中擷取要要删除的文章的id
3. 發送Ajax請求，執行删除操作，删除操作成功，重新整理頁面

評論清單展示

1. 向伺服器端發送請求，擷取評論清單資料
2. 使用模闆引擎将評論清單資料和HTML模闆進行拼接，拼接完成以後再将内容展示在頁面中
3. 根據分頁資料實作分頁功能

評論稽核

1. 根據目前評論的狀态更改稽核按鈕中的文字。如果目前評論是未稽核狀态，按鈕中顯示準許，如果目前評論是已稽核狀态，按鈕中顯示駁回
2. 通過事件委托的方式為稽核按鈕添加點選事件，在事件處理函數中擷取到目前評論的狀态
3. 向伺服器端發送請求，告訴伺服器端評論要更改為什麼狀态，如果修改成功，重新整理頁面，讓頁面中顯示最新的資料

評論删除

1. 通過事件委托的方式為删除按鈕添加點選事件，在事件處理函數中彈出删除确認框
2. 擷取到管理者要删除的評論id值
3. 向伺服器端發送請求，執行删除評論操作，評論如果删除成功，重新整理頁面

圖檔輪播資料添加

1. 實作圖檔上傳功能，并且将上傳後的圖檔位址儲存在一個隐藏域中
2. 為圖檔輪播表單中的每一個表單項添加name屬性，name屬性的值要和接口中要求的參數名稱保持一緻
3. 為圖檔輪播表單綁定表單送出事件，在事件處理函數中阻止表單預設送出的行為
4. 擷取到管理者在表單中輸入的内容
5. 向伺服器端發送請求，實作圖檔輪播資料添加功能，如果資料添加成功，重新整理頁面

輪播圖資料展示

1. 向伺服器端發送請求索要圖檔輪播清單資料
2. 使用模闆引擎将圖檔輪播清單資料和HTML模闆進行拼接，拼接完成以後将内容展示在頁面中

圖檔輪播資料删除

1. 通過事件委托的方式為删除按鈕添加點選事件
2. 在事件處理函數中彈出删除确認框
3. 擷取到要删除的輪播圖資料的id
4. 向伺服器端發送請求，執行删除操作，删除操作成功，重新整理頁面

網站設定

1. 實作網站logo圖檔的上傳，并且将上傳後的圖檔位址儲存在一個隐藏域中
2. 為表單中的每一個表單項添加name屬性，name屬性的值要和接口文檔中要求的參數名稱保持一緻
3. 為表單綁定送出事件，在事件處理函數中阻止表單預設送出的行為
4. 擷取到管理者在表單中輸入的内容
5. 向伺服器端發送請求，實作網站設定資料的添加功能

顯示網站設定資料

1. 向伺服器端發送請求，擷取網站設定資料
2. 判斷伺服器端傳回的資料是否為真，如果為真，将資料展示在表單中

展示登入使用者資訊

1. 根據userId變量的值，向伺服器端擷取目前登入使用者的資訊
2. 将使用者資訊顯示在頁面的左側

輪播圖資料展示

1. 向伺服器端發送請求索要輪播圖資料
2. 使用模闆引擎将資料和HTML字元串進行拼接，将拼接好的内容顯示在頁面中
3. 将原有的實作輪播圖效果的JavaScript代碼挪到ajax方法的success函數的最後面

熱門推薦

1. 向伺服器端發送請求，索要熱門推薦資料
2. 使用模闆引擎将資料和html模闆進行拼接，将拼接好的内容顯示在頁面中

var str = '<div>{{name}}</div>';
var obj = {name: '張三'}
var html = template.render(str, obj);      

搜尋

1. 為搜尋表單綁定表單送出事件
2. 在事件處理函數中阻止表單預設送出行為并且擷取到使用者輸入的搜尋關鍵字
3. 跳轉到搜尋結果頁面并且将使用者輸入的搜尋關鍵字傳遞到搜尋結果頁面
4. 在搜尋結果頁面中，從位址欄的查詢參數中擷取到使用者輸入的關鍵字
5. 根據使用者輸入的搜尋關鍵字調用搜尋接口，當伺服器端傳回資料以後，将搜尋結果資料和HTML模闆進行拼接，最終将拼接好的内容展示在頁面中