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

 

待更新...

 

转载于:https://www.cnblogs.com/baiyygynui/p/10341032.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/569816.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图论算法(六)-- 二分图的最大分配问题(JAVA)

二分图:又称二部图,如果一个图的所有顶点可以被分为X和Y两个集合,并且所有边的两个顶点恰好一个属于一个集合X,另一个属于集合Y,即每个集合内的顶点没有边相连,那么这个图就是二分图。 二分图的最大分配问…

定义一个二维数组并输入数据,将二维数组元素的值按升序排列,并输出排序后的二维数组。

目录 问题: 回顾: 给出两种做法: 解法一:调用qsort 函数进行排序 代码: 运行结果: 解法二:冒泡排序 代码: 运行结果: 回顾里的4种方法的模板参考: 1.冒泡排序…

.net core中使用GB2312编码

引用 System.Text.Encoding.CodePages 注册 Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);转载于:https://www.cnblogs.com/liushunli/p/10342521.html

实验吧-密码学-杯酒人生(特殊凯撒--维吉尼亚密码)(凯撒加解密脚本、维吉尼亚密码加解密脚本)...

题目: 使用古典密码 一喵星人要想喵星发送一段不知道干什么用的密码“BLOCKCIPHERDESIGNPRINCIPLE”, 但是它忘记了密钥是什么, 手头(爪头)只有它自己加密过的密钥“HTRUZYJW”, 而且它 还知道原密钥是一个…

第五届省赛(软件类)真题----Java大学C组答案及解析

第五届省赛(软件类)真题—-Java大学C组答案及解析 杨辉三角调和级数回文素数过大年位平方和单位分数n级台阶 一、杨辉三角 二项式的系数规律,我国数学家很早就发现了。 如【图1.png】,我国南宋数学家杨辉1261年所著的《详解九…

Angular4.x 安装|创建项目|目录结构|创建组件

Angular4.x 安装|创建项目|目录结构|创建组件 安装最新版本的 nodejs node.js 官网:https://nodejs.org/zh-cn/ 去官网下载 node.js,下一步下一步就可以了。只要 node.js 安装成功,那么 npm 也会帮你安装完成! 注意:请…

第五届省赛(软件类)真题----Java大学B组答案及解析

第五届省赛(软件类)真题—-Java大学B组答案及解析 正则切分调和级数n的n次幂七对数字勾股定理九阶数独G将军 一、正则切分 java中提供了对正则表达式的支持。 有的时候,恰当地使用正则,可以让我们的工作事半功倍! …

第五届省赛(软件类)真题----Java大学A组答案及解析

第五届省赛(软件类)真题—-Java大学A组答案及解析 子序列最大长度莱布尼茨公式n的n次幂七对数字勾股定理九阶数独矩阵射线 一、子序列最大长度 一个串的子串是指该串的一个连续的局部。如果不要求连续,则可称为它的子序列。 比如对串&…

js获取一个月的天数

在使用其他语言获取每月天数的时候,一般都是存储到一个数组中进行获取,但是如果是二月份的话就需要首先判断是否闰年,再确定是28还是29了。 js可以通过Date对象很方便的获取到每月的天数,在初始化Date对象时,我们可以通…

第六届省赛(软件类)真题----Java大学C组答案及解析

第六届省赛(软件类)真题----Java大学C组答案及解析隔行变色立方尾无穷分数循环节长度格子中输出奇妙的数字加法变乘法移动距离打印大X垒骰子 一、隔行变色 Excel表的格子很多,为了避免把某行的数据和相邻行混淆,可以采用隔行变色的…

spring_01概念及案例

1.什么是IOC?   IOC概念:inverse of Controll,控制反转,所谓控制反转,就是把创建对象和维护对象关系的权利从程序中转移到spring的容器中(applicationContext.xml),而程序本身不再维护 2.什么是di? dependency injection,依赖注入,di和IOC是一个概念,spring的设计者认为di等…

斐波那契数列(二)--矩阵优化算法

之前写了一篇从斐波那契数列分析递归与动态规划(JAVA)来优化斐波那契数列,这样可以使算法的时间复杂度从O(n^2)变到O(n),这是使用递归公式f(n)f(n-1)f(n-2)求斐波那契数列的最优算法,但是这只是一维世界下的极限。下面我们将其从一…

第六届省赛(软件类)真题----Java大学B组答案及解析

第六届省赛(软件类)真题----Java大学B组答案及解析三角形面积立方变自身三羊献瑞循环节长度九数组分数加法变乘法牌型种数饮料换购垒骰子生命之树 一、三角形面积如【图1】所示。图中的所有小方格面积都是1。那么,图中的三角形面积应该是多少…

【学习总结】GirlsInAI ML-diary day-11-while循环

【学习总结】GirlsInAI ML-diary 总 原博github链接-day11 认识while循环执行 对于while/break/continue的认识 新值替换变量 一般while语句 无限循环 & break continue 作业 1-更新变量 这一条没什么新的东西,别的语言也一样:python在赋值时&#x…

第六届省赛(软件类)真题----Java大学A组答案及解析

第六届省赛(软件类)真题----Java大学A组答案及解析熊怪吃核桃星系炸弹九数分三组循环节长度打印菱形加法变乘法牌型种数移动距离垒骰子灾后重建一、熊怪吃核桃森林里有一只熊怪,很爱吃核桃。不过它有个习惯,每次都把找到的核桃分成…

@PathVariable、@RequestParam、@RequestBody注解

讲解更加详细的参考资料 https://blog.csdn.net/u011410529/article/details/66974974 https://www.cnblogs.com/soul-wonder/p/8920553.html PathVariable注解的作用,获取请求地址中传递的参数,即:从URL模版中取值。 RequestParam 是从reque…

从背包问题优化详解动态规划思想

动态规划: 所有的数据结构与算法的理解必须建立在题目的练习上,否则看多少理论都没有实际用处!!!所以下面这些理论文字看不懂通通没关系,跟随下面的背包问题还会跟深入的理解。一、基本概念:任何…

js判断数组里是否有重复元素的方法

转: js判断数组里是否有重复元素的方法 https://blog.csdn.net/longzhoufeng/article/details/78840974第一种方法:但是下面的这种方法数字字符串类似相同,返回的还是真,有点不靠谱,如果是其它的字符是可以的 var ary1…

深入浅出讲算法思想--蛮力法思想分析及应用

蛮力法(brute force method,也称为穷举法或枚举法)是一种简单直接地解决问题的方法,常常直接基于问题的描述,所以,蛮力法也是最容易应用的方法。虽然,用蛮力法设计的算法时间特性往往也是最低的…

光耦在短距离通信中的应用

在高低压隔离系统设计中,难免会使用光耦来通信。在选择光耦器件时,需要考虑光耦允许的最大通信速率,否则在高速通信时会失败. 对于高速的光耦应用时,需要注意电流传输比率和开关速度。 参考文档《Basic Characteristics and Appli…