首頁>ASP源碼>其他類別
下載

專案簡介

阿里百秀，內容管理系統，分為內容管理與內容展示兩大核心功能。

1. 功能模組

1.1 內容管理

模組功能
使用者登入、登出、用戶增刪改查
文章文章管理
分類分類管理
評論評論管理
網站設定關鍵字、描述、網站logo、輪播圖

1.2 內容展示

模組功能
首頁導航、文章數據展示
清單頁根據分類顯示文章列表
詳情頁文章詳情資料展示、實現評論功能

2. 開發模式

2.1 前後端混合開發模式

所有HTML程式碼和資料在伺服器端拼接好，一次將所有內容傳送到客戶端，瀏覽器執行程式碼，將內容呈現給用戶

02

問題：

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

2.2 前後端分離開發模式

03

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

3. 專案架構

系統分層使用技術
資料層mongoDB
服務層node.js (express)
客戶端art-template、jQuery、font-awesome、swipe

4. 專案運行環境搭建（運行專案必須知道的事情）

  1. 安裝node.js軟體並測試是否已安裝成功
    1. win + R 開啟windows系統中的運行程序，在運行程序中輸入powershell回車，打開命令列程序
    2. 輸入node -v指令查看node.js的版本，在命令列程式中輸出了版本號沒有報錯即說明安裝成功
  2. 安裝mongodb、mongodb-compass軟體
  3. 將阿里百秀專案資料夾複製到硬碟中（伺服器端程式）
  4. 在命令列工具中進入到專案根目錄中
    1. 按住shift鍵，點擊滑鼠右鍵，選擇在此處開啟powershell窗口
  5. 使用npm install指令安裝專案所需依賴文件
  6. 開啟app.js檔案在47行資料庫連線部分將：'mongodb://itcast:itcast@localhost:27017/alibaixiu'修改

為'mongodb://localhost:27017/alibaixiu'

（1） 原因:你沒有建立mongodb資料庫連線帳號和密碼訊息，我們選擇用預設的方式登入mongodb資料庫。

（2） 如果您想用帳號密碼登入資料庫。請參考：https://www.cnblogs.com/b02330224/p/10049395.html

在命令列依序輸入指令： use alibaixiu #進入alibaixiu資料庫

db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']}) #建立資料庫用戶

如果提示權限不夠，請參考上面的鏈接，先用mongodb管理員帳號登入資料庫。

7.（新增步驟）最近，新上傳了db_data資料庫數據，可以透過mongodb-compass軟體進入alibaixiu資料庫，

建立與db_data資料夾中json數據，相同的名稱的users 、 comment 、 slides 、 categories 、 posts 、 settings集合

（Collection），最後依序在每個集合匯入對應json資料。

importdata

8.在命令列工具中輸入node app.js開啟項目

5.專案運作後注意事項（運作好看的项目必須知道的事情）

1.開啟瀏覽器,在瀏覽器網址列輸入localhost:3000/admin/login.html 進入登入頁面

輸入系統預設使用者名稱:（原來）[email protected] （現在）[email protected]密碼:123456 進入管理員頁面

2.由於沒有上傳資料庫檔案所有的數據都需要自己實現手動添加（如果引入了db_data中的json數據，跳過2-10步驟）

3.進入管理員頁面先更改自己的帳號資訊（修改密碼等）、上傳使用者頭像

4.接著加入文章資訊、系統設定資訊、輪播圖資訊（順序無要求，新增就是填寫表單資訊、選擇圖片檔案等）

5.注意更改分類資訊時分類資訊的圖示需要上font-awesome上搜尋如：fa-phone、fa-gift等

在font-awesome搜尋的圖片類別名稱為：fa fa-xxx-xxx ,您只需要加入後面fa-xxx-xxx部分即可

6.在新增完基本的資料庫資訊後可以選擇退出登入註冊一個新使用者（註冊的使用者預設為一般使用者）

或利用管理員添加使用者權限進行一般使用者的添加

7.在後台資料新增完成後，利用一般使用者帳號進入前台文章顯示頁面（若想頁面內容較豐富

建議文章資料添加15條左右、分類資訊添加4條左右）

8.如果想利用管理員帳號進入網站，則在未登出管理員帳號的情況下。開啟新的標籤頁在瀏覽器

網址列輸入localhost:3000進入前台文章顯示頁面

9.管理員如果開啟了評論功能，則前台文章詳情頁面會顯示評論功能，如果管理員關閉了評論則

頁面不會顯示評論功能

10.如果管理員開啟了評論審核功能，則使用者評論之後不會立刻顯示到頁面中，需要管理員在後台

管理頁面進行評論審核，待評論批准之後才會顯示到文章頁面。如果管理員關閉了評論功能則直

接顯示在文章詳情頁面。

11.如果專案仍然運作不了，請聯絡q我：1565066165

6.項目地址

首頁：http://luoxu.ltd:3000/ （網域備案中暫且改用http://luoxucoder.icu ）

登入頁面：http://luoxu.ltd:3000/admin/login.html (同理)

項目效果展示

1.前台文章顯示頁面

index

2.前台文章分類頁面

category

3.前台文章詳情頁面

post

4.登入頁面

login

5.註冊頁面

register

6.後台管理頁面

admin

專案功能

1.用戶功能

1.1 登入

  1. 為登入按鈕新增點擊事件
  2. 取得使用者在文字方塊中輸入的使用者名稱和密碼
  3. 驗證使用者是否輸入了使用者名稱和密碼，如果沒有輸入，阻止程式向下執行，提示使用者輸入使用者名稱和密碼
  4. 呼叫實現登入功能的接口，登入成功，跳到資料管理的首頁，登入失敗，提示使用者名稱或密碼錯誤

1.2 登入攔截

  1. 使用script標籤載入伺服器端提供的介面位址
  2. 判斷isLogin變數的值，如果值為false，跳到登入頁面

1.3 新增用戶

  1. 為新增使用者功能的每個表單項目新增name屬性，且name屬性值需要和介面文件中要求的參數名稱保持一致
  2. 為表單綁定提交事件，在事件處理函數中阻止表單預設提交的行為
  3. 在事件處理函數中取得到使用者在表單中輸入的內容
  4. 呼叫新增使用者接口，將獲取到的內容透過接口傳送給伺服器端，操作成功刷新頁面，操作失敗給出使用者提示

1.4 展示用戶列表

  1. 向伺服器端發送Ajax請求，索取用戶清單數據
  2. 第二步，使用模板引擎將資料和html模板進行拼接
  3. 第三步就是將拼接好的內容展示在頁面中

1.5 用戶頭像上傳

  1. 為文件選擇控制項新增onchange事件，在事件處理函數中取得到使用者選擇到的文件
  2. 建立formData物件用於實現圖片檔案上傳
  3. 呼叫圖片檔案上傳接口，實現圖片上傳
  4. 在新增使用者表單中新增一個隱藏網域，將圖片地址儲存在隱藏域中

1.6 用戶列表展示

  1. 在頁面載入時向伺服器端發送Ajax請求，索取使用者清單數據
  2. 使用模板引擎將資料和html模板進行拼接
  3. 將拼接好的內容展示在頁面中

1.7 使用者資訊修改

  1. 透過事件委託的形式為編輯按鈕點擊新增事件
  2. 在事件處理函數中取得到目前點擊使用者的id值
  3. 根據用戶id獲取用戶的詳細信息，並且透過模板引擎將用戶的詳細資訊渲染到左側的表單中
  4. 為修改按鈕新增點擊事件，在事件處理函數中取得到使用者在表單中輸入的內容，呼叫修改使用者資訊介面實現使用者資訊修改功能。

1.8 刪除用戶

  1. 為刪除按鈕新增點擊事件
  2. 確認使用者是否要進行刪除操作
  3. 取得到目前被點選使用者的id
  4. 呼叫刪除用戶介面根據id刪除用戶，如果刪除成功，重新整理目前頁面，讓頁面顯示最新的內容

1.9 批量刪除用戶

  1. 管理複選框的選取狀態
    1. 當全選按鈕被選中時，所有使用者要被選中，當全選按鈕取消選中時，所有使用者要被取消選中
    2. 當使用者前面的複選框按鈕狀態被改變時，要檢查是否有使用者處於未選取狀態，如果有，取消全選按鈕的選取狀態，如果沒有，就表示所有使用者都處於選取狀態，此時將全選按鈕設定為選取狀態
  2. 管理批次刪除按鈕的狀態
    1. 當全選按鈕被選取時，顯示批次刪除按鈕，當全選按鈕被取消選取時，隱藏批次刪除按鈕
    2. 當用戶前面的複選框按鈕狀態改變時，檢查所有用戶的選中狀態，如果有用戶被選中，顯示批量刪除按鈕，如果所有用戶都沒有處於選中狀態，隱藏批量刪除按鈕
  3. 實現批量刪除用戶功能
    1. 批次刪除按鈕新增點擊事件，在點擊事件處理函數中，將所有被選取的使用者id執行儲存在一個陣列中
    2. 呼叫用刪除用戶接口，實現刪除用戶功能

1.10 修改密碼

  1. 為修改密碼表單中的每個表單項目新增name屬性，name屬性的值要和介面中的參數名稱保持一致
  2. 為修改密碼表單新增表單提交事件，在事件處理函數中，阻止表單的預設提交行為
  3. 取得到使用者在表單中輸入的內容
  4. 呼叫修改密碼接口，實現密碼修改功能，如果密碼修改成功，跳到登入頁面，讓使用者重新登入

1.11 展示登入用戶訊息

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

2.分類功能

2.1 新增分類

  1. 為表單中的每一個表單項目新增name屬性，name屬性的值要和介面文件中要求的參數名稱保持一致
  2. 為表單新增表單提交事件，在事件處理函數中，阻止表單提交的預設行為
  3. 取得到使用者在表單中輸入的內容
  4. 呼叫分類新增接口，實現新增分類功能

2.2 分類資料展示

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

2.3 分類資料修改

  1. 透過事件委託為編輯按鈕新增點擊事件，在事件處理函數中取得要修改的分類資料id
  2. 根據id調用接口，獲取分類資料的詳細信息
  3. 利用模板引擎將分類資料和HTML字元進行拼接，拼接完成日後將內容渲染到頁面中
  4. 為修改按鈕新增點擊事件，在事件處理函數中取得到管理員在表單中輸入的內容
  5. 呼叫修改分類資料接口，實現分類資料修改功能。

2.4 分類資料刪除

  1. 透過事件委託的方式為刪除按鈕新增點擊事件，在點擊事件處理函數彈出刪除確認框
  2. 在用戶點擊了確認刪除後，取得要刪除的分類資料的id
  3. 呼叫刪除分類資料接口，實現刪除分類資料功能，如果分類刪除成功，刷新頁面

3.文章功能

3.1 新增文章

  1. 取得文章分類數據，並將數據顯示在所屬分類的下拉清單中供管理員選擇
  2. 實現文章封面圖片的上傳，並將上傳後的圖片位址保存在一個隱藏網域中
  3. 為新增文章表單中的每一個表單項目新增name屬性，並且name屬性值要和介面中要求的參數名稱保持一致
  4. 為新增文章表單綁定表單提交事件，在事件處理函數中封鎖表單預設提交的行為
  5. 取得到管理員在表單中輸入的內容
  6. 向伺服器端發送新增文章的請求，實作文章新增功能，文章新增成功以後要跳到文章清單頁面

3.2 文章列表資料展示

  1. 在頁面一上來的時候向伺服器端發送請求索取文章列表數據
  2. 透過模板引擎將文章清單資料和HTML進行拼接，拼接完成後將內容顯示在頁面中
  3. 根據分頁資料實現清單資料分頁功能

3.3 文章資料列表篩選

  1. 向伺服器端發送請求，索取文章分類數據，並將數據顯示在所屬分類的下來列表中
  2. 為篩選按鈕新增點擊事件，在事件處理函數中取得到使用者選擇的內容
  3. 向伺服器端發送請求，索取管理員要求的文章清單數據，並將數據顯示在頁面中

3.4 文章編輯

  1. 為編輯按鈕添加鏈接，並將文章id作為鏈接的查詢參數傳遞到文章編輯頁面
  2. 在文章編輯頁面取得網址列中的id參數
  3. 根據id獲取文章詳細信息，並將文章資訊顯示在文章編輯表單中
  4. 為修改文章表單綁定表單提交事件，在事件處理函數中阻止表單預設提交的行為
  5. 取得到使用者在表單中輸入的內容
  6. 向伺服器端發送請求，實現修改文章資訊功能，如果文章資訊修改成功，跳到文章列表頁面

3.5 文章刪除

  1. 透過事件委託為刪除按鈕新增點擊事件，在事件處理函數中彈出一個刪除確認框，跟著管理員確認刪除操作
  2. 在事件處理函數中取得要刪除的文章的id
  3. 發送Ajax請求，執行刪除操作，刪除操作成功，重新整理頁面

3.6 文章熱門推薦

  1. 向伺服器端發送請求，索取熱門推薦數據

  2. 使用模板引擎將資料和html模板進行拼接，將拼接好的內容顯示在頁面中

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

3.7 文章搜索

  1. 為搜尋表單綁定表單提交事件
  2. 在事件處理函數中阻止表單預設提交行為並且取得到使用者輸入的搜尋關鍵字
  3. 跳到搜尋結果頁面並將使用者輸入的搜尋關鍵字傳遞到搜尋結果頁面
  4. 在搜尋結果頁面中，從網址列的查詢參數取得到使用者輸入的關鍵字
  5. 根據使用者輸入的搜尋關鍵字呼叫搜尋接口，當伺服器端返回資料以後，將搜尋結果資料和HTML模板進行拼接，最終將拼接好的內容展示在頁面中

4.評論功能

4.1 評論清單展示

  1. 向伺服器端發送請求，以取得評論清單數據
  2. 使用範本引擎將評論清單資料和HTML範本進行拼接，拼接完成後再將內容展示在頁面中
  3. 根據分頁資料實現分頁功能

4.2 評論審核

  1. 根據目前評論的狀態變更審核按鈕中的文字。如果當前評論是未審核狀態，按鈕中顯示批准，如果當前評論是已審核狀態，則按鈕中顯示駁回
  2. 透過事件委託的方式為審核按鈕新增點擊事件，在事件處理函數中取得到目前評論的狀態
  3. 向伺服器端發送請求，告訴伺服器端評論要更改為什麼狀態，如果修改成功，刷新頁面，讓頁面中顯示最新的數據

4.3 評論刪除

  1. 透過事件委託的方式為刪除按鈕新增點擊事件，在事件處理函數中彈出刪除確認框
  2. 取得到管理員要刪除的評論id值
  3. 向伺服器端發送請求，執行刪除評論操作，評論如果刪除成功，刷新頁面

5.輪播圖功能

5.1 圖片輪播資料添加

  1. 實現圖片上傳功能，並將上傳後的圖片位址保存在一個隱藏網域中
  2. 為圖片輪播表單中的每個表單項目新增name屬性，name屬性的值要和介面中要求的參數名稱保持一致
  3. 為圖片輪播表單綁定表單提交事件，在事件處理函數中阻止表單預設提交的行為
  4. 取得到管理員在表單中輸入的內容
  5. 向伺服器端發送請求，實現圖片輪播資料添加功能，如果資料添加成功，刷新頁面

5.2 輪播圖資料展示

  1. 向伺服器端發送請求索取圖片輪播清單數據
  2. 使用範本引擎將圖片輪播清單資料和HTML範本進行拼接，拼接完成後將內容展示在頁面中

5.3 圖片輪播資料刪除

  1. 透過事件委託的方式為刪除按鈕新增點擊事件
  2. 在事件處理函數中彈出刪除確認框
  3. 取得到要刪除的輪播圖資料的id
  4. 向伺服器端發送請求，執行刪除操作，刪除操作成功，重新整理頁面

5.4 輪播圖資料展示（更新）

  1. 向伺服器端發送請求索取輪播圖數據
  2. 使用模板引擎將資料和HTML字串進行拼接，將拼接好的內容顯示在頁面中
  3. 將原有的實現輪播圖效果的JavaScript程式碼移到ajax方法的success函數的最後面

6.網站設定功能

6.1 網站設置

  1. 實現網站logo圖片的上傳，並且將上傳後的圖片地址保存在一個隱藏域中
  2. 為表單中的每一個表單項目新增name屬性，name屬性的值要和介面文件中要求的參數名稱保持一致
  3. 為表單綁定提交事件，在事件處理函數中阻止表單預設提交的行為
  4. 取得到管理員在表單中輸入的內容
  5. 向伺服器端發送請求，實現網站設定資料的新增功能

6.2 顯示網站設定數據

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

7.網站最近更新功能

7.1 頁面展示了文章評論訊息

1.依照文章id搜尋文章的評論

2.已批准的評論會直接展現在頁面中

3.最新評論實現了優化功能

4.管理頁面的未核准評論會標紅

7.2 頁面優化

1.所有的讚按鈕都實現了按讚功能

2.評論連結實現了跳到評論文章功能

3.所有的分類按鈕實現了跳轉分類頁面功能

7.3 註冊頁面

1.在登入頁面新增了使用者註冊按鈕

2.註冊頁面上js實現了前端註冊資訊的基本驗證

3.使用的bootstrap開發的頁面功能

4.註冊頁面註冊的用戶皆為一般用戶

5.實現了根據郵箱尋找用戶的功能

詳細資訊參考介面文檔

展開
附加信息
相關應用
爲您推薦
相關資訊 全部