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

演示：

Angular是一个由Google开发维护的开源前端开发框架和平台（其它两个流行的是React和Vue）。
框架提供了大量高效的结构或者良好的模式，我们根据框架提供的结构或者模式去书写代码，由框架帮助我们去执行相应的操作。

《英雄之旅》应用，可以显示一个英雄列表，并允许用户选择一个英雄，查看该英雄的详细信息，并对英雄进行增加、修改和删除功能。

开发过程

首先，一个工程都需要先建立一个环境，所以我们先来搭建一个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。

⑤后台服务器Deployd：Deployd是一个基于NodeJs和MongoDB数据库的开箱即用的后台服务程序。这里我先在本地端口部署了MongoDB数据库，之后将MongDB部署在百度云上。

整个开发的流程为创建英雄编辑器，显示英雄列表，添加服务，从数据库中获取数据。并最终在英雄之旅中实现了增删改的功能。

1.创建英雄编辑器
该开发流程主要的工作有，使用 Angular CLI 创建一个名为 heroes 的新组件；从 Angular 核心库中导入 Component 符号，并为组件类加上 @Component 装饰器；显示 HeroesComponent；使用双向数据绑定修改英雄编号和名称；声明并添加元数据至组件类中
2.显示英雄列表
主要内容就是扩展《英雄之旅》应用，让它显示一个英雄列表，并允许用户选择一个英雄，查看该英雄的详细信息。
3.添加服务
组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。
本节主要内容创建一个HeroService，来进行各种操作。本节课，你将创建一个 HeroService，应用中的所有类都可以使用它来获取英雄列表，依靠 Angular 的依赖注入机制把它注入到 HeroesComponent 的构造函数中。
4.从数据库中获取数据
主要通过 HTTP 请求获取英雄数据。使用是MongDB进行作为数据库，并完成了云上部署数据库。用户可以添加、编辑和删除英雄，并通过 HTTP 来保存这些更改。
云上部署MongoDB

遇到的问题以及部分解决方法

本节主要记录遇到的问题以及部分问题的解决方法，在解决方法的过程中改正了之前对于个别命令以及语法的错误认识和错误用法，也逐渐加深了我对angular开发的操作流程。

问题1 ：

解决方法：
无法加载脚本

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

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

@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。

问题2：关闭angular严格模式

在tsconfig.json 中关闭严格模式

问题3

PS F:\sort-test\vcode test\web\angular-tour-of-heroes\TourOfHero> dpd -d
deployd CLI version 2.0.2
starting deployd
Failed to start MongoDB (Make sure 'mongod' are in your $PATH or use dpd --mongod option. Ref: http://docs.deployd.com/docs/basics/cli.html)

mongoDB的配置以及运行

之后重新新建文件即可成功运行

问题4

Service.ts 中deleteHero应操作的对象是类中的成员而不是类的一个属性，这样会无法对数据库数据进行正确操作。

如上图修改即可完成对数据的删除。

问题5（未解决）

通过进行搜索发现已经不支持该模块，需要进行升级才可以使用。

问题6

问题：
ng add angular-bootstrap-md
Cannot find module ‘@schematics/angular/utility/config’

解决方法：

npm uninstall @schematics/angular
npm install @schematics/angular@9.1.0

Cannot find module ‘@schematics/angular/utility/config’

总结

首先，我先自我批评下，学习的过程我比较痛苦。有可能是我个人时间安排以及效率问题，将作业拖到了临近截止日期才进行完成，且个人认为效果不好。主要实现了angular动态网站英雄之旅的增加，修改和删除。且大多数语法都只是作为了了解，并没有深刻的熟练掌握，自己动手能力的锻炼还不足。
其次，在课上由于有老师引导可以跟着老师的思维的节奏去想问题和解决问题，但一到代码实战就立刻发杵，知道命令从那里来以及那里去，以及错误的位置，但苦于找不到解决方法，这也反映出我个人能力的欠缺。我想老师所提的学习的过程应该是简单和快乐的本意，应该是在学习中发现自己的问题然后自己解决它，然后一步一步的成长，不能单方面的只为了完成任务而忽视自己的缺点以及问题，同时也特别感谢老师的认真授课和帮助，也感谢同学间的帮助。诚然开发一个成熟的网站，我还欠缺些能力和时间，但我从中也感受到了开发网站来实现动作以及展示自己的所学知识的快乐。希望自己多加强动手能力和代码学习能力，努力让每一次学习过程都简单而快乐。

Angular 教程：英雄之旅相关推荐

Angular教程英雄之旅版本踩坑记录
Angular教程英雄之旅版本踩坑记录前言问题1 问题2 问题3 问题4 总结前言这两天心血来潮,跟着Angular官网的教程英雄之旅(https://angular.cn/tutorial) ...
Angular学习教程-英雄之旅
Angular学习教程-英雄之旅官网链接 https://angular.cn/tutorial 文章目录 Angular学习教程-英雄之旅一.能学习到二.创建项目三.英雄编辑器 Part1 ...
Angular官方文档学习-英雄之旅
Angular教程-英雄之旅本教程需要完成的工作: 使用 Angular 的内置指令来显示 / 隐藏元素,并显示英雄数据的列表. 创建 Angular 组件以显示英雄的详情,并显示一个英雄数组. 为 ...
Spring Security和Angular教程
Spring Security和Angular教程 (一)安全的单页应用程序在本教程中,我们展示了Spring Security,Spring Boot和Angular的一些很好的功能,它们协同工作 ...
Spring Security和Angular教程（一）安全的单页应用程序
Spring Security和Angular教程(一) 安全的单页应用程序在本教程中,我们展示了Spring Security,Spring Boot和Angular的一些很好的功能,它们协同工作 ...
Spring Security和Angular教程（二）登录页面
Spring Security和Angular教程(二) 登录页面在本节中,我们将继续讨论如何在"单页面应用程序"中使用带有Angular的Spring Security.在这里 ...
编码 4:4:4_学习编码：英雄之旅
编码 4:4:4 几乎所有人都很难学习编码. 这很难,令人沮丧. 初学者从0到1的资源很容易找到,但要弄清楚从0到精通的路径却不容易. 随着发明了越来越多的选项,工具,框架和潜在路径,现代编码环境只会 ...
英雄之旅：为入迷而改变
英雄之旅:我选择,我存在,我自由. 寂静. 不再像以前,能到生命力像水流一样在身上流动. 不能再像以前那样入迷一件事情,心里想的都是Ta. 我再次追溯Ta们的缘由,这次不再是[毫无头绪],我发现了一些 ...
Angular: Material Design Angular教程：Material设计 Lynda课程中文字幕
Angular: Material Design 中文字幕 Angular教程:Material设计中文字幕Angular: Material Design Angular Material是UI组 ...

Angular 教程：英雄之旅