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() 方法中，默认有两个参数，第一个是页面路径，第二个如果仅为跳转，则默认为空，如果为查询，则在可写返回的数据及状态等。

 

待更新...