【Poetry项目总结】Poetry前后端分离项目（ Version1.0）之前端Angular8总结

约定不等于承诺〃 2024-04-17 22:07 69阅读 0赞

## 1.前言 ##

本文介绍了Poetry--随机名句接口的Web前端开发。从项目的前期规划/技术选型到后期的实现落地做了详细地记录与总结，其中穿插部分技术知识。本文只是Poetry v1.0的记录与总结，后期随着项目的不断推进，可能会在本文后加上version1.1+的总结。望各位关注。另，整个项目我已部署上线，可在**http://ngxs.ink**访问（首次访问加载速度偏慢）。

**由于整个网站包括****前端--后台--数据库--服务器****等都由我个人完成，安全机制难免疏漏，望各位大神高抬贵手，我感激不尽！**

## 2.目录 ##

1.前言

2.目录

3.正文

3.1  前端规划

3.2  前端技术选型

3.3  Angular8 + NG-ZORRO的使用

4.后记

--------------------

## 3.正文 ##

### 3.1  前端规划 ###

对于前端部分的总体规划，我在前期做了一些工作。首先针对项目的整体定位和受众进行分析。Poetry项目的功能是向开发人员提供一个Restful接口，每次随机返回一句名句。那么我对它的定位就是一个Restful接口，受众就是有此类需求的开发人员。由于希望积攒用户和提升技术栈，需要搭建一个网站，通过用户的注册登陆等功能，记录用户信息。这是用户在使用接口前，必须完成的步骤。当用户注册成为网站会员之后，便可以登陆进入网站主页。对于主页的规划，我分了三点，一是要用户能够看见自己对于接口的使用量；二是用户需要对于此网站有一个客观的认知，这个认知体现在网站的PV上，我认为PV数据不单单只是网站的浏览量，体现PV的应该是网站的注册使用量，所以注册量作为一个需要可视化的数据出现在本项目前端的规划里。最后，用户需要一个帮助文档来指导其使用本网站的API（本来还计划了支付功能和邀请机制，支付功能作为用户的接口用量限制，但是遵循由简到繁的原则，在Version1.0砍掉了这两个功能，只做了统一的后台请求次数和频率限制，这会在后台总结部分体现出来）。

最终，网站前端的初步规划如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70][] Poetry网站前端规划图

### 3.2  前端技术选型 ###

现代前端无非两种方式，第一种HTML5+CSS3+JavaScript(含JQuery)，第二种就是三大框架Vue/React/Angular，这里我无疑选择第二种。接下来，在对于自己技术的提升方面，由于Vue的轻量级，自己在之前的学习实践中（包括小程序的搭建，微信小程序前端用的是类似Vue的框架）已经比较熟悉Vue，因此在React和Angular之中选择。Angualr1.x在之前学习过一些，分层比较清晰，但是对技术的挑战性不大，排除。最后基于对于技术的痴迷与挑战（听说），我选择了Angular8，它跳出了传统的JavaScript而转用更加规范的超类TypeScript且框架内容丰富，底层架构稳定，版本更新比较平稳**（这些特点都是我自己体会到的）**，阿里云就用的是Angualr2+，而且使用TypeScript对于我这种前后端都做的码畜来说，切换起来更加自如。基于以上分析，前端技术选型最终定在更加“重量级”的Angualr8。后来又经过对NG-ZORRO与MATERIAL的比对，个人感觉蚂蚁团队的NG-ZORRO的体验更好。所以最终前端技术选型定为**Angular8 + NG-ZORRO**。

### 3.3  Angular8 + NG-ZORRO的使用 ###

（对于技术不感兴趣的可以跳过）

***3.3.1 项目初始化***

首先，全局安装angular-cli工具。这里说一点，angular-cli是对webpack的二次封装，所以使用了angular-cli就没必要再使用webpack了。根据前期对于官方文档的学习，使用以下命令构建项目

npm install -g @angular/cli
    
    ng new angular-poetry
    
    cd angular-poetry
    
    ng serve --open --port 4201

这样就可以在http://localhost:4201看到运行的项目了。

***3.3.2  项目各界面逻辑简述***

根据前期的规划，应该有至少5个界面，注册 / 登陆 / 用户接口用量 / 网站接口用量 / 帮助文档  。 虽然目前注册和登陆是必须在第一步完成的，但是之后项目要改进，如果在用户未登陆的情况下也可以展示部分数据，那么“**注册和登陆必须在第一步**”这个逻辑就必须要改动。**项目前期尽量多想一些，对后期优化改进有很大帮助**。所以在Version1.0的时候，就另外需要一个welcome页面来承载登陆和注册，那么此时的登陆和注册就变成了两个子组件（就那么点基本信息没必要做成页面，况且之后可能还要嵌套模态层进行登陆 / 注册）。如果后面三个功能都变成单独的页面，在Angular本身就重量级（加载慢）的缺点下，无疑增加了页面跳转的时间，况且两个用量页面的设计风格如果差异很大的话，就会丢失网站UI的统一性，而如果风格统一的话，做成两个单独的页面也就失去了它作为单独页面的意义。所以，后面三个功能我决定做在同一个页面上，即将其变成三个子组件，嵌套在同一个页面框架中。最后，需要一个404页面，不能让服务器找不到页面时，返回一个Nginx的404页面吧？综上所述，项目的组件结构关系如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70 1][] 前端项目各组件关系

项目结构如下：

![2019090211085490.jpg][] 项目结构目录

achievement  ---- （用户邀请的其他用户列表）功勋

index --------------（登陆后显示的主页面）主页

interfaces -------- 网站总接入量

my-usage -------- 我的用量

not-found --------  Not Found 404

purchase -------- 购买接入量

today ------------- 网站今日用量

welcome -------- （内含login和register的）欢迎页

**①  先用cli命令把需要的组件都创建一下。**

ng generate component welcome
    //或者
    ng g c welcome

**②  再到  app.module.ts 里面修改一下组件的属性，把子组件嵌套进去。其中path值为空的部分是默认导航的组件。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70 2][] app.module.ts文件部分内容

**③  引入NG-ZORRO**

ng add ng-zorro-antd

**3.3.2.1  welcome逻辑简述**

welcome的内容就是一张图片和一个遮罩层主要作为背景，后期考虑将背景动态化，随机变换图片和切换样式。

**3.3.2.2  login逻辑简述**

login组件是用一个table和一个form做成的，table主要来限制显示的大体框架，form作为提交表单。首次使用NG-ZORRO的地方。在NG-ZORRO组件库的示例中找到需要的input框样式，参考其实现代码，写出符合实际需求的组件。如：

<nz-input-group [nzSuffix]="suffixPassword" [nzPrefix]="prefixPassword" >
              <input
                [type]="passwordVisible ? 'text' : 'password'"
                nz-input
                placeholder="密码"
                [(ngModel)]="password"
              />
    </nz-input-group>

这里因为要将用户名和密码一起post到后台，所以使用\[(ngModel)\]的方式，双向绑定到一个ts的password变量中（此处可优化为小括号的html->ts的单向数据绑定）。点击“登陆”按钮，触发post请求。然后对于返回的json值进行判断，如果返回的code==0，那么登陆成功，获取用户信息并且跳转到index。如果是别的值，再进行相应的错误提示。此处的错误提示也是应用了NG-ZORRO的组件。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70 3][] 网站welcome--login展示

**3.3.2.3  register逻辑简述**

register组件与login相同，也是用一个table和一个form做成的。此组件中，有一个逻辑是发送验证码，所以在发送验证码之前有一个邮箱（用户名）的空判断和邮箱格式判断，在提交所有注册信息的时候也有一个空判断（头像除外，因为我给的有默认头像）。头像上传组件是用了NG-ZORRO的文件上传组件，上传的服务器也是用的NG-ZORRO默认的，因为我只是取它转换后的base64编码来存储头像，所以不管它把头像传到哪里，对此网站来说没有影响，要说有影响，那可能就是在上传速度上有点慢。其他表单项就很普通，比如昵称和密码表单项。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70 4][] 网站welcome--registe报错展示

**3.3.2.4  my-usage逻辑简述**

my-usage组件是用户的接口使用量组件，使用了ECharts做数据可视化，当点击左侧标签，展示相应的数据，此时的数据包括今天 / 昨天 / 前天的接口用量。上限是25人/次/天。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70 5][] 我的用量组件展示

**3.3.2.5**  网站总接入和网站今日用量未作数据可视化，帮助文档也只是一个文档，在此不再赘述。

## 4.后记 ##

至此，由于时间关系，我的angular-poetry项目的version1.0项目就告一段落。后期，Version1.1+在界面上会更加丰富，用户体验也会提升，另一方面，对于前端应该做的安全拦截，也会适当地增加进去。

挚谢阅读。

再次感谢各位高抬贵手！

个人邮箱：ljccccccccccc@163.com。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/445ee2e6940e4f599c7caf3cf82c6585.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/85dd03d61ffb44379e64a990c5d66860.jpg
[2019090211085490.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/39d58bef040f418d99767f9b993132b3.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9b84eae639a743a3852eeeadc35917ac.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/fdba4a730d0844618402c8bf4cf72b87.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/bf40e1ca2c9f4f48a217503f300693c8.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdV9qaWFjaGVu_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/0a8eb35c41f64499a9623b52368a7022.jpg