一、準(zhǔn)備靜態(tài)頁(yè)面

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

靜態(tài)頁(yè)面：
https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md

二、提取控制器模塊

三、用戶注冊(cè)的表單提交

3.1 同步方式提交表單

3.2 異步方式提交表單

引入vue:


客戶端模板引擎{{}} 與 服務(wù)端模板引擎{{}}一樣，產(chǎn)生沖突，導(dǎo)致vue無法渲染數(shù)據(jù)到頁(yè)面上：

解決方法：
修改vue默認(rèn)的界定符
vue官方文檔


全局配置vue界定符：

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

3.3 使用session保持用戶登錄狀態(tài)

express-session官方文檔

3.4 session持久化存儲(chǔ)

connect-mongo

安裝：npm install connect-mongo

3.5 用戶注冊(cè)異步實(shí)現(xiàn)完整代碼：

3.6 使用app.locals來存儲(chǔ)sessionUser數(shù)據(jù)

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。