前端網(wǎng)站原型設(shè)計
上個禮拜將公司網(wǎng)站存在的問題梳理了一下，了解其前后端技術(shù)是什么列疗。了解了下軟件開發(fā)流程是如何的滑蚯。
由于Layui開發(fā)前端頁面比較迅速，花了半天時間看了下文檔，然后制作了新的網(wǎng)站原型告材，在此記錄下遇到的一些問題坤次。
- Layui 的文件內(nèi)容不能發(fā)生變化，比如文件夾內(nèi)各文件的相對位置斥赋。在部署到服務器上時缰猴，發(fā)現(xiàn)如果修改了文件夾名字或增加了新內(nèi)容，將無法讀出疤剑。
- Layui的引用最好加上Media="all"
<link rel="stylesheet" media="all" href="../../assets/layui/css/layui.css" />滑绒，如果遇到瀏覽器提示css在嚴格模式下無法解析。 - Script 代碼一般寫在Layui.use里面隘膘，模塊的定義通過Layui.define進行定義疑故。
- Layui的模板引擎并沒有提供API接口，通過閱讀Layui的模板引擎源碼弯菊，嘗試通過express進行res.render指定laytpl中的方法纵势，結(jié)果出錯。采用MVC架構(gòu)管钳，通過controller控制傳入數(shù)據(jù)钦铁，控制不同頁面的的數(shù)據(jù)顯示并不方便，感覺Layui并不適合MVC開發(fā)才漆。
邊做邊學了ejs模板語言牛曹，ejs關(guān)鍵是不同占位符代表的含義，其可以在模板中定義for, if等醇滥，結(jié)合res.render傳入的數(shù)據(jù)進行條件化渲染黎比。
在使用session的過程中，了解了req.app.locals, req.locals, app.locals的區(qū)別腺办，第一個是保存數(shù)據(jù)到請求連接的作用域中焰手，與第二者的區(qū)別是其數(shù)據(jù)可以供其他中間件調(diào)用糟描，第三個是保存到express 實例的全局作用域怀喉。
此外，了解了redis的用法船响，redis是通過內(nèi)存在保存數(shù)據(jù)躬拢，其相對于直接使用session store，有以下兩個優(yōu)點见间。
- redis store因為保存在服務器的內(nèi)存中聊闯，其訪問數(shù)據(jù)很快
- 安全性得到了增強，采用普通的session機制米诉，因為設(shè)置的是全局變量菱蔬，會導致多用戶返回相同的session內(nèi)容。而采用redis，每個用戶連接都會在內(nèi)存中單獨創(chuàng)建一對key value拴泌。
后端權(quán)限設(shè)置
一開始對主流的權(quán)限控制方案進行了調(diào)研魏身，如java spring security , shiro, 以及node-acl，這些框架比較重蚪腐，雖然其安全性和可靠性比較高箭昵，功能完善，但考慮目前情況回季，采用了express + mongodb + layui 通過設(shè)置不同的中間件來實現(xiàn)權(quán)限控制家制。其實mongodb不太適合關(guān)系型數(shù)據(jù)庫，其不同數(shù)據(jù)表之間的權(quán)限關(guān)聯(lián)不如使用MySql之類泡一。
主要流程如下：
- 首先設(shè)計好數(shù)據(jù)庫颤殴，即Model模塊，一般權(quán)限通常是和崗位綁定的瘾杭，所以可以設(shè)置不同部門崗位的權(quán)限诅病，若是需要跨部門，可以給一個人設(shè)置多個職位粥烁。
這里簡單采取管理員和普通用戶贤笆，數(shù)據(jù)表設(shè)置用戶名和密碼，頁面訪問權(quán)限讨阻，系統(tǒng)設(shè)置權(quán)限芥永； - 封裝設(shè)計好的數(shù)據(jù)庫，添加增刪改查方法钝吮。
- 設(shè)置三個中間件埋涧，第一個監(jiān)測用戶是否登錄，若是沒有登錄奇瘦，則跳轉(zhuǎn)到登錄頁面棘催；第二個中間件監(jiān)測登錄的用戶是否有訪問該頁面的權(quán)限；第三個中間件監(jiān)測用戶是否有訪問權(quán)限設(shè)置的權(quán)限耳标。
期間遇到的一些問題醇坝，比如針對權(quán)限樹嵌套如何往內(nèi)部某個子樹添加權(quán)限，Mongodb可以采用addToSet來往現(xiàn)有對象的內(nèi)部對象添加元素次坡。刪除多層嵌套的元素呼猪，可以采用Pull方法。權(quán)限樹采用Layui的帶編輯功能的砸琅，其注意點是為了在后續(xù)獲取特定的元素宋距，需要在add新元素的時候，設(shè)置id症脂。
上線測試
上次遇到一些問題谚赎，比較奇怪的錯誤淫僻，通過排除發(fā)現(xiàn)是Node版本的問題，在寫服務端時使用的是class, module.exports = new Object() 類似面向?qū)ο蟮膶懛ê剑霸诎⒗镌粕习惭b的7.0版本的Node嘁傀，結(jié)果無法解析，通過NVM切換成12.0的可以成功運行视粮。
其他注意事項：
- 針對靜態(tài)資源细办，不要忘記設(shè)置靜態(tài)的絕對目錄，可以通過app.use實現(xiàn)蕾殴。
- 針對request的解析笑撞，之前看express官方文檔，發(fā)現(xiàn)4.0自帶bodyParser, 但使用了發(fā)現(xiàn)遇到比較多bug, 調(diào)試了較久钓觉，還是采用了主流的bodyParser, urlencoded與json方法的區(qū)別是前者主要是解析post提交的form 表單茴肥，需要注意的是extended需要設(shè)置為true才能解析嵌套的對象，否則只能解析簡單的荡灾。開啟嵌套解析會消耗一定的性能
// parser
app.use(bodyParser.json());
app.use(
bodyParser.urlencoded({
extended: true
})
);
