express+handlebars 快速搭建網站先後臺

最近在重構公司網站，原來網站使用PHP，先後端不分離，添加與更新網站內容仍使用原始方法，先出佈局再把調好的佈局給PHP後端開發，花時間長，維護不易。所以決定將網站先後端分離，核心功能含網站下單及CRM仍使用PHP，網站內容展現及添加分離。

公司網站集會員、產品訂單、CRM三大主要功能爲一體開發，前端與後端不分離，隨着時間推移，維護成本增長，幾乎不能有大的改動，不然直接影響公司運營。

重構網站用到以及插件與技術：

    "node": "^10.14.2",
    "bcrypt": "^2.0.1",
    "body-parser": "^1.18.3",
    "connect-flash": "^0.1.1",
    "express": "^4.16.4",
    "express-handlebars": "^3.0.0",
    "express-session": "^1.15.6",
    "jsonwebtoken": "^8.4.0",
    "method-override": "^3.0.0",
    "mongoose": "^5.4.2",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "validator": "^10.11.0"

這個項目有三大模塊，分別爲 web / db / admin。

佈局使用 handlebars + jQuery + express + less ，主要分爲如下四類，技術含量較少，使用了較多的中間件：

• 佈局 views。靜態網頁根據功能與顯示以目錄的方式儲存於 views 下，佈局相同的結構均製做成不一樣的小模塊
• 路由 routers。頁面路由以頁面名稱分別命名，不一樣的路由下可能存在不一樣的接口，所以頁面路由也是接口地址
• 數據 models。mongodb 的數據結構，以自定義的 Schema 對象鏈接數據庫
• 渲染 ajax / less。頁面中的數據渲染仍使用 ajax ，頁面中的 ui 以功能區分，分別調用

Github :  https://github.com/old-boy/anviz-web.git

在中間件的使用下能夠快速的搭建網站環境：

const express = require("express");
const exphbs  = require('express-handlebars');
const path = require("path");
const bodyParser = require('body-parser');  //獲取 form 表單數據
const mongoose = require("mongoose");   //鏈接數據庫
const session = require('express-session');  //保存 用戶登陸數據
const cookieParser = require('cookie-parser'); 
const FileStore = require('session-file-store')(session);
const flash = require("connect-flash");  //消息提示
const methodOverride = require('method-override');
const passport = require('passport');  //密碼驗證
const bcrypt = require('bcrypt');   //密碼加密
const jwt = require('jsonwebtoken');   //生成 token

網站中的技術點，主要集中在 admin 後臺管理中。

 

---

 路由

頁面跳轉與查詢均使用的 router.get() 方法，在 web 中大量配置並使用，get 規定頁面訪問路徑，render() 渲染當前頁面。同一個頁面的全部路由均寫在同一個js文件中，方便管理。好比 about.js，管理 about 下全部的路由：

const express = require('express');
const router = express.Router();

/** GET /about
 *  about
*/
router.get('/',(req,res) => {
    res.render('about/index')
});

router.get('/anviz',(req,res) => {
    res.render('about/anviz',{})
});

router.get('/communitySupport',(req,res) => {
    res.render('about/communitySupport',{})
});

...
...

module.exports = router;

 

 render() 方法中，默認有兩個參數，第一個是頁面路徑，第二個若是僅爲跳轉，則默認爲空，若是爲查詢，則在可寫返回的數據及狀態等。

 

待更新...