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

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


前言

课程目标:
设计一个动态网站。使用任何一个前端框架如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模块时多次无法运行,后来发现是缺少了部分需要导入的包,最后终于完成了自己的动态网页,本次学习受益匪浅。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值