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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

课程目标：
设计一个动态网站。使用任何一个前端框架如Angular等进行某应用网站的开发如英雄之旅等，需要有CRUD即增删改查功能并有一定的样式，网站内放置结业报告的超链接。网站需部署到你喜欢的托管服务器上如github等

一、angular环境配置

参考angular官网教程

二、网页成品展示

1.展示界面

功能：
此界面显示当前拥有的罐子。
点击一个存钱罐可进入该存钱罐的详情界面。
功能图示：

2.操作界面

功能：
此界面显示罐子的基本信息，并提供删除按钮，以及强制删除按钮。
点击“去除这个罐子”按钮后，如果当前金额为0，则去除，如果不为0，则删除失败，弹出提升信息，点击其中行进入相应罐子的详情界面，在强制删除栏内可根据名称选择罐子，点击“delete”按钮可去除相应罐子。
功能图示：

3.详情界面

功能：
此界面显示所选中罐子的详细信息，提供修改名称功能，存取钱功能，撤回功能，以及存取钱产生的金额变更明细。
在存取钱内输入数字，点击“确定存钱”或“确定取钱”可实现存取钱，点击“撤回上一步操作”并可撤回上一次的存取钱操作，金额变更明细列表显示历史操作，输入序号，点击“删除记录”按钮可删除对应序号的记录
功能图示：

4.新建界面

功能：
可输入三个信息：名称、金额、用途，点击“新增一个罐子”可创建，其中名称和金额是必要的，否则无法创建，创建后再展示界面和操作界面都有显示。
功能图示：

三、开发过程

配置angular环境；
定义接口属性，添加服务；
编写增删查改功能函数到服务中，以便存储和读取数据库；
添加所需要的组件，在各组件的ts文件中编写相关的功能函数，设计各组件的html文件；
2.
添加路由功能，使各组件的html文件可在同一页面显示；
引入官方Material组件库；
通过ng add @angular/material命令安装组件库，导入相关组件；
对先前的html文件中引入material组件，使功能更美观；
编辑各个组件的css文件，使页面更美观；

四、遇到的问题

1.配置angular环境时遇到了许多的问题，原因是更改了安装路径，导致需要配置许多环境变量，后来卸载掉重新下载，保持默认路径，过程许多的问题都不出现了。
2.为实现每个罐子拥有一个独立的金额变更明细，为接口添加一个数组类型属性，在尝试为数组属性压入事件时屡次失败，试图在钩子函数中传递数组属性的值，在控制台始终报错未定义，后来发现定义的方式与位置不对，并且可直接使用this为数组属性压入值。
3.编写存取钱的函数时，需要进行金额的加减，在ts文件用+和-符号进行赋值，页面显示的内容始终为字符串类型的相加减，后来发现属性的加减需要先转换属性值，然后进行加减。

总结

本次结业作业选择了难度相对较大的动态网页，在配置angular的时候花了很长的时间才成功配置，通过跟着angular的官方教程学习“英雄之旅”，在过程中不断学习和了解angular中许多函数的用法，学习了如何通过API对数据库进行存储，理解后开始自己的动态网页设计，在设计中由于所要实现的功能不同而代码有很大的区别，以致花了相当长的时间去思考如何实现想要的功能；在使用material模块时多次无法运行，后来发现是缺少了部分需要导入的包，最后终于完成了自己的动态网页，本次学习受益匪浅。