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

待更新...

express+handlebars 快速搭建网站前后台的更多相关文章

  1. Angular JS + Express JS入门搭建网站

    3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...

  2. 利用Columnal网格系统快速搭建网站的基本布局结构

    1.下面是一些对响应式设计提供了不同程度支持的CSS框架: (1)Semantic(http://semantic.gs); (2)Skeleton(http://getskeleton.com); ...

  3. golang开源项目qor快速搭建网站qor-example运行实践

    最近想找几个基于Go语言开发的简单的开源项目学习下,分享给大家,github上有心人的收集的awesome-go项目集锦:github地址 发现一个Qor项目: Qor 是基于 Golang 开发的的 ...

  4. 前端框架Bootstrap - 快速搭建网站

    Bootstrap简介         Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.是一个CSS/HTML/JavaScript框架.Bootstrap是基于HTML5和C ...

  5. 快速搭建网站信息库(小型Zoomeye)

    前言:本来是不想重复造车轮的,网上资料有开源的fofa,和一些设计.有的架设太复杂了,好用东西不会用,整个毛线.还有的没有完整代码. 设计方案:    测试平台:windows    测试环境:php ...

  6. ThinkPHP框架快速开发网站

    使用ThinkPHP框架快速搭建网站 这一周一直忙于做实验室的网站,基本功能算是完成了.比较有收获的是大概了解了ThinkPHP框架.写一些东西留作纪念吧.如果对于同样是Web方面新手的你有一丝丝帮助 ...

  7. Weebly免费自助建站空间:可视化编辑网页搭建网站和绑定域名方法

    Weebly空间来自美国,已经稳定运行了有多年了,2007年被Time 评为50个最佳网站,属自助建站模式,功能强大.部落在09年时介绍了weebly.com自助建站服务,没有想到这多年来,Weebl ...

  8. [译]简单得不得了的教程-一步一步用 NODE.JS, EXPRESS, JADE, MONGODB 搭建一个网站

    原文: http://cwbuecheler.com/web/tutorials/2013/node-express-mongo/ 原文的源代码在此 太多的教程教你些一个Hello, World!了, ...

  9. 搭建开发框架Express,实现Web网站登录验证

    NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证   JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS,浏览器充当了解析器的角色.而对于需 ...

随机推荐

  1. STM32f030f4p6 内部flash 打包读写

    最近做到的项目在运行需要把一组uint8_t(unsigned char)的数据进行掉电储存,想到单片机STM32f030f4p6内部flash可以直接由程序操作,写了以下代码用于uint8_t数据打 ...

  2. Shell脚本中获取select值

    最近做一个数据清理,根据行号清理,所以需要查出这个行的最大最小值出来进行删除,如果靠手动每次去查,太麻烦所以就用在sh脚本当中执行SELECT语句,并将结果赋值给一个变量. sh脚本如下 #! /bi ...

  3. PAT1077: Kuchiguse

    1077. Kuchiguse (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 HOU, Qiming The Japan ...

  4. PAT1083:List Grades

    1083. List Grades (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Given a l ...

  5. SSM-Spring-10:Spring中cglib动态代理

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 何为动态代理,就不扯皮了,上一篇博客刚刚提到,那cglib动态代理又怎么写,我拿个和上个例子相似的案例来写 具 ...

  6. 2. 网友对app后端写作系列文章的写作建议

    很感谢"app后端"qq群的网友,在发布消息后,就收到了大量网友的反馈 下面的建议会融入到写作当中: 1.还有,对版本升级很感兴趣,我们现在为了兼容旧版本,已经把工程代码搞的乱哄哄 ...

  7. 12. thymeleaf中资源相对路径的解决

    把博客部署到tomcat上后才发现因之前资源和链接的地址都是使用的相对路径,这样一来在tomcat上就各种找不到资源.从网上看了几种解决方式都挺麻烦的,且不是适配的,所以我根据thymeleaf的规则 ...

  8. 夏娜的菠萝包 JDFZ1098

    Description 问题描述:夏娜很喜欢吃菠萝包,她的经纪人RC每半个月就要为她安排接下来的菠萝包计划.今天是7月份,RC又要去商场进货买菠萝包了.这次RC总共买了N种菠萝包,每种一个.每个菠萝包 ...

  9. jenkins+docker 持续构建非docker in docker

    工欲善其事必先利其器,为了解脱程序员的,我们程序员本身发明了很多好用的工具,通过各种工具的组合来达到我们想要的结果 本文采用jenkins docker svn maven作为相关工具,项目sprin ...

  10. 谈谈.NET架构师面试及如何设计面试题

    上星期:应老东家的要求,帮其面试.NET架构师. 于是:老东家进行了一星期的简历收集: 终于:在一堆简历里,精挑细选了四个: 约了:周末上午下午各两个. 面试者年龄:在30-35岁左右,差不多10年. ...