关于财通证券前台项目的设计说明
2017-06-26 本文已影响0人
_blow
框架选型
1、 此项目为传统门户网站,页面较多,可以使用模版提取html公共代码
2、客户对seo要求高,不适合作为单页应用
3、 客户指定使用express加jade模版引擎
因此,基于express ,设计了如下方案:
-
express: 作为基础框架,提供整个项目的后端服务。
-
Nunjucks:html模版引擎,用来提取公共代码,绑定数据,在服务器端动态生成页面。
选择nunjucks而不用jade的原因是:
静态页面由其他公司提供,由于jade语法特殊,为了最大程度的减少工作量
其绑定数据的方式与angular双向绑定语法类似,对团队来说比较熟悉 -
Sequelize:数据库ORM框架,把关系数据库的表结构映射到对象上。避免编写相对复杂的底层查询代码,使代码更易读
-
es6: 使用更高级的语法特性,编写更易读的代码。本项目中选择es6作为服务端开发代码,主要是需要使用其promise语法,避免书写回调地狱,让代码更整洁。
-
sass:css预处理语言,有利于样式代码模块化。以及其他总所周知的原因。
打包方案:
- babel : 把服务器端es6代码转换成es5
- gulp : 编写任务脚本,将版本信息部署到线上
- webpack : 模块化前台的静态资源(css和js),开发环境下使用其热更新插件,自动刷新浏览器,打包时进行文件合并、压缩等工作,并提取样式。
优化方案:
- 压缩合并文件
- css sprite 减少http请求
- 图片、视频资源懒加载
- 数据库表中加索引,提高查询效率
部署方案:
- 带有负载均衡功能的Node应用的进程管理器 pm2
项目目录结构
_
├── client/··················<- 静态资源
│ ├── common/··············<- 公共样式
│ ├── home/················<- 页面内样式
│ ├── img/·················<- 图片资源
│ ├── vender/··············<- 为了适配IE8修改的插件
├── logs/····················<- 日志文件
├── public/··················<- 生产环境编译后的静态资源目录
├── server/··················<- gulp打包后的服务器端js代码
├── src/·····················<- 使用es6特性的服务器代码(开发使用)
│ ├── config/··············<- 配置文件
│ ├── proxy/···············<- 数据处理层/数据库连接层
│ ├── routes/··············<- controller
│ ├── app.js ··············<- 入口文件
│ ├── log.js
├── views/ <- 页面模板
├── .bablerc
├── .bowerrc
├── .gitignore
├── bower.json
├── gulpfile.js
├── package.json
├── README.md
├── webpack.config.js
├── webpack.production.config.js