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

最新推荐文章于 2024-08-05 11:39:08 发布

码婆Doph

最新推荐文章于 2024-08-05 11:39:08 发布

阅读量577

点赞数 1

分类专栏：原创技术之路项目

本文链接：https://blog.csdn.net/liu_jiachen/article/details/100191465

版权

原创同时被 3 个专栏收录

58 篇文章 3 订阅

订阅专栏

技术之路

14 篇文章 0 订阅

订阅专栏

项目

2 篇文章 0 订阅

订阅专栏

1.前言

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

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

2.目录

3.3 Angular8 + NG-ZORRO的使用

4.后记

3.正文

3.1 前端规划

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

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

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页面吧？综上所述，项目的组件结构关系如下：

项目结构如下：

~~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值为空的部分是默认导航的组件。

③ 引入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的组件。

3.3.2.3 register逻辑简述

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