Web前端學習筆記——NodeJS之綜合案例：多人社區

多人社區

該案例以 Node.js 中文開源技術社區 CNode 爲原型。

準備

1. 在 GitHub 上創建一個倉庫 ithub
2. 使用 Git 將遠程倉庫下載到本地 git clone 遠程倉庫地址

初始化目錄結構

.
├── node_modules
├── controllers 控制器
├── models 模型
├── public 靜態資源
├── views 視圖
├── app.js 應用程序啓動入口
├── config.js 應用配置文件
├── .gitignore Git忽略文件
├── package.json 項目包說明文件，用來存儲項目名稱，第三方包依賴等信息
├── package-lock.json
└── README.md 項目說明文件

在 app.js 中寫入以下內容：

const express = require('express')
const app = express()

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(3000, () => console.log('Example app listening on port 3000!'))

導入模板

下載模板到本地：

git clone https://github.com/lipengzhou/ithub-template.git

將模板中的 public 和 views 拷貝到項目中。

MVC

• 維基百科 - MVC

導入數據表

• 新建數據庫 ithub
• 在數據庫上右鍵 -> 運行 SQL 文件

數據庫設計

用戶表

話題表

話題分類表

評論表

路由設計

請求方法	請求路徑	說明
GET	/	渲染首頁
GET	/signin	渲染登陸頁面
POST	/signin	處理登陸請求
GET	/signup	渲染註冊頁面
POST	/signup	處理註冊請求
POST	/signout	處理退出請求
GET	/topic/create	渲染髮布話題頁面
POST	/topic/create	處理髮布請求請求
GET	/topic/:topicID	渲染話題詳情頁面
GET	/topic/:topicID/edit	渲染編輯話題頁面
POST	/topic/:topicID/edit	處理編輯話題請求
POST	/topic/:topicID/delete	處理刪除話題請求
POST		發表評論
		修改評論
		刪除評論
		個人主頁
		基本信息
		設置

提取路由和控制器模塊

雜項

• 拷貝 resources 中的 public 和 views 到案例根目錄
• npm i bootstrap jquery
• 開放 public 和 node_modules 靜態資源

按照路由走通頁面渲染

• 配置模板引擎
• 根據不同路由渲染頁面

用戶註冊

用戶登陸

用戶退出

發表話題

查看話題

修改話題

刪除話題

案例代碼查看

# 下載到本地
git clone https://github.com/lipengzhou/itcast-nodejs.git

查看所有的標籤（我針對每一大步都打了標籤，方便切換）：

# 查看所有標籤
git tag

# 查看帶有註釋的標籤
# 注意：使用 git-bash 查看，因爲有中文
git tag -n

切換指定標籤：

git checkout -f 標籤名稱

# 例如切換到 step-2
git checkout -f step-2

使用 markdown 富文本編輯器

• https://github.com/lepture/editor