最近在重构公司网站,原来网站使用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. js基础--获取浏览器当前页面的滚动条高度的兼容写法

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...

  2. MySql的下载和安装(解压版)

    工具/原料   windows系统 一.Mysql的下载     打开浏览器,输入mysql,点击百度搜索,得到搜索结果.   在搜索结果中,选择下面结果,因为浏览器的不同,Mysql官网在搜索结果的 ...

  3. Linux内核架构与底层--读书笔记

    linux中管道符"|"的作用 命令格式:命令A|命令B,即命令1的正确输出作为命令B的操作对象(下图应用别人的图片) 1. 例如: ps aux | grep "tes ...

  4. dup和dup2应用实例(dup跟APUE有出入,close+dup=dup2?)

    dup/dup2函数 有时我们希望把标准输入重定向到一个文件,或者把标准输出重定向到一个网络连接. dup()与dup2()能对输入文件描述符进行重定向. 函数原型如下: dup函数创建一个新的文件描 ...

  5. RestTemplate的设置及使用

    概述 RestTemplate是spring内置的http请求封装,在使用spring的情况下,http请求直接使用RestTemplate是不错的选择. Rest服务端 使用RestTemplate ...

  6. jquery input 搜索自动补全、typeahead.js

    最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑 最后用typeahead.js这个插件,经过自己的测试完美实现 使用方法:在页面中引入jquery.jquery.typeahead ...

  7. .NET Orm 性能测试

    .NET Orm 性能测试 简介 OrmBenchmark 这个项目主要是为了测试主要的Orm对于 SqlServer 数据库的查询并将数据转换成所需 POCO 对象的耗时情况(好吧,实际上不完全or ...

  8. 底层网络技术以及IP编址

    网络信息的传输在最底层总是依托于物理介质来进行传输的,这里的传输介质分为两种: 有线介质  导线管(导向媒体).例如:双绞线.同轴电缆.光纤等 无线介质  电磁波(非导向媒体):利用各种波长的电磁波充 ...

  9. BITE

    <Google软件测试之道> 读后感言: p147 提到的BITE实在是太让人心动了, 一个简单的动作即可提交一个信息齐全的bug,连非专业测试人员也能轻松做到.身边很多人也都碰到过提交b ...

  10. 如何修改Tomcat默认端口?

    修改的原因: 关于8080端口:8080端口同80端口,是被用于WWW代理服务的,可以实现网页浏览,经常在访问某个网站或使用代理服务器的时候,会加上":8080"端口号.另外Apa ...