向全栈迈进——Angular+Tornado开发树洞博客（一）

在写了Django和Tornado两个纯后端系列的博客后，我决定在前端方面也提升一下自己的技术，不再用原生的html凑合写个页面来支持后端的开发了。正好最近公司正在推动angular框架技术，因此我将前端学习的重点放在了angular框架上。这个系列将为大家带来angular+tornado这一组合，我们将使用这个组合来实现一个树洞博客。

所谓树洞博客，就是一个大家可以匿名倾诉秘密的地方，大家可以把内心想说出的东西匿名发布在网络上，从而疏解内心的压力。

我们的树洞博客雏形如下：

在首页中可以看到用户发布的秘密，并可以选择收藏、评论或点赞。秘密也会被分门别类归在不同的标签中，以便于大家选择感兴趣的内容查看。

 在编写部分，提供富文本编辑器让用户可以书写自己的故事并发布。

以上内容只是目前的博客雏形。本系列依然会以边开发边写博客的方式进行，因此后续功能待开发完成后会陆续发表博客讲述。

现在让我们正式开始吧！

一 框架及工具介绍

1 Node.js

Node.js是2009年发布的一款javascript运行环境，其特点是开源、跨平台且允许在浏览器外运行Chrome的V8 Javascript引擎。它的设计理念为非阻塞，单进程及单线程，这使得它很适合处理大量的并发连接而无需引入管理线程的负担。作为一个运行环境，Node.js支持丰富的库，且有合适的npm工具来管理这些库。此外，Node.js支持ECMAScript标准，并且提供了TypeScript的运行环境。

TypeScript是Javascript的超类，编译后，就可以生成javascript。TypeScript可以运行在任何浏览器中或Node.js中。三大前端框架都支持TypeScript：React, Angular和Vue.js。

2 Angular

我们在这里选用了Angular作为我们的前端框架，版本号为11。如上文所说，Angular是使用TypeScript编译的前端框架。它的特点是可模块化、基于组件和依赖注入。可模块化是指，Angular应用可以由不同的模块组合而成，便于大规模开发；基于组件是指，所有的页面逻辑都是基于组件来完成的，组件来存储自身的数据，维护自身的逻辑，并定义html显示在外部视图中；依赖注入是指不同的组件通信依赖于service，而不是将各个组件耦合在一起，组件自身也不必操心从服务器获取数据之类的事情。

Angular这个框架提供了一个脚手架工具@angular/cli，我们在实际开发中会经常使用这个工具，通过使用这个工具我们可以轻松地创建项目、构造组件、服务、模块等等东西。

Angular作为成熟的前端框架，社区提供了大量的第三方库供开发者使用，我们在这个系列的博客中也将会使用到三个第三方库：NG-ZORRO, ngx-cookie-service和ngx-quill。

NG-ZORRO是蚂蚁金服提供的一套Angular组件库，其包含的组件种类多，且方便好用，比Angular官方的Angular-Material和基于BootStrap的ngx-BootStrap都要好用且好看。因此，这个系列博客使用NG-ZORRO组件库来构造我们的页面。

ngx-cookie-service顾名思义是一套在Angular中操作cookie的库，其支持基本的设置和删除cookie，足够大家开发使用了。

ngx-quill是一个富文本编辑器插件，支持大量的自定义工具栏功能，在这篇博客中使用这个组件来作为编写故事的文本编辑器。

3 Tornado

前端框架部分介绍完毕，让我们来看一下后端部分的选择。我们在这个系列博客中依然选用Tornado。Tornado是一套python的异步web框架兼服务器，其最大特点也是异步+非阻塞。与Django这种大而全的框架相比，Tornado显得轻巧了很多，它不提供像Django那种表单系统，以及ORM系统，算是比较纯粹的web框架。

因此，我们需要找一个ORM框架来配合Tornado。这里我们依然选用SQLAlchemy+alembic的组合。SQLAlchemy是Python写的一款ORM框架，支持多种主流数据库。而Alembic为SQLAlchemy作者编写的另一个工具，用于对数据库进行数据迁移工作，如增加或删除字段等操作。

因此，我们的后端框架确定为Tornado+SQLAlchemy+Alembic的组合

4 数据库

我们依然选择简单好用的sqlite3作为我们的开发数据库。SQLite3作为文件型数据库，无需做任何配置就可直接使用，大幅节约了我们的时间。

5 Nginx

在这个系列博客中，我们依然使用Nginx来作为我们的反向代理服务器，但与之前不同的是，这个系列的Nginx不仅作为Tornado的反向代理，Angular也是需要部署在Nginx上的。所以，在这个系列中，Nginx就显得更加重要了。

6 其他可能用到的东西

随着博客的开发，我们还可能用到以下东西：

redis：内存型key-value型数据库，通常作为网站缓存使用。在这个系列博客中可能会作为缓存使用。

whoosh：python的搜索框架。在这个博客中可能会开发基于whoosh的搜索功能。

[可选项：ElasticSearch：非常流行的搜索框架，但和whoosh相比实在是太重了，因此可能不会选则它来开发搜索功能]。

以上就是我们要用到的所有工具。

二 整体架构图

此系列博客的整体架构图如上所示。

Angular+NG-ZORRO+Node.js构成整个系统的前端部分，通过Nginx访问后端；后端由Web服务器Tornado与ORM框架SQLAlchemy组成(至于Alembic，这个工具实在太朴素了，没有任何logo图片)，并通过SQLAlchemy来访问SQLite数据库。诸如Redis和Whoosh之类的东西暂且作为后期锦上添花的东西，因此并没有体现在这张结构图上。

好了，在这篇博客中，为大家介绍了这个系列博客要用到的基础工具和整体架构图。我也是第一次接触前端框架部分的内容，若博客中写的有疏漏的地方，还希望大家多指教。

在下篇博客中，将从头介绍这些东西的安装和配置，以及新建Angular项目的部分，希望大家继续关注~