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

---

前言

本次web应用基础课程课程结业共有两个任务：

• 任务一为构建一个动态网站，我构建了一个商品销售信息系统，主要业务功能是管理员可以对商品相关信息的增删改查和商品的销售管理，普通用户可以根据需求线上下单。
• 任务二的题目为：《通信软件开发与应用》课程结业报告。本文主要阐述任务一所部署的动态网站做的什么(即功能)、开发过程、遇到的问题、如何解决、哪些未解决、总结。

---

电商平台——商品销售信息系统

任务一其实在本学期数据库原理课程的题目，在原有的项目基础上，我运用了web应用基础课上所学的新的知识，进一步修改完善了该项目，最终部署在我自己的腾讯云服务器上。
任务一的开发平台为Pycharm，网页采用HTML，CSS和JavaScript搭建，涉及到bootstrap，flex，jQuery以及ajax等技术，使用的前端框架主要使用python的Flask框架。数据库为MySQL数据库配合Navicat软件使用。
任务一的主要业务要求为：

• 实现商品的基本管理。要求同一种商品能够由多家供货商供货，商品类别要分级，商品的规格能够自行定义，同类商品有相同的规格。能实现对商品品牌、商品供应商、商品分类、商品规格和商品基本信息的添加、删除和修改。能根据相关的查询条件完成商品品牌、商品供应商、商品分类和商品基本信息的查询。能根据商品品牌、商品供应商和商品分类进行统计。
• 实现商品销售管理。客户能根据需求线上下订单，包含选择商品、订购数量等。能根据相关条件查询订单详细信息及做订单的相关统计。

任务一的数据要求为：

商品品牌:包含品牌名称、品牌网址、品牌图片等。
商品供应商:包含供货商名、联系人、联系电话、供货商简介等。
商品分类：分类名称、分类图片等。
商品规格:是指一些足以反映商品品质的主要指标，如化学成分、含量、纯度、性能、容量、长短、粗细等。不同类型商品规格描述不一样。
商品：包含商品代码（唯一）、商品名称、规格、型号、计量单位、市场价、销售价、成本价、商品缩略图、商品介绍，库存数量等信息。
订单：包含订单编号、客户姓名、客户手机号、客户地址、邮编、订购时间、订购总金额等；
客户信息：客户号、姓名、联系电话、地址等
订单明细：包含订单明细编号、订单编号、商品代码、单价、订购数量、金额等信息。

一、商品销售信息系统的主要功能

本实验为商品销售信息系统设计与实现。某电商平台需要管理平台的商品信息及销售信息，需要开发一套软件系统实现管理工作。需要完成商品的基本信息的管理和商品销售信息的管理。故本系统设计的用户分为两种：分别为root系统管理员和client普通客户。系统管理员的主要指职能为实现商品的基本管理。要求同一种商品能够由多家供货商供货，商品类别要分级，商品的规格能够自行定义，同类商品有相同的规格。能实现对商品品牌、商品供应商、商品分类、商品规格和商品基本信息的添加、删除和修改。能根据相关的查询条件完成商品品牌、商品供应商、商品分类和商品基本信息的查询。能根据商品品牌、商品供应商和商品分类进行统计。客户能根据需求线上下订单，包含选择商品、订购数量等。能根据相关条件查询订单详细信息及做订单的相关统计。

1.注册界面

首先是注册界面，注册后前往登录界面进行登录。注册页面所注册的账号皆为普通用户，登录后的权限只有购买下单功能。系统管理员账号由开发者所持有，能够对所有商品的相关信息进行增删改查。

2.登录界面

登录界面可以输入注册的普通用户账号登录，进行线上下单。也可以输入系统管理员账号，能够对所有商品的相关信息进行增删改查。只有登录之后才能进行线上下单或者对相关商品的信息进行修改和删除，登录后浏览器将保存用户的cookie，下次页面刷新可以不再手动登录，直到退出账号。为了便与测试，给出一个系统管理员账号和普通客户账号。

3.客户的下单界面

本页面展示了所有可购商品，点击红色的“点击购买”按钮，会生成一个订单号，进而进行商品的购买。

点击绿色的“购买”按钮，输入购买的数量，需小于库存数量。

客户根据需要完成购买之后，可以点击红色的“完成购买”进行下单，下单完成后相应商品的库存数量减少，库存数量为0时，该商品不再摆上货架。此时页面刷新，用户可以退出或者继续下单。

4.系统管理员的界面

右上角退出登录后，登录系统管理员账号可以查看商品、订单和客户的相关信息，并可以进行相关的增删改查，搜索框可以进行商品的查找。其中商品信息、供应商信息和可购商品信息，系统管理员可以对相关信息进行增删改查，可购商品信息为摆上货架的客户可以购买的商品。查看订单页面，系统管理员可以查看订单和其订单明细以及客户信息。

4.1商品信息界面

商品信息界面，系统管理员可以输入有效数据，点击“确认添加”按钮，即可添加一条商品记录，点击“删除”按钮，即可删除对应的商品记录，点击“修改”按钮，即可修改对应的商品信息。

4.2供应商信息界面

供应商信息界面，系统管理员可以输入有效数据，点击“确认添加”按钮，即可添加一条供应商记录，点击“删除”按钮，即可删除对应的供应商记录，点击“修改”按钮，即可修改对应的供应商的信息。

4.3可购商品界面

可购商品信息界面，系统管理员可以输入有效数据，点击“确认添加”按钮，即可添加一条可购商品记录，点击“删除”按钮，即可删除对应的可购商品记录，点击“修改”按钮，即可修改对应的可购商品的信息。此界面的可购商品信息为客户可以下单购买的商品。

4.4查看订单界面

查看订单界面，系统管理员可以查看已购订单的信息

点击查看订单明细，可以查看改订单的相关明细

点击查看客户信息，可以查看客户的相关信息

---

二、项目的开发过程、遇到的问题、如何解决、哪些未解决

1.开发过程

本项目的开发平台为Pycharm，网页采用HTML，CSS和JavaScript搭建，涉及到bootstrap，flex，jQuery以及ajax等技术，使用的前端框架主要使用python的Flask框架。数据库为MySQL数据库配合Navicat软件使用。

• 前端页面采用传统的前端三剑客搭建，为了快速开发，所有页面皆使用了老师课上将的MDB。页面的相关事件函数使用jQuery语法。
• 使用python的Flask进行服务器端的响应，这是一个轻量级的灵活的前端框架，相关路由函数的操作较简便。
• 使用MySQL数据库，采用ORM技术操作数据库中的数据，ORM是通过使用描述对象和数据库之间映射的元数据，将程序中的对象自动持久化到关系数据库中。
• 项目中很多功能要求页面不刷新，即不能够重定向，故学习并使用了Ajax技术。
• 项目开发完成后部署到了自己的云服务器上。

2.项目开发时所遇到的问题及解决的方法

这是我第一次搭建一个功能较为完善的动态网站，过程也有遇到很多苦难，主要是技术上的，当我遇到问题无法解决时，进行科学上网，查询相关的解决方案。遇到的几个印象深刻的问题及解决方案具体如下

2.1.发送邮箱验证码的问题

首先是注册界面的注册功能，需要发送邮件验证码进行注册，如何进行邮箱注册成为了一大难题

具体解决方案为：我去flask官方中文文档查询并学习了发送邮件相关api的调用，学习到了发送邮箱的对象函数及相关参数的配置,官方文档如下：

2.2.如何对路由进行模块化分组

在开发的过程中，我发现有很多很多个路由及其函数要去写，一个文件里面实在是难以添加和修改新路由，这个问题虽然不致命，但是确实是必须解决的

具体解决方案为：在项目中我发现很多需要展示的页面是属于一类页面，是可以放到一个python文件中的，因此可以进行模块化编程，把功能类似的路由拆分到一起，但是这样做的规范需要我去学习。通过搜索引擎进行相关查询搜索，我了解并学习了flask的蓝图(blueprint)技术：

2.3.Ajax的学习

在界面搭建过程中，我发现很多功能需要点击按钮，请求服务器后返回数据，但是此时页面不可以刷新，我之前写的请求都会使页面刷新，这是不可取的

具体解决方案为：我学习了jQuery调用Ajax，有了Ajax技术，这个问题也就迎刃而解，展示一下最简单的jQuery调用Ajax：

2.4.页面刷新需要重新登录的问题

每次我们登录后，如果页面刷新，用户就需要重新登录，这样的话用户体验是非常不好的，有没有一种方法能够在浏览器本地保存用户的登录信息呢

具体解决方案为：我去flask官方中文文档查询并学习了flask框架如何操作浏览器本地的cookie和session，根据官方文档的指示，我学会cookie和session的相关操作：

2.5.页面共同内容(导航条)重复冗余

几乎每个页面都有共同的导航条部分，该部分代码如果复制后在每个HTML文件中粘贴，能达到目的，但是代码过于冗余

具体解决方案为：使用搜索引擎查找并学习到了flask模板继承的语法，重复的导航条只需要在base.html基页面写一遍，其他需要的页面使用相关语法继承即可：

3.项目开发时未解决的问题

项目开发不总是一帆风顺的，会遇到很多问题，以当前的技术是难以解决的，需要后续继续学习才能够不断完善项目，我项目开发所未解决的问题如下：

• 1.页面结构较为丑陋，前端开发中我们必须要学会搭建一个美观的网页。现阶段我对MDB学的不够深入，仍需继续学习MDB和Vue等技术，以便网页呈现得更为美观
• 2.用户线上下单的界面不能勾选商品下单，自动在下单前计算出价格，用户体验不好，还需要学习淘宝京东等页面的下单模式，提高用户体验。
• 3.存储到数据库中的用户密码未加密，若数据库被攻破，则黑客可能使用用户的密码去该用户的其他平台进行撞库，这是极大的安全隐患。
• 4.当添加记录的表单填写的数据为无效数据的时候，只会提醒参数错误，用户并不知道是什么类型的参数错误，需要进一步改进。

---

总结

以上是本学期web应用基础的课程结业报告总结。

• 任务一部署了一个动态的网站。主要为电商平台需要管理平台的商品信息及销售信息，需要开发一套软件系统实现管理工作。我设计好数据库的相关模型结构后，选择B/S架构进行完成相关功能的设计。我把之前学的HTML，CSS和JavaScript以及相关的拓展插件结合最近所学的python的flask（一款轻量级的web应用框架）结合到了一起，根据系统的设计要求，采用MySQL数据库技术，最终完成了整个项目的设计，我收获到了很多，技术也有所进步，感受到了一个完整项目开发的不易。

• 任务二就是撰写了本文——《通信软件开发与应用》课程结业报告，该报告详细阐述了本项目的功能，开发过程和所遇到的问题及其解决方法，以及尚未解决的问题，在总结中我又进一步深刻地感悟到自己开发的全过程，有很大收获.

经过了一个学期的学习，我对web应用开发有了更加深刻的了解，我认识到了web开发通过不断实践的收获真的很多。经过本次本次课程的结业任务，我从开始的设计，到后来的实施，专业技术不断进步，都是受益匪浅的。自己也一定会更加努力，不断提高和丰富自己，希望在实践中多尝试并加以总结，祝大家在前端的学习道路上收获满满！！！