一個我的小項目，express 作的後臺增刪改查

用express實現一個後臺管理系統

github地址，歡迎star，有錯誤的歡迎指出。

前言

近期學習express，因而想着用express寫個東西加深印象，鞏固下學到的知識。因而就有了這個我的項目。

前端部分

• bootstrap佈局，jquery,js實現功能

後段部分

• express框架搭建服務，寫路由接口。
• mysql 進行數據的增刪改差。

項目概覽

先看一波實現圖吧。

項目功能實現

1.express路由接口書寫和前臺頁面的顯示

• 1,安裝express這裏就不詳細說了，express官網上面有步驟，主要來看app.js裏面的路由設置，如圖,
  

這裏作了幾個改動,我說下個人理解，若有不對，但願指出。app.js做爲入口文件，看圖上的箭頭，當請求的路徑爲news的時候，也就是app.use('/news',index)這行代碼，他會去找router文件下面的index文件而後執行，也就是require('../routers/index')這行代碼。

• 2,看index文件下面的代碼，如圖
  

這裏經過前臺傳的newstype（新聞類型的值）和pagenumber（顯示的條數）,而後在數據庫裏面查找和傳回來的newstype匹配的數據並限制顯示3條，並返回給前臺數據,前臺代碼以下圖(原諒我截圖截不徹底)，

以後獲得數據進行遍歷顯示就能夠了。

• 3，實現加載更多的功能，在上圖中看，只須要給定一個初始值pagenumber,而後點擊加載更多的按鈕進行加3就能夠了。

---

2，後臺頁面的增刪改查

• 1.主要是獲得用戶輸入值，而後點擊經過點擊按鈕的時候發送請求，先看express 的路由接口設置。如圖，
  

這裏說明下，到了後臺管理頁面，往app.js裏面看，這裏就要執行這2段代碼了，

app.use('/admin',users)
    var users = require(../routes/users)

這裏就要去找routes文件夾下面的users文件並執行了。

• 2.這裏用了node 的xss防護的插件，用法比較簡單，npm 安裝,而後引入。

  var xss = require("xss");
  以後對用戶的輸入校驗,這裏值針對xss存儲型攻擊,如

var newstitle = xss(req.body.newstitle);

• 3.除此以外，還作了csufr 跨站攻擊的處理，這裏我說下個人理解。首先，須要在html裏面插入一個隱藏的input標籤,

  <input type="hidden" name="_csrf" value="<%=   csrfToken %>">

這裏須要注意的是name值必須爲_csrf,這個Input標籤的做用就至關於自身帶了一個令牌（身份證）。

而後，在用戶輸入的時候也要獲取到這個input的值，並一塊兒發給後臺，如圖，

接着，在express裏面須要npm安裝csurf插件並引入,如圖

最後，在一進來後臺管理路由的作判斷是否和攜帶的令牌相匹配。

router.get('/', csrfProtection, function(req, res) {res.render('users', { csrfToken: req.csrfToken()})

})

• 3.分頁的顯示,其實和加載更多的相似，先獲取到當前頁數，而後設定每頁顯示多少條，最後把這2個值傳給後臺，後臺mysql進行操做。我這裏偷懶沒作計算，準確的應該是拿到數據庫的數據條數，而後除以每頁要顯示的條數，在總數除以這個數就獲得頁數。

總結

經過這個我的項目，算是對express有點了解，加深了本身對ajax的使用和感悟，也接着學習了web安全防護，主要分爲存儲型和反射型，反射型通常是對url進行攻擊，存儲型通常對用戶的輸入作攻擊.