最近在重構公司網站，原來網站使用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.uj5u.com/qita/216888.html
標籤：其他
上一篇：Git常用簡介
下一篇：2018年軟體開發狀態報告