【Web应用系统】基于B/S架构的Web应用系统

基于B/S架构的Web应用系统

一、实验目的

设计、开发一个基于B/S架构的Web应用系统，具有完整的用户登录、信息增删改查等功能，并完成作品成果报告。

三、实验结果（结果描述、结果截图、代码截图等）

1.数据库准备。

首先将每个表的ID一列设为自增，具体操作为：将标识设为是，允许保存要求重新创建表的更改。然后将各数据填进各表里。

2.构建三层模型。

主要使项目结构更清楚，分工更明确，以便于后期的维护和升级。

⑴实体层（Model）。实现面向对象思想中的“封装”，完成三层间的数据传递功能。下图以AdminInfo类为例。

⑵数据访问层（DAL）。与数据库进行交互。树妖实现对数据的增、删、改、查的操作。将存储在数据库中的数据提交给业务逻辑层（BLL），同时将业务层处理的数据保存到数据库。

⑶业务逻辑层（BLL）。它是页面层和数据访问层之间的桥梁，用来实现包含验证、计算和业务规则等功能。
现以AdminInfo为例展示代码，如下图所示。

需要设置每层的引用。Web层引用BLL、DAL和Model；BLL层引用DAL和Model；DAL层引用Model;Model无引用。

3.页面设计

(1)主页设计
我们自己找素材将主页重新设计了一下，下图是主页展示，可以选择管理员还是学生登录。

下图是主页样式代码展示。

主页页面HTML代码如图所示。

(2)管理员登录页面
下图是管理端登录页面展示，与首页的不同之处是换了不同的背景图。

(3)管理员首页
首页采用HTML框架，把每一部分写在单独的页面中，需要设计的页面有top、menu、main。主页展示如下图。

代码如下

a.top页面主要有logo展示和一个LinkButton控件。HTML代码如图所示。

b. menu页面主要实现菜单功能，导航到所需展示数据的页面。
代码如下图所示。

c.main页面主要显示管理员相关信息，代码如下图所示。

(4)账号管理页面。主要实现对管理员账号的管理，包括增加、删除、修改和查询。页面上方包含两个文本框对应账号名称和密码，通过输入即可添加管理员。下方一个Repeater控件用于显示管理员账号信息，之后添加的信息也会显示。后两列点击图标，可以对信息进行修改和删除。后台根据传入的字符串进行修改或者删除操作。

前端部分代码如下图所示。

(5)学生列表页面。上方两个文本框可以按学生姓名或学院进行查询，信息展示在下方GridView控件上。里面还包含了一个复选框控件，可以进行多条信息的删除。如下图所示。

学生信息展示也使用了AspNetPAger控件进行分页展示，每一页最多展示5条数据。代码如下图所示。

(6)学生信息添加/修改页面。
用于添加或修改学生信息。在StudentInfo.aspx页面选择需要修改的学生，将学号通过查询字符串传入此页面。该页面包括了七个文本框（显示相应信息）、一个DropListDown控件（选择性别）和三个Button按钮（检查学号是否被添加过、添加按钮、修改按钮）。页面展示如下图所示。

HTML代码如下图所示。

(7)个人作品管理页面
显示学生提交的个人作品信息，也是使用了Repeater控件，也有修改和删除功能。由于代码和AdminInfo.aspx相似，不展示相关的代码。

(8)查看文件页面
该页面包含了两个Label控件，可以选择在线观看视频，也可以选择下载该视频。页面展示如下图。

代码如下图所示。

当点击两个Label的文字时，跳转到相关页面，PlayOnline.aspx,DownloadFile.aspx分别实现在线播放视频功能和下载视频功能。
(9)个人作品修改页面
该页面包括了四个文本框控件、一个textarea、两个FileUpload控件、一个image控件和四个Button控件。具体设计如下图所示。

前端HTML代码如下图所示。

(10)团队作品修改页面
该页面与个人作品修改页面相比增加了团队成员的信息以及分工。可以通过输入学生姓名来查询其学号。页面展示如下图。

前端HTML代码如下图所示。

(11)学生端页面展示
学生端用于学生修改自己账户密码、添加个人或者团队作品。页面展示如下图所示。

(12)首页设计
学生端首页设计与管理员端的首页设计所用的框架是一样的，同样是由top、menu、main组成。
(13)添加个人作品、个人信息管理、添加团队作品与管理员端相似。
(14)个人作品展示页面。主要作用是可以让学生查看自己提交的作品，具有下载、在线观看作品视频、查看具体信息等功能。用了GridView控件来展示数据。如下图所示。

前端HTML代码如下图所示。

四、总结与讨论（实验心得、难点分析等）
成功设计、开发了一个基于B/S架构的Web应用系统，具有完整的用户登录、信息增删改查等功能的系统。对三层架构、web系统开发有了更加完整的了解和开发经验，更好的掌握了上课所学的知识。