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,一经查实,立即删除!

相关文章

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

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

第五届省赛(软件类)真题----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次幂七对数字勾股定理九阶数独矩阵射线 一、子序列最大长度 一个串的子串是指该串的一个连续的局部。如果不要求连续,则可称为它的子序列。 比如对串&…

第六届省赛(软件类)真题----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…

@PathVariable、@RequestParam、@RequestBody注解

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

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

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

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

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

从NetCore报错到MySql安全

从NetCore报错到MySql安全 原文:从NetCore报错到MySql安全之前项目在测试服务器上的一些接口时不时会报出下面的错误:(采用Abp框架) "SocketException: 你的主机中的软件中止了一个已建立的连接。 STACK TRACE: at MySqlConnector.Pr…

减治法在查找算法中的应用(JAVA)--快速查找

减治法在查找算法中的应用 快速查找:选择问题是求一个n个数列表的第k个最小元素的问题,这个数k被称为顺序统计量。对于k1或kn来说,这并没有什么意义,我们通常会要找出这样的元素:该元素比列表中一半元素大&#xff0…

JavaScript中使用Json

转载于:https://www.cnblogs.com/lyonwu/p/10368989.html

Navicat Premium试用期破解方法(转)

转载网址https://blog.csdn.net/Jason_Julie/article/details/82864187 1、按步骤安装Navicat Premium,如果没有可以去官网下载:http://www.navicat.com.cn/download/navicat-premium 2、安装好后下载激活文件:https://pan.baidu.com/s/1kVgT…

减治法在生成子集问题中的应用(JAVA)--递归、二进制反射格雷码

减治法在生成组合对象问题中的应用 生成子集问题:经典的背包问题就是求解一个最优子集的问题,这里我们来讨论一个更简单的问题。对于任意一个集合来说,它都存在2^n个子集(一个集合所有的子集集合称为幂集)。 1&…

减治法解决俄式乘法问题(JAVA)

以上是在《算法设计与分析基础》一书中给出的定义。 这种算法只包括折半、加倍、相加这几个操作,在计算时,不需要用九九乘法表 。 同时,这个方法每次都会将计算的规模减少,运用了减治的思想 public class Main {public static…

减治法解决尼姆(Nim)游戏/拈游戏问题(JAVA)

尼姆游戏是一种两个人玩的回合制数学策略游戏。游戏者轮流从一堆棋子(一共有好几堆,一次只能从其中一堆拿。)(或者任何道具)中取走一个或者多个,最后不能再取的就是输家。当指定相应数量时,一堆…