《通信软件开发与应用》课程结业报告

一、概述

本项目是电影清单List of Movies应用的开发，使用Angular前端框架，利用HTML、CSS，基于TypeScript进行实际开发，具有增删改查功能，主要可以实现用户对自己的电影清单的相应操作管理，如显示整个电影的列表清单、查看电影的详细信息、根据需求调整电影清单的内容，以及在不同的数据视图之间导航等功能。

二、开发过程

2.1 开发框架选择

Angular集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，是一个由Google开发维护的开源前端开发框架和平台。框架提供了大量高效的结构或者良好的模式，根据框架提供的结构或者模式去书写代码，由框架帮助我们去执行相应的操作。

2.2 确定设计目标

总体目标希望通过此次设计掌握Angular开发页面的整个流程。因此，这里设计对象为电影movie，其描述特征包括ID、片名、简介三个部分。

更加具体的一些要求包括：使用 Angular 的内置指令来显示或隐藏元素，并显示电影数据的列表；使用组件显示电影详情，即具体属性信息；只读数据使用单向数据绑定，可编辑字段使用双向数据绑定用于修改；通过管道格式化数据；创建共享服务管理数据；使用路由实现在不同视图和组件之间的导航。

2.3 环境搭建

创建一个工作区和初始应用项目，设置空间名为angular-list-of-movies，通过终端命令完成必要安装包和依赖项的安装，并自动创建工作区得到对应的配置文件。

我们最基本得到的是根组件，在后续创建其他组件的时候流程是差不多的，我们会得到三个实现文件，xx.ts文件、xx.html文件和xx.css文件，分别代表组件的类代码、组件的模板、组件的私有CSS样式。如下图所示，生成组件都是非常标准的结果。

元数据是Angular 需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库的信息内容。

注意在每次创建一个新的组件时，在Angular核心库中为组件类加上@Component装饰器，以指定其所需的元数据；在别的类引用时添加export指令代码实现，尤其注意要在根组件中导入，不过一般都会在创建时终端自动生成添加代码，所以还是比较方便的。

2.4 列表显示

创建movie类，设置序号id、片名title和简介Introduction三个属性。为了使显示内容多元化，通过管道uppercasePipe用来格式化字符串和显示数据，达到更好的显示效果。

为了能够让用户可以更容易的对列表内容进行操作，建立双向数据绑定ngModel，以便于数据流既可以从属性流动到textbox中，又可以从textbox流回属性中，进行交互，达到显示与修改的双重目标。

同时，添加click事件绑定，使得用户可以在点击电影名称后，界面显示相应信息，点击列表目标电影，界面出现详情介绍。

为了能够显示出列表的内容，减少代码的撰写量，通过ngFor实现，遍历整个数据，因为ngFor是Angular的复写器指令，可以为列表中的每项数据复写其宿主元素，使得代码可以更加精简。

2.5 主从组件

把所有特性都放在同一个组件中，将会使应用在后续开发中后变得不可维护。把大型组件拆分成小一点的子组件，每个子组件都要集中精力处理某个特定的任务或工作流是一个不错的选择，因此这里先将电影列表详情移入到一个独立可复用组件DetailComponent中，这样电影MovieComponent只用来显示电影的名称列表，具体的详情内容由另一个组件完成，而这个组件只是接收一个对象内容并显示的作用。

在这里的传递过程中是单向的数据绑定，两个组件具有父子关系，对应的可以通过父组件控制到子组件。

这里可以和后面的2.7部分组合来看。

2.6 创建服务

在以上过程中，网页获取和显示到的都是模拟数据，通过重构后，电影组件会变得更为精简，聚焦于为视图提供支持，相应的更容易使用模拟服务进行单元测试。服务的原因主要考虑到，组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。

服务是在多个“互相不知道”的类之间共享信息的好办法，创建服务可以用于发送消息，组件注入服务可以通过服务用来显示消息或完成自己的其他目的。服务引入了@Injectable装饰器，提供一个可注入的服务，一个service可以从Web 服务、本地存储（LocalStorage）或一个模拟的数据源等任何地方获取数据。

通过可观察数据Observable，使用异步的方式，从远端服务器获取数据，可以实现同步赋值。

在这里设置Messages组件，观察实时的用户操作情况，并且可以通过clear清除处理。

2.7 路由添加导航支持

设置一个独立的顶端模块加载和配置路由器，这里设置的是app-routing文件，其实思路和我们在计算机网络学到的路由器很像，但更直接来说就是一个导航司机的功能，路由配置好之后，设置目的地即可实现。配置时需要考虑path和component两个重要属性，前者用于匹配浏览器地址栏中URL字符串，后者作为导航至该路由的目标组件， 会告诉路由器要在哪里显示路由的视图。通过创建组件的路由，提取到目标属性，就可以通过服务得到目标数据了。

需要说明的一点是，在最开始搭建angular框架时，选择使用路由也就是y，系统就已经自动配置好了路由。

当应用启动时，浏览器的地址栏指向了网站的根路径。它没有匹配到任何现存路由，因此路由器也不会导航到任何地方，因此需要添加默认路由，浏览器直接显示出默认的地址。

这里可以实现局部的跳转，并且将列表清单和详细内容。

2.8 服务器获取数据

HttpClient是Angular通过HTTP与远程服务器通讯的机制。应用将会通过HttpClient来发起请求和接收响应，而不用在乎实际上是这个内存Web API在拦截这些请求、操作一个内存数据库，并且给出仿真的响应。可以通过npm命令安装该包。

2.9 数据操作

对于添加操作，设置添加按钮并绑定click点击事件，当事件触发时调用add函数，传给服务，subscribe回调函数会将其数据追加到列表中。

添加water片名后，可以发现按序号显示到了最后。

对于修改操作，设置保存按钮并绑定click点击事件，调用电影服务中的update函数，并保存到服务器中。

如在这里修改water名字为water FALL。

对于删除操作，设置删除按钮并绑定click点击事件，事件触发时，直接进行移除，删除电影的id和其他信息。

点击右侧的叉叉即可实现。

对于搜索操作，设置需要查找判断的内容，进行匹配，事件触发时调用组件中的search方法，将值传到textBox中。

输入F可以查找到对应F开头的影片名称。

2.10 主页显示

设置默认路由为结业报告text文件下。

点击The List和Hot Movie，相应界面显示出电影列表和受欢迎的电影内容。

三、问题分析

3.1 构造函数保持简单很重要

在构造函数中调用服务或其他功能会使得其功能变复杂，让构造函数保持简单，只做最小化的初始化操作，比如把构造函数的参数赋值给属性。构造函数不应该做任何事，只承担最小化的简单功能，避免由此出现的错误。

3.2 CSS引入时注意规范

为了使界面变得更漂亮，会使用到CSS，而具体的实现中，很容易去查网上其他人的一些设计代码，这里在引用的时候就务必要注意好格式和名称等问题，因为这一部分在实际运行中基本不会报错，但对应效果就是网页没有实现目标效果，在对应调试找错的时候比较有容易忽略，当然使用F12开发者工具还是可以很容易的解决这一问题，只是在平时开发过程中一定要注意这一点。

3.3 配置路由而不是点击超链接

虽然目标都是使用url达到界面发生改变的功能，通过路由可以有更加优秀的效果，比如只是局部跳转，整体页面不会全部刷新，体验感更好。当视图越多时，越能够发现路由较好的效果。

RouterModule 可能会被多次导入：每个惰性加载的发布包都会导入一次。 但由于路由器要和全局共享的资源打交道，所以不能同时激活一个以上的路由服务。

3.4 去除无效的代码

因为整个过程是层层递进的，比如最开始我们使用了onselect点击完成跳转查看，在后续又可以通过路由直接实现，如果不及时删除或注释掉，会发生函数被多次定义的可能，即便没有问题，但代码过于冗余庞杂，在开发中并没有什么好处。

3.5 Angular布置到Github

这一点是自己一直在纠结的地方，也相对花了不少时间。

但实际上按照标准流程是可以成功的
1、创建Github Pages仓库；
2、通过添加指定你在上一步中创建的 GitHub 存储库的远端地址，来在本地项目中配置 git。创建存储库时，GitHub 已提供了这些命令，以便你可以在命令提示符下复制和粘贴它们。

git remote add origin https://github.com/your-username/your-project-name.git
git branch -M main
git push -u origin main

3、创建并签出一个名为 gh-pages 的 git 分支。

git checkout -b gh-pages

4、借助 Angular CLI 命令 ng build 和以下选项，使用 Github 项目名称构建应用。这里的 your_project_name 是在步骤 1 中为 GitHub 存储库提供的项目的名称。
确保在项目名称的两边都包含有斜杠，如 /your_project_name/ 的斜杠。

ng build --output-path docs --base-href /your_project_name/

5、当构建完成时，把 docs/index.html 复制为 docs/404.html。

6、提交你的更改，并推送。

7、在 GitHub 项目页面上，转到 Settings 并向下滚动到 GitHub Pages 部分，以配置要从 docs 文件夹发布的站点。

8、单击 GitHub Pages 区顶部的 GitHub Pages 链接，以查看已部署的应用程序。链接的格式为 https://<user_name>.github.io/<project_name>。

注：
1、如遇到空白界面问题，将index.html中的<base href="/">改为<base href="./">，文件需要运行在服务器环境下，可以用自己配置的服务器打开也可以下载HBuilder运行页面
2、遇到404问题，可以在url后面加上/index.html

四、总结

通过整个项目开发工程，掌握了Angular框架开发网页的初级过程，完成了一个动态的网页的设计。在过程中遇到的许多问题其实大多是由于自己在web方面的开发经验不足，遇到的一些细节方面的纰漏，当然也为此付出了很多的时间，但同样的收获也很大，自己的了解和认识逐渐深入。

通过这样一个过程，比较深的体会到需求分析的重要性，最为明显的就是界面美化部分，即CSS的设计，我们很难具体说做成一个什么样子，总是在开发过程中考虑到使用者的习惯，根据自己的审美进行优化，只要明白需要什么，通过查询资料总是实现设计目标。另外，同样的方法我们可以通过多种形式来实现，但总有一个比较好的选择标准，最简单的例子就是，假如不适用service服务，只通过各种组件集合而成，可以实现相同的目的，达到相同的效果，但在实际实现代码的思路是不一样的，在后续的开发拓展中的操作也是不一样的，所以开发过程还是需要参考一般规范和设计原则，正所谓前人栽树、后人乘凉，可能一些规则在开发时显得很繁琐，但实际上都是别人踩过的坑，然后回来告诉我们怎么做会更好，实现的效果会更精简等等。

其实这个项目有很多地方有待完善，但也挺后悔自己没有留出足够多的时间来完成，但其实大部分的内容一通百通，举一反三的效果在后续时间中可以不断完善更新。课程的结束并不是终点，而是自己在前端开发的一个起步，希望自己在之后时间里不断完善、美化、拓展整个部分，以期有更多的收获。