一、準備靜態頁面

https://www.expressjs.com.cn/resources/middleware/errorhandler.html

靜態頁面：
https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md

二、提取控制器模塊

三、用戶注冊的表單提交

3.1 同步方式提交表單

3.2 異步方式提交表單

引入vue:


客戶端模板引擎{{}} 與 服務端模板引擎{{}}一樣，產生沖突，導致vue無法渲染數據到頁面上：

解決方法：
修改vue默認的界定符
vue官方文檔


全局配置vue界定符：

Vue.mixin給我們提供了一種混入Vue實例的方法，創建了混入對象之后，我們自定義的方法或者變量可以很輕松的掛載在Vue實例上，給我們的偷懶帶來方便

3.3 使用session保持用戶登錄狀態

express-session官方文檔

3.4 session持久化存儲

connect-mongo

安裝：npm install connect-mongo

3.5 用戶注冊異步實現完整代碼：

3.6 使用app.locals來存儲sessionUser數據

存儲在app.locals中的這些鍵值對一般是公共模板方法或者公共模板變量，express提供了這樣的機制，便于公共數據和方法在模板中的使用，而無需每次render手動傳入。
將變量設置到app.locals對象下面，這個數據在所有的模板中都可以獲取到

app.locals和res.locals是expess中用于渲染模板的兩個對象：
locals可能存在于app對象中，即app.locals，也可能存在于res對象中，即res.locals。
app.locals上通常掛載常量信息（如博客名，描述，作者信息），
res.locals上通常掛載變量信息，即每次 請求的值可能不一樣（如網站訪問的用戶名）。

總結

以上是生活随笔為你收集整理的传统Web应用案例(采用服务端渲染)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。