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

《通信软件开发与应用》课程结业报告
一．实验内容
Angular官方教程项目英雄之旅
二．开发过程
1.开发环境
首先，一个工程都需要先建立一个环境，所以我们先来搭建一个angular的环境。以下介绍下各个环境。
①安装JS运行环境node和版本控器git：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。

②包管理器yarn：Yarn 有效地对请求进行排队处理,避免发起的请求如瀑布般倾泻,以便最大限度地利用网络资源。 相同的软件包 从npm 安装软件包并保持相同的包管理流程。

③包源配置：默认包仓库在海外, 速度及稳定性受到GFW的影响(WTF GFW！), 改为使用淘宝的包源。

④Angular开发工具angular/cli：Angular CLI用于简单，快速构建Angular2项目，只要掌握几行命令就能扣减前端架构。依赖于NodeJs和npm。
2.具体流程

Part1
1.创建英雄列表组件
2.添加 hero 属性
4.显示英雄
5.启动
Part2
1.创建Hero类
2.把组件的 hero 属性的类型重构为 Hero。
3.显示 hero 对象
4.双向绑定
5.缺少 FormsModule
最后结果
四、显示英雄列表
Part1
1.创建模拟（mock）的英雄数据
2.显示这些英雄
3.使用 ngFor 列出这些英雄
4.可能会遇到的错误
4.效果如下
Part2
1.给英雄列表“美容”
2.主从结构
①添加 click 事件绑定
②添加 click 事件处理器
③添加详情区
五、主从组件
1.制作 HeroDetailComponent
①编写模板
②添加 @Input() hero 属性
③修改 HeroesComponent 的模板
六、添加服务
1.为什么需要服务
2.创建 HeroService
Part1
①获取英雄数据
②修改 HeroesComponent
③注入 HeroService
④添加 getHeroes()
⑤在 ngOnInit() 中调用它
Part2
①可观察（Observable）的数据
②可观察对象版本的 HeroService
③在 HeroesComponent 中订阅
Part3显示消息
①创建 MessagesComponent
②创建 MessageService
③把它注入到 HeroService 中
④从 HeroService 中发送一条消息
⑤从 HeroService 中显示消息
⑥绑定到 MessageService
⑦为 hero 服务添加额外的消息
七、添加应用内导航
1.添加 AppRoutingModule
2.添加路由出口 RouterOutlet
3.添加路由链接
4.添加仪表盘视图
5.导航到英雄详情
6.添加英雄详情*视图
7.HeroesComponent 中的英雄链接
8.支持路由的 HeroDetailComponent
9.回到原路
八、从服务端获取数据
1.启用 HTTP 服务
2.英雄与 HTTP
通过 id 获取英雄
3.对英雄的基本操作
①修改英雄
②添加新英雄
③删除某个英雄
④根据名字搜索

三．遇到的问题以及部分解决方法
1.禁止运行脚本
解决方法:在网上查到了该问题的解决方法
在这里插入图片描述

组件是 Angular 应用中的基本构造块。 它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。

双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title 属性的值绑定到 HTML 中的 h1 标记中。相当于title是个变量

@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。
2. 经常有一些很小的语法报错导致程序无法运行
解决方法:在tsconfig.json 中关闭严格模式

四．总结
这次的英雄之旅项目做的比较仓促，因为之前的程序大作业和数据库大作业的时间太紧，于是做web作业的时间就晚了很久，导致质量不高。我选择的是Angular官方的入门项目——英雄之旅，由于官方的教程较为详细，而且逻辑比较清晰，除了以上提到的一些小问题之外几乎没有再遇到什么别的问题，但是这也会导致缺少对很多问题解决的经验，而且其中一部分的像航母结构比较冗长复杂，没有能够特别看懂。这也反映出我个人能力的欠缺。我想老师所提的学习的过程应该是简单和快乐的本意，应该是在学习中发现自己的问题然后自己解决它，然后一步一步的成长，不能单方面的只为了完成任务而忽视自己的缺点以及问题，同时也特别感谢老师的认真授课和帮助。也感谢同学间的帮助，为了把项目部署到github上费了许多力气，同学帮了很大的忙。这次的项目做的并不完善，其实还有很多外观和功能值得改善，苦于自己的能力和时间的有限，也知道了自己很多地方的欠缺。但我从中也感受到了开发网站来实现动作以及展示自己的所学知识的快乐。希望自己多加强动手能力和代码学习能力，努力让每一次学习过程都简单而快乐。