最近在重構公司網站，原來網站使用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() 方法中，默認有兩個參數，第一個是頁面路徑，第二個如果僅為跳轉，則默認為空，如果為查詢，則在可寫返回的數據及狀態等。

?

待更新...

?

轉載于:https://www.cnblogs.com/baiyygynui/p/10341032.html

總結

以上是生活随笔為你收集整理的express+handlebars 快速搭建网站前后台的全部內容，希望文章能夠幫你解決所遇到的問題。

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