关于财通证券前台项目的设计说明

框架选型

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