11月27日举行了第19次学习会。
这次的主题是【NestJs】和【CSS图标制作】。从两个主题中我学到了很多东西。

NestJs

NestJs是一个Node.js框架，可用于实现类似Anglar的架构。既然NodeJs是制作网页应用的服务器端JavaScript环境，NestJs当然也是制作网页应用的框架。
React、Vue、Anglar等经常用于制作web应用的前端框架。这次介绍的NestJs是深受Anglar架构影响的框架。

NestJs特点、采用的技术

NestJs有以下特点：

• 依赖注入(DI)
• 面向对向(OOP)
• 函数式编程 (FP)
• 函数反应式编程(FRP)

内部采用如下技术：

• Typescript
• Node.js
• Babel

NestJs架构

　其核心是Module、Controller、Provider三个要素。
　首先，在controller中编写处理前端请求的代码。 　然后，将具体的处理放入provider中。module间的依赖关系大概是这个样子。 　关于URL，在各个controller中都预先指定了通配符，并由此决定了管辖权。推荐用controller处理请求，用provider（service等）处理细节的架构方式。provider中预置了Middleware、Exception filters、Pipes等多个种类，以应对不同的处理时机和对象。

便利功能及其他

依赖注入

　在class声明之前加上@Injecttable()的装饰器，可生成外部可插入的对象。由此，可用import往module导入其它的module、provider（service等）和controller，同时能够将依赖关系保持在理想状态。
　这样，通过导入包含所需provider的module，可以在整个服务器上保证provider的单例运行。

CLI

　可用命令轻松生成项目、controller和service等。
例) 新建test/test.module.ts
nest g mo test
例) 新建nest工程
nest new project-name

测试

　集成了标准的jest

数据库

　在NestJS中，关于与数据库的协作，提供了以下标准接口。

• mogoose(mongoDB)
• typeORM

因为可以使用流行的TypeScript的框架，所以如果有制作网络应用软件的机会的话我一定要试试。

CSS图标制作

在html中插入图标的话，一般会采用插入图片的方法，然而用CSS制作图标也是可行的。 好处有以下两个。

1. 将CSS代码插入页面内容，只需作为文本保存即可。不需要文件管理。
2. 便于调整尺寸、方向、颜色

使用伪元素【:before】/【:after】制作图标

虽然简单来说是使用CSS进行绘制，但是单一的要素很难表现出适合的图标内容。因此，通过使用伪元素【:before】/【:after】，共3个元素进行绘制。

赶紧来看看实例吧。

See the Pen printIcon by sotaro ozaki (@sohoos) on CodePen.

下面是打印机的图标。乍一看好像很复杂，但是仔细看的话，可以发现是整体由三个矩形的边来构成的。试着把before要素改成蓝色，把after要素染成红色。

See the Pen printIconColored by sotaro ozaki (@sohoos) on CodePen.

除了直线，还可以绘制曲线。这可以通过指定corner-radius来实现。

See the Pen LYRYBJv by sotaro ozaki (@sohoos) on CodePen.

绘画技术还是很有必要的……

如果感觉自己制作起来有困难，可以借鉴专业的CSS图标网站。感兴趣的话请一定要看看哦。