框架选型
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
网友评论