这个项目起源于一个炒股社区，每天有投票活动，志愿者每天人工收集投票、人工分析、人工根据每个人填问卷的天数决定能不能查看未来一个月的分析结果。而我作为一个自动工具控，正在学习前端，正巧利用这个需求来自己从产品设计开始进行一次全栈开发实践，这个项目是自主项目，而非商业项目。我相信自己做一个网站，能比仿制网站学到更多知识。

文件结构

代码结构

开发日志

纠结的技术选型

最终结果

前端

• 管理页面

  AngularJS + 前端渲染

• 其他页面

  Bootstrap + Jade + 后端渲染

后端

• 开发框架

  Express 4

• 数据库及驱动

  MongoDB + Mongoose驱动

环境

• 开发环境

  Fedora 23 发行版

  Nodejs V4.3.2

  npm V2.14.12

  VS Code V0.10.8

• 生产环境

  Cent OS @阿里云

  Nodejs V4.3.2

  npm V2.14.12

前端渲染与后端渲染的选择

项目初期的原型是采用自主样式 + Express + Jade + Less + Ajax技术来实现的，目的在于将网站做成一个SPA，框架元素用Jade一次生成，页面内使用Ajax获取数据，再由前端渲染框架来实现渲染，然后后期全部使用ng来实现。

这时一直在纠结如何实现Jade的前端渲染，因为那时自己对Jade比较熟悉，非常喜欢它简洁的表达方式和可读性。然而，Jade相比于其他的前端渲染框架如juicer等实在是太重了，即使实现了服务端的预渲染，实现起来也有各种麻烦，失去了她本有的简洁的魅力。而引入其他前端渲染框架又为项目增加了很多的复杂度，对于快速原型构建，这样的代价实在是太大了。

于是，我重新构思了网站的结构。因为这个网站构建的初衷就是让自己从构思产品开始，到开发前后台，到上线，把整个过程和用到的技术学习一遍，这比单纯的仿页面要好的多，所以快速、有效就是主要的选型倾向。

这时我引入了Bootstrap框架来简化“写页面”的时间成本，页面变成了传统的分页网站，页面的渲染方式调整为：

• Express + Jade 实现后端渲染

  网站的大部分页面采用此种技术，其中问卷页面使用Ajax技术来实现与服务端交互，这里包括一套基于Jade+json生成问卷的渲染引擎，这个引擎和对应数据模型的设计成为了第一个和第二个技术小难点

• AngularJS + ui-router 实现前端渲染和页面行为

  ng的MV*特性尤其适合做数据驱动的应用，所以网站中的管理页面被我设计成了SPA应用，从服务器获取json数据，使用ng来控制四个页面：用户信息、答题统计、志愿者工作、问卷管理。实现一套CMS系统。

  由于我之前自学过iOS开发，对MVC架构的思想比较熟悉，think in ng不难，但却总在code in ng上卡住，ng暴漏了大量的API来实现MV*，这些API还需要熟悉。

前后端混合渲染架构

最后经过长时间的纠结-开发-再纠结-修正，之后，网站的基本架构终于确定了下来，变成了一个前后端混合的渲染架构。

当然，这样的渲染架构并不是最优解，为了多练习几种技术，最后导致了一个非常混乱的渲染体系，对于一个小型网站，实在不应该如此。但是既然作为一个练手项目，其目的已经达到。