IS开发实训报告

IS开发实训报告

这篇博客主要以网站管理员信息表为例,介绍信息系统开发实训的流程。同时,附上相关软件免费下载资源+web工程下载链接。

注:仅供学生参考借鉴!

实践工作说明

序言

报告摘要

------我的实训工作从了解老师的演示案例的基本原理开始,一行行仔细地梳理演示案例中各种程序文档的逻辑原理和相互关系,挖掘每个部分的功能与内涵。之后,结合第一阶段的线上课堂培训知识,参考老师所给演示案例,应用EasyUI框架,使用JSON数据传输,编写更符合用户体验的页面及逻辑。最终创新性地设计出功能更强大、容错性更好、体验感更棒的信息系统。
------同时,由于我所使用的应用软件为MyEclipse CI 2019MySql8.0.12Tomcat8.0等,和老师推荐使用的版本有较大差别,因此我也遇到了许多额外的问题。但通过大量查找网上资料、修改调试,各种问题也就迎刃而解了。在IS信息系统开发实训的实践过程中,我从底层的相关应用软件的安装、学着使用应用软件,到学习Html、CSS及JavaScript等web语言、Java相关知识及数据库知识,再到能够自己根据实训要求,开发出一个较为完善和美观的信息管理系统。每一个阶段都带给我烦恼,却又让我在解决各种问题的过程中得到历练和能力的升华,使我感受到问题成功解决带给我的短暂却又强烈的快乐。或许,我的实训成果不是最好的,但对我来说,倾尽心血的就是最宝贵的。

成绩期望

我的成绩期望是:优++。

理由

在整个实训过程中,我始终保持认真严谨的态度对系统进行设计、调试和维护,系统的业务流程设计具有合理性、功能完善、界面美观、富含特色。

  1. 在业务流程设计方面:系统流畅地实现了增加成员、查找成员、修改成员、删除成员等基本功能。同时,在业务流程上设计更符合用户体验和操作逻辑,比如,在修改成员信息方面,信息修改页面表单上有修改密码按钮,当不点击时,密码和修改密码输入框不会显示,此时结合改进的写入sql函数,可以修改其他信息而密码不变。若点击按钮时,按钮会消失,密码和修改密码输入框会显示,此时就也可以对密码进行修改。从而避免要创建一个包含修改密码和一个不包含修改密码的页面,避免系统冗余。
  2. 功能完善与扩展:系统内部设计了许多使用小工具,完善了系统的可操作性。
  3. 功能完善与扩展:系统内部设计了许多使用小工具,完善了系统的可操作性。
  4. 界面美化:系统采用了EasyUI的经典框架,同时结合我所增添的CSS样式以及JavaScript函数,系统的样式清新美观,功能生动。
  5. 实现特色:系统间数据传输采用JSON格式,而不再使用ArrayList通过while循环进行数据展示。因此,数据可靠性毫无疑问得到了较大的增强。
  6. 此外,由于我比别人多知道一点基础知识,我也有幸帮到了3位同学,从开始到实训结束,我从头至尾一直帮助着这几位同学成功地设计出了自己的系统。

实践体会

在这次信息系统开发实训的实践中,我学到了许多web知识、Java知识、数据库知识,慢慢形成了系统设计应具有的严密逻辑、敏捷思维。特别是在一次次调试、纠错和完善的过程中,我在面对困难的时候变得更有耐心、更有细心,能够运用各种工具查找解决问题的办法。在一筹莫展、毫无头绪的时候,我也能慢慢地顶住压力,保持理性思考。同时,在同学需要帮助的时候,即使我不是很空闲,我也会停下来认真帮助同学,我体会到了帮助他人所带来的无尽乐趣。同时,我领悟到:许多事,只要不断的走下去,就会有意想不到的收获!实践出真知,行动得结果,空谈会误国,实干才兴邦!在理论中实践,在错误中成长,在失败中总结,在跌倒中爬起,坚持不断的走下去,学下去,这世间终究会有一片属于自己的天空!

实训改进建议

我对实训的建议就是:由于很多同学都是第一次接触到web知识、数据库知识,当他们自己要去操作时,由于没有知识功底,基本很难较快地开始系统设计。虽然老师们讲课讲得很好,但是这次线上上课时间较短,这些同学们很难快速地具备系统开发的初步能力。据我了解,很大部分同学都照葫芦画瓢,根据演示案例增改相关参数。一旦报错,很难及时发现问题的根源。因此,我建议可以适当增加基础知识培训的时间,特别是结合例题讲解知识点,希望老师们能够稍微考虑一下。

实训日志

日志一
时间:2020年7月29日
今日进展:7月25、26号上了任明仑老师的IS开发实训理论,昨天余本功老师讲了数据库设计,教我们安装数据库及相关软件的流程。但我的电脑上已经有了MySql8.0.12,所以我计划就使用这个版本。在网上搜罗了一个上午,终于找到了一个可使用的mysql-connector-java-8.0.12数据库驱动。
问题:使用不同版本的MySql可能会对后面的实训产生影响,万一有问题,就只能卸载了在装上老师推荐的版本了。
随想:数据库应该没什么大问题了。明天上课得问问老师数据库版本不同有没有什么影响。

日志二
时间:2020年8月1日
今日进展:今天安装了MyEclipse CI 2019。起初以为老师没有发安装包,在网上找遍了都没找到符合指导书上界面描述的有有效注册码的软件,最后只得安装2019版的,界面有很大的区别。好在找到了一篇和我的版本十分符合的介绍软件的博客,到晚上终于配置好了开发环境,不久之后就发现老师发了安装包……
问题:配置好MyEclipse的开发环境后,发现新建web工程的时候,会有红叉叉,一直解决不了。
随想:看来要仔细查看老师发的每一个文件,不然现成的“早餐”到晚上吃就“馊”了。话说一定要尽快解决新建web工程的一系列错误提示。

日志三
时间:2020年8月4日
今日进展:搞了几天,终于发现新建web工程为什么会提示错误,我解决了一系列的问题:更新电脑上JRE与JDK分别到8版本与1.8版本、修改环境变量、升级Tomcat为Tomcat8版本……系列操作后,错误提示消失。
问题:感觉自己缺乏足够的信心去做好实训项目,可能是短时间难以接受大量新的知识的缘故吧。
随想:各种软件和程序包的版本一定要对应,不然就会出现不兼容的状况,从而导致一系列的错误。

日志四
时间:2020年8月7日
今日进展:昨天晚上最后一节线上实训培训课程结束。今天把老师所上课的知识回顾和学习了一下,感觉自己一定程度上对JavaScript、JSON、AJAX等知识有了初步的应用能力。
问题:有进展就有问题(苦恼),今天运行外部的Tomcat时,端口被占用报错了。按照网上教程,找到占用该端口的进程后,用CMD命令将其关闭时,却提示无法关闭此进程。
随想:最近MyEclipse开发环境总是出现各种各样的错误,如果明天还不能解决问题,我就要考虑使用老师推荐的版本才行了。

日志五
时间:2020年8月8日
今日进展:今天终于把MyEclipse的历史遗留问题解决了。同时,我根据分配到的任务,在数据库建好了我负责的网站管理员信息表(Administrators_Info),外事具备,只等开干!
问题:今天大致上一切顺利,没有遇到什么大问题。
随想:感觉准备阶段我就耗费了不少时间,看来提前准备好实训所需工具和环境,对后面的开发阶段节省时间是很有意义的。不过,马上就要开学考试了,各科复习以及科目三考试使我不得不短暂地停下脚步。

日志六
时间:2020年8月28日
今日进展:昨天才考完最后一门,此时距离上一次写日志已有20天之久。今天导入演示案例的项目,开始时运行一直报错。后来发现,是MySql8.0.12的驱动和老师的驱动在driver命名上有区别,应该为com.mysql.cj.jdbc.Driver,这是版本不同所导致的,不过还是被顺利解决了。更改相关文件及参数后,演示案例成功在电脑上运行。
问题:MyEclipse非正常关闭后,Tomcat就打不开了。
随想:今日份开心的事就是演示案例的成功运行,标志着我的开发环境经受住了检验,不过我也要抓紧时间,明天要开始自己的项目了。

日志七
时间:2020年8月29日
今日进展:学习和运行老师的演示案例,我开始构建我自己的项目。由于我使用了EasyUI框架,用到了datagrid数据表,它必须用JSON传输数据,我花费了一个下午,下载了7个JSON相关的jar包,最后终于实现了JSON的功能。
问题:由于我使用了JSON,意味着老师演示案例的系统结构不在适用于我,很多功能和函数都要我自己进行摸索,任务越来越艰巨了。
随想:实训不能照着老师给的演示案例生搬硬套,而我的设计结构的被迫改变,使我丧失了搬运老师样式案例的机会。但这又给了促使我真正学习知识的机会,没有捷径可走,我脚下开辟的路才可能更有价值。明天我一定要努力,争取实现一个功能,从而看到我的付出所蕴含的价值和意义。

日志八
时间:2020年8月31日
今日进展:今天取得了丰盛的成果,实现了增加、删除和查找的功能。两天之前,我还没有任何进展,同时还在为我的设计结构的改变而发愁。但事实证明,我能做得更好,我实现了很多演示案例上没有的功能,比如选中一行点击修改图标,就可以进行修改,而不是要找到表中该项数据的修改链接,。
问题:在数据操作方面,Boolean类型和DateTime类型的数据处理起来比较棘手,很容易导致500报错。
随想:基本功能已经实现了一大半了,我心中的担忧的石头也落了下来,明天要把所有的基本功能实现,加油、加油!

日志九
时间:2020年9月1日
今日进展:经过一整天的调试,目睹了无数500和404之后,我终于实现了最后一个基本功能:“改”。此外,我创新性在修改页面的表单上增加了一个按钮,不点击时密码和修改密码输入框不会显示,此时结合改进的写入sql函数,可以修改其他信息而密码不变。若点击按钮时,按钮会消失,密码和修改密码输入框会显示,此时就也可以对密码进行修改。
问题:修改信息时,可以为空的时间输入框如果没有输入时,就会报错,所以我暂时限制该项必填。
随想:相关的增、删、查、改功能已经顺利实现,但对异常数据的验证能力十分脆弱,明天一定要好好弄弄。

日志十
时间:2020年9月2日
今日进展:基于昨天实现的修改功能,今天对提交修改表单新增了表单验证的JS。不同于演示案例的是,我实现了验证提示以“”标签的形式,在输入框右侧提示的功能,在用户体验感上做出了较大的改进。同时,验证的正则表达式功能更强,比如验证手机号,手机号要符合规范的13、14、15、17、18、19开头的数字,而不单单知识验证是不是11为数字。
问题:在验证功能上,我在每个输入框属性上加了“onblur”,以实现失去焦点时即验证的功能,但实验多次却达不到理想的结果,只能在提交表单时验证。
随想:我发现JavaScript的重要作用不仅体现在验证功能上,JavaScript可以实现跟种各样的功能,从网页元素到数据,感觉一切都可以JavaScript。

日志十一
时间:2020年9月3日
今日进展:网站管理员管理信息系统结构和功能实现方面大致做成了,今天主要是实现了页面的美化。之前使用的EasyUI框架比较分散,整体性不强,不利于将来系统的维护。美化之后,页面不仅更加美观,系统的结构框架也更加清晰和明了。
问题:在美化的过程中,一些自己写的CSS样式和EasyUI的样式相冲突,导致前者无法被展现出来。由于时间紧迫,部分样式被放弃实现。
随想:到此,我的实训工作基本结束了。回望这一段时间,我受益匪浅,我现在十分感激之前认真完成每一个阶段、每一个目标的自己,以后再接再厉!

正文

实践目的与要求

(1)实践目的
针对掌握Java编程语言的准大三信管专业学生,但尚未学习数据库和 web 应用程序开发,这两门课将在大三学习。该阶段的主题是 IS 开发入门训练,以增强学生对信息系统软件开发的感性体验,为后续学习打下实践认识基础和感性认识。
(2)实验要求

  • 从表库中选择一张表,开发一个操作单张表的Java Web应用程序,实现所选表的增、删、改、查,在 Web Form 中动态显示表或视图中的数据;
  • 数据库平台拟采用 MySQL、SQL Server、Access,编程语言拟采用 Java,开发平台拟采用 MyEclipse 或 JCreator LEdeng 等其他文本编辑器;
  • 要求每个学生过关,故一人一组,即每人学生从表库中选择一张表,不能雷同,可采用随机抽取方式; 测试时,基本功能要实现;
  • 给出非正常数据,要能够处理,是否有错;
  • 业务流程设计要合理性;
  • 了解功能实现原理,对代码理解。

实践任务

我的实践任务是构建网站管理员信息表(Administrators_Info),并根据数据表设计一个能对数据表进行正确增、删、查、改操作的网站管理员管理信息系统。
表 1 网站管理员信息表

解决方案

(1)业务分析
观察网站管理员信息表的结构,数据信息主要可以分为成员属性类、联系方式类、从业类、审核类以及时间类。主要业务应该分为网站管理员信息汇入、信息分布、信息删除、信息查询四个模块。其中信息汇入主要包括网站管理员信息的增加,信息分布主要包括网站管理员信息的修改和更新,信息删除主要包括删除网站管理员信息,信息查询主要包括对成员信息的查找与展示。主要业务结构图如下所示。
图 1 业务结构图
(2)相关环境

  • Mysql管理工具:phpMyAdmin(来源于phpstudy)
  • 运行环境:Apache Tomcat 8.0
  • 数据库为:MySQL 8.0.12(来源于phpstudy)
  • 开发环境:MyEclipse CI 2019
  • 开发语言:Java

(3)技术架构

  • Mysql+jsp+serverlet

(4)解决步骤
设计系统功能创建的界面及解决步骤为:
Members.java->MemberService.java->index.jsp->AddMember.jsp->checkadd.js->Addme.java->update.jsp->SearchMember.java->getMembers.jsp->MemberManage.jsp->SearchiByID.jsp->SearchByName.jsp->Memberme.java->update.jsp->checkupdate.jsp->detail.jsp

实践过程

(1)环境搭建
由于之前电脑上就有了MySql8.0.12,所以数据库安装版本就为此版本,不在另外下载老师推荐版本。之后选择安装MySQL工具,这里我选择的是我之前安装的phpMyAdmin工具,新建一个名为webadmin的数据库,并设置相应的用户名和密码。最后,在该数据库中创建任务数据表Administrators_Info,并填入测试数据。
图 2 phpMyAdmin视图下的数据表
MySQL相关操作完成后,在网上找到了mysql-connector-java-8.0.12数据库驱动,给以后创建工程时,安装jdbc驱动使用。之后开始安装Java的编辑工具。由于之前没留意老师发了MyEclipse 2017的安装包,我安装的是MyEclipse CI 2019版本。这就造成大二上半学期的Java课程使用的JDK和JRE版本低于要求,不能满足较高版本数据库及编辑软件要求。因此,重新下载和安装JDK1.8JRE8
最后安装Tomcat服务器,我所安装的Tomcat版本为8.0。由于安装的MyEclipse CI 2019版本较新,面板和功能有了巨大改进,所以选择Tomcat8.0防止版本不匹配出现各种意料之外的问题。至此环境搭建基本完成。
(2)工程创建
基本环境搭建完成之后就开始了创建web工程,首先在创建的MySQL数据库中导入表名为book的数据表。其次,在MyEclipse中点击File->New->Web Project,创建名为Book的工程。之后在MyEclipse中先导入老师的演示案例的工程文件,基本流程是:在MyEclipse中右击Book工程->点击import->选择book所在位置->引入成功。再从MyEclipse中配置JDK打开 Windows->Preferences->点击 java 左侧的箭头展开目录->点击 Installed JREs->点击Add->选择 Standard VM->点击 next->点击 Directory ->选择之前所安装的JRE 目录->点击 Finish结束配置。最后配置外部Tomcat8.0服务器,在MyEclipse中配置Tomcat8.0服务器->选择“Show Toolbar”->点击工具栏中的服务器图标右侧下拉箭头->选择 Configure Server 选项->打开服务器->配置界面->打开Server之后选择Tomcat8.0->点击enable->选择Tomcat8.0路径->查看JDK->点击ok。把老师的演示案例中的数据库驱动用mysql-connector-java-8.0.12数据库驱动替换,并“Build Path”后,运行演示案例中的index.jsp页面,一切正常运行,工程创建成功。之后,可以在该工程上进行设计自己的系统。
图 3 演示案例成功运行图
(3)编码实现
整个过程的完整流程图如下所示。
图 4 编码实现流程图
下面对各个部分的代码实现进行较为详细的介绍。

直接使用链接按钮进行跳转,方便简洁。

<a href="/admin/SearchMember?type=allmember" class="button"> 
<a href="/admin/jsp/SearchByID.jsp" class="button"> 
<a href="/admin/jsp/SearchByName.jsp" class="button"> 
<a href="/admin/jsp/AddMember.jsp" class="button">

在这里插入图片描述
跳转各网页介绍:
1、新增成员页面AddMember.jsp
在这里插入图片描述
其指令来自于index.jsp,关联了Severlet类Addme,实现增加成员的功能
表单设置

<form action="/admin/Addme" id="ff" style="width:100%" onsubmit="return validate_form(this)" method="post">

提交表单

<input class="easyui-linkbutton" type="submit" style="width:60px;height:30px;font-family:楷体;font-size:14px;font-weight:900" value="提交" />
  • checkadd.js用于验证提交的表单,从而保证数据的合法性、安全性
  • Addme.java为Severlet类,用于服务AddMember.jsp,响应页面的提交操作
    获得请求页面数据:
String AdminID =request.getParameter("AdminID")); 
Members member = new Members ();//创建持久化类对象 
member.setAdminID(AdminID);

将获取的页面数据赋给对象属性调用 MemberService类中方法,检查数据库中记录是否存在

ms.GetCountOfMemberByID(AdminID); 
  • 若记录不存在:
ms.AddMember(member);

向数据库加入新的成员数据

member =ms.CheckMember(member); 

得到新添加的新成员后,赋加数据

request.getSession().setAttribute("updateMember", member);

重定向到update.jsp页面

response.sendRedirect("/admin/jsp/update.jsp");

进入 update.jsp

  • 若记录存在:
    显示信息
request.setAttribute("updateMember", member);

赋加数据

 request.getRequestDispatcher("/jsp/AddMember.jsp").forward(request,response);

再次载入AddMember.jsp

2、查找页面,包括查找所有成员、根据用户名查询、根据姓名查询。

在这里插入图片描述
实现上述三种查找功能的核心是SearchMember.java文件中的Severlet类。
创建特定服务类对象

MemberService ms = new MemberService();

获取请求页面属性“type”的值,其值可能来自于Main.js、SearchByID.jsp、SearchByName.jsp等界面。

String type = request.getParameter("type"); 

以 AdminID 查询为例,其他方法类似:
创建数据集合对象

ArrayList<Members> al = new ArrayList<Members>(); 

获取请求页面控件byadminid的值

String id = request.getParameter("byadminid");

调用特定服务类对象中的方法,获取查询结果

al.add(ms.GetMemberById(id)); 

附加数据

request.getSession().setAttribute("MemberList", al);
request.getSession().setAttribute("ison", "ByID");

转到getMembers.jsp页面形成JSON数据格式

response.sendRedirect("/admin/jsp/getMembers.jsp"); 

3、JSON数据的形成、传输、展示
在这里插入图片描述
getMembers.jsp得到SearchMember.java的附加数据后
创建数据集合对象

ArrayList<Members>al=new ArrayList<Members>();

调用特定服务类对象中的方法,获取查询结果

al=(ArrayList<Members>)request.getSession().getAttribute("MemberList");

将每一个Member类通过循环取出来

for(Members member:al)

创建数据链表对象

List<Map<String,String>>lists=new ArrayList<Map<String,String>>();

创建Map对象

Map<String,String> member_one = new HashMap<String,String>();

将每一个取出的Member类的属性通过Map对象的put方法存入Map对象中,比如:

member_one.put("Admin_ID", member.getAdminID());

把每个Map对象通过.add方法,存入链表中

lists.add(member_one);

把链表通过JSONArray对象的方法,将其转化为JSON链表的格式

JSONArray jsonArray = JSONArray.fromObject(lists); 

创建新的Map对象,将"rows"- jsonArray,“total”-i键值对通过Map对象的put方法存入Map对象中

Map<String,Object> map = new HashMap<String,Object>(); 
map.put("rows", jsonArray);
map.put("total", i);//i表示行数

创建ObjectMapper对象,并将JSON格式数据准备好给其他页面使用

ObjectMapper objMap = new ObjectMapper(); 
objMap.writeValue(response.getWriter(), map);

MemberManage.jsp页面通过EasyUI的datagrid数据表,获取和展示JSON格式的用户数据

<table id="dg" class="easyui-datagrid" title="信息" style="width:100%;" data-options="rownumbers:true,singleSelect:true,striped:true,scrollbarSize:2,pagination:true,url:'./getMembers.jsp',method:'post'">

4、MemberManage.jsp页面中的数据表中含有实现详情、修改和删除的链接的表格元素
在这里插入图片描述
MemberManage.jsp页面数据表中最后三列分别为含有链接的详情、修改和删除项。

<a href='/admin/Memberme?type=goDetail&adminid="+member.getAdminID()+"'>详情</a>
<a href='/admin/Memberme?type=goUpdate&adminid="+member.getAdminID()+"'>修改</a>
<a href='/admin/Memberme?type=delete&adminid="+member.getAdminID()+"'>删除</a>

Memberme.java文件中含有Severlet类,其指令和属性值来自MemberManage.jsp,主要是提供修改和删除操作服务
获取请求页面属性“type”的值,其值来自于MemberManage.jsp界面

String type=request.getParameter("type");

获取属性type和adminid的值

request.getParameter("adminid"); 

根据type值进入不同四种状态:
在这里插入图片描述

  • type值为goUpdate:

进入修改页面,根据adminid的值,调用特定服务类 MemberService 的方法 GetMemberById,查询数据库,得到数据,赋加数据,定向至修改界面 update.jsp

  • type值为Update:

修改提交,指令来自 update.jsp 的提交操作,获取 update.jsp 的信息,创建持久化 Members 数据对象,调用 MemberService 类的方法 UpdateMember,向后台存数据,成功后:

response.sendRedirect("/admin/Memberme?type=goUpdate&adminid="+member.getAdminID()+"");

定向至 Severlet 类Memberme,从后台读取新修改数据在 update.jsp 显示。

  • type值为goDetail:

进入修改页面,根据adminid的值,调用特定服务类 MemberService 的方法 GetMemberById,查询数据库,得到数据,赋加数据,定向至详情界面 details.jsp

  • type值为delete:

删除数据,根据adminid的值,调用特定服务类 MemberService 的方法 DelMember,删除成功后定向至Severlet类 SearchMember,最后回到 MemberManage.jsp

response.sendRedirect("/admin/SearchMember?type=allember"); 

5、特殊数据处理

  • Date时间类型数据的处理:

由于Java的时间类型为如’Tue Sep 01 22:32:33 CST 2020’一样的格式,直接写入数据库会产生错误。因此,依靠java.text.SimpleDateFormat与java.util.Date类包,可以通过如下代码进行转换:

Date sdate1 = member.getAdminBegainTime();
Date sdate2 = member.getAdminEndTime();
String formatStr1 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(sdate1);
String formatStr2 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(sdate2);

将formatStr1与formatStr2代替之前的member.getAdminBegainTime()与member.getAdminEndTime()写入数据库,问题即可解决。

  • Boolean布尔类型的数据

由于Boolean类型的数据在前端是以单选的形式呈现的,如下图。
在这里插入图片描述
当布尔类型数据为true时,单选按钮自动选择第一个,否则选择第二个。该转化功能核心代码如下:

String GenderMan = "";
String GenderWomen = "";
String Pass = "";
String NoPass = "";
String Onduty = "";
String NoOnduty = "";
if(member.getAdminGender() == true){         //性别
					   GenderMan="checked";
				   }
				   else{
					   GenderWomen="checked";
				   }
 if(member.getIsPass() == true){         //审核结论
					   Pass="checked";
				   }
				   else{
					   NoPass="checked";
				   }
if(member.getIsOnduty() == true){         //是否在岗
					   Onduty="checked";
				   }
				   else{
					   NoOnduty="checked";
				   }

比如性别,若为true时,GenderMan = “checked”, GenderWomen = “”

<input type="radio" style="" name="admingender" value="True" <%=GenderMan %>>男
<input type="radio" name="admingender" value="False" <%=GenderWomen %>>女

此时,前端自动选择“男”选项。

(4)测试与运行
首先打开工程admin下的index.jsp文件,点击运行图标即可同时开启先前配置好的Tomcat8.0服务器,并运行页面,运行图如下:
在这里插入图片描述

点击进入管理面板,即type=allmember对应的MemberManage.jsp页面,数据显示一切正常:
在这里插入图片描述

点击新增成员,进入AddMember.jsp页面:
注:表单均含JS验证,以<span>标签形式提示,相比弹窗更人性化,在此不再赘述
在这里插入图片描述
点击提交后,新增成员成功,并跳转到update.jsp信息修改界面:
在这里插入图片描述
在这里插入图片描述
在此页面中,将从业年限修改为3,成功修改。
在这里插入图片描述
到SearchByID.jsp页面

  • 进行用户名查找不存在用户名:111111
    在这里插入图片描述

查询结果为空:
在这里插入图片描述

  • 查找存在用户名:2018…1
    成功查询到结果:
    在这里插入图片描述
    到SearchByName.jsp页面
  • 进行姓名模糊匹配不存在姓名:张新民
    在这里插入图片描述

查询结果为空:
在这里插入图片描述

  • 查找存在用户名姓氏:王

成功模糊匹配到2条记录:
在这里插入图片描述
在MemberManage.jsp点击详情链接,如点击用户名为2018…1的成员详情。
在这里插入图片描述
可以正常打开用户名为2018…1的用户详情。
在MemberManage.jsp点击删除用户名为121212的链接。
在这里插入图片描述
弹出弹窗,点击确定。
在这里插入图片描述
用户名为121212的成员成功删除。
在这里插入图片描述
在MemberManage.jsp页面右侧面板的搜索框里,输入要查找的用户名,即可得到该成员在数据表中的行数,比如查找用户名为2017332992的用户。
在这里插入图片描述
弹出弹窗,显示该成员在数据表中的行数为14。
在这里插入图片描述
与数据表中序号相对应。
在这里插入图片描述
至此,所有页面功能测试成功结束。

实训总结

(1)Web应用的建立过程
首先,在建立web应用之前,要结合自己分配的任务来进行考虑:通过对任务进行细致分析,挖掘客户的需求:需要实现什么功能,再对业务进行分析。在之后的各个开发阶段,应该对系统结构和功能设计要有一个清晰的思路,比如,要对各个类的功能很好地牢记和把握,可以通过绘制相关的流程图,帮助更加清楚地了解大致步骤。同时,在操作过程中,要保持足够的耐心和细心,防止因为疏忽大意,出现不该有的错误,导致系统无法正常工作。在最后也是最重要的测试阶段,需要耗费大量的时间和精力,通过各种各样的黑盒测试、白盒测试、单元测试、集成测试、系统测试等方式对设计的系统进行全面的测试和评估。
(2)Web应用的调试步骤与技巧
在对Java代码进行调试的过程中,可以在可能有问题的代码处设立断点。首先在Servers选项卡中,点击 Configure Server选项,选择Debug mode,选择MyEclipse自带Tomcat服务器,运行到断点处。可以按键盘F5跟踪进函数,F6单步运行,F7单步返回,组合使用即可。
对JSP进行调试的过程中,可以在jsp页面中含有java代码的地方添加断点,使用上述debug模式调试。测试jsp时一般使用alert 语句,语法是 “alert();” 。将该语句插入希望程序暂停的地方,可以弹出小窗口暂停程序,在一定程度上可以帮助排查错误。同时,JSP中的java 部分也可以打印输出到后台进行查看,检查问题。
对Js进行调试的过程中,可以在外部浏览器打开主页,进入想调试页,按下F12,设置断点。之后按下F5,刷新浏览器,可以看到代码执行到断点位置停止。将光标放在变量名之上上,可以显示出变量值,点击按钮“显示所有”, 点击红色圈内按钮,可以进行单步调试。光标键移至 value 处,可看到变量值。
(3)项目部署与项目拷贝的异同
相同点:项目部署与项目拷贝所包含的工程文件类型相同。
不同点:项目部与项目拷贝的不同点是项目部署是把写好的项目放到服务器容器里面去,比如必须要部署之后才可以成功启动Tomcat,而拷贝的项目只有代码并不能执行,只是节省了新建项目的步骤。
(4)MySQL软件、SQLyog软件、jdbc链接jar包、数据库、表之间的关系
MySQL软件是一个关系型数据库管理系统,这个管理系统可以管理多个数据库,将数据保存在不同的表中,使用访问数据库最常用的标准化语言,即SQL语言。具有体积小、速度快、成本低、开放源码等特点。
SQLyog软件是一个快速而简洁的图形化管理MySQL数据库的工具,可以快速直观地使我们维护MySQL数据库。
由于JDK本身并没有提供访问数据的能力,它只提供了一些接口,因此具体功能要由各个数据库的驱动jar包来实现,通过jdbc链接数据库可以进行执行SQL语句、处理返回结果等操作。在这次实训中,我所使用的数据库的驱动jar包为mysql-connector-java-8.0.12.jar。
数据库是以一定方式存储在一起、能与多个用户共享、具有低冗余度、与应用程序彼此独立的数据集合,用户可以对数据库中的数据进行增、删、改、查等基本操作。一般开发一个信息管理系统就会创建一个数据库,为了保存应用实体中的数据,会在数据库中创建一或多张表。
(5)JDK、Tomcat、MyEcplise之间的关系
JDK是Java语言的软件开发工具包,是整个Java开发的核心,包含了Java的运行环境和Java工具。
Tomcat服务器是一个免费的开放源代码的轻量级Web应用服务器,可以不依赖插件独立提供web服务。
MyEcplise是在ecplise 的基础上加上自己的插件开发而成的功能强大的企业级集成开发环境,主要用于Java等应用的开发。
在我们的实训任务中,我们使用MyEcplise软件进行Java代码的开发,而Java语言的开发环境就是JDK,完成代码编写后,我们可以将项目发布到Tomcat服务器上,在通过浏览器浏览。MyEcplise中也自带了JDK和Tomcat,但比外部的JDK和Tomcat更加占用内存,因此一般不使用。
(6)severlet、服务类、JSP、JS之间的配合关系
Servlet是 Java Servlet的简称,称为小服务程序或服务连接器,用Java 编写的服务器端程序,主要功能在于交互式地浏览和修改数据,生成动态 Web内容。
服务类中一般封装对业务逻辑操作的方法,如我在实训中分配到的任务中服务类对Administrators_Info表中网站管理员信息进行增、删、改、查,通过 SqlHelper与数据库进行数据交互,并根据具体业务需求做变动。
JSP是显示层。JSP在第一次运行时会自动编译成serverlet,JSP是web开发技术,当访问一个JSP页面时,服务器会将这个JSP页面转变成severlet小程序运行后得到结果并反馈给用户端的浏览器。也就是说JSP是页面,severlet是实现JSP的方法。
JS是JavaScript的简称,JS通常是运行在前台,即运行于用户浏览器,通常不需要服务器的后台支持(AJAX交互例外),混合在HTML中的JavaScript脚本程序直接被浏览器解释执行,以提高页面的美观性和UI操作响应速度为基本目标,与JSP运行的位置不同。JS 是javascript 是用于处理前端的,而JSP是 Jave Web Page 是网站的后台编程语言,用于处理后台数据。
因此,这四者在实现整个系统功能的过程中各司其职、各在其位,虽然发挥着不同的作用,但通过紧密的配合,能够实现各种复杂的系统功能。
(7)JSP页面间的信息传递方式
直接在URI后面添加参数
正如这次实训中使用普遍的:
<a href="XXXX.jsp?type=XXXX&adminid=XXXX>直接传递参数
尤其是在使用response.sendRedirect做页面重定向的时候,也可以用如下代码:
response.sendRedirect(“XXXX.jsp?type=XXXX&adminid=XXXX”)
可用request.getParameter(adminid)取得参数。
jsp:param
可以实现主页面向包含页面传递参数,如下:
<jsp:include page=“相对URL链接”>
<jsp:param name=“XXXX” value=“XXXX” />
</jsp:include>
还可以实现在使用jsp:forward动作做页面跳转时传递参数,如下:
<jsp:forward page=“相对URL链接”>
<jsp:param name=“XXXX” value=“XXXX” />
</jsp:forward>
可以通过request.getParameter(XXXX)取得参数
设置session和request
通过显示的把参数放置到session和request中,可以实现跨页面传递参数的目的或多个页面共享一个数据:
session.setAttribute(name,value);
request.setAttribute(name,value)
取参数:
value=(value className)session.getAttribute(name);
value=(value className)request.getAttribute(name);

友情链接+资源

免费环境配置软件及演示案例

下载链接:https://pan.baidu.com/s/1W74rXuHNVKeHrN6o8gAOeA
提取码:n5kq

作者原创案例

笔者原创案例地址:https://download.csdn.net/download/qq_45002960/12838785

恳请各位大佬,记得给我点一个赞吧!

  • 12
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梧桐※漂湘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值