《 Java Web开发从入门到实战（第2版·微课视频版）》-实验教学大纲

第21页共21页《JavaWeb开发从入门到实战（第2版·微课视频版）》实验教学大纲大纲版本：v1.0课程名称（中/英）：JavaWeb开发/JavaWebDevelopment学分：3实验学时：24（含实战）课程类别：专业课课程性质：必修课开课学期：4适用专业：软件工程、计算机科学与技术先修课程：Java程序设计、数据库原理及应用一、课程目标《JavaWeb开发》是软件工程、计算机科学与技术等专业本科阶段的重要专业课程，该课程实验环境选用Eclipse或IntelliJIDEA。通过本课程的学习和上机实战操作，使学生掌握JavaWeb开发中JSP、Servlet以及Ajax、JSON、jQuery技术的基础知识和实际应用，熟练使用Eclipse或IntelliJIDEA集成开发工具进行JavaWeb开发。注重培养学生的实践与实战能力，掌握基本的JavaWeb开发创新方法和应用解决方案，为企业级Java应用开发打下坚实基础。二、项目及课时分配序号项目名称课时数项目类别项目类型要求每组人数1调查问卷制作1专业基础设计性必做12页面布局1专业基础设计性必做13表单验证1专业基础设计性必做14JSP脚本元素的应用1专业基础设计性必做15JSP动作标记的应用1专业基础设计性必做16JSP内置对象的应用2专业基础设计性必做17使用JavaBean计算三角形面积和周长1专业基础设计性必做18基于Servlet的登录验证1专业基础设计性必做19使用基于Servlet的MVC模式设计一个Web应用（四则运算）1专业基础设计性必做110会话跟踪技术的应用：登录注销系统1专业基础设计性选做111监听器的实际应用——统计在线用户1专业基础设计性选做112使用JSTL标签打印九九乘法表1专业基础设计性选做113使用PreparedStatement语句实现多条件查询2专业基础设计性选做114使用jQueryAjax技术实现注册邮箱的唯一性验证1专业基础设计性选做115综合实战1：基于JSP+JavaBean+Servlet的电子商务平台的设计与实现8专业综合综合性选做1-3三、教学方法学生自己动手实验为主，老师指导为辅。四、教学内容及要求实验一调查问卷制作（1课时）实验目的：1、掌握HTML的常用标签；2、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：编写网页practice1_1.html，具体要求如下：（1）网页中有个form表单，表单处理程序为本页面程序，表单提交方式为“post”，表单提交编码方式为“multipart/form-data”；（2）页面运行效果如图1所示。图1practice1_1.html页面运行效果主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验二页面布局（1课时）实验目的：1、掌握CSS的基本语法；2、掌握常见的DIV+CSS布局类型；3、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：按照下面的步骤编写网页practice1_2.html：步骤1：使用DIV定义结构一个典型的版面分栏结构：页头、导航栏、内容、版权。结构代码如下： <divid="header"></div> <divid="navigator"></div> <divid="content"></div> <divid="footer"></div>将这四个盒子装进一个更大的盒子，body中，如下：<body>上面四行代码</body>步骤2：定义body的属性 body{ font-family:Arial,Helvetica,sans-serif; font-size:12px; margin:0pxauto; height:auto; width:800px; border:1pxsolid#006633;}步骤3：定义页头（header）的属性 #header{ height:100px; width:800px; background-image:url(plane.jpg); background-repeat:no-repeat; margin:0px0px3px0px;}步骤4：定义导航栏（navigator）的属性#navigator{/*定义一个导航栏的长盒子*/ height:25px; width:800px; font-size:14px; list-style-type:none;/*让nav这个大盒子下面的小盒子LI列表样式不显示,这对于标准浏览器很重要*/}#navigatorli{ float:left;/*让LI这些小盒子左对齐*/}#navigatorlia{ color:#000000; text-decoration:none;/*让LI盒子里面的链接样式没有下滑线*/ padding-top:4px; display:block;/*让LI里面的链接块状呈现，就像一个按钮，而不必一定要点中链接文字才起作用*/ width:131px; height:22px; text-align:center; background-color:#009966; margin-left:2px;}#navigatorlia:hover{ background-color:#006633;/*鼠标移到链接盒子上面改变盒子背景色*/ color:#FFFFFF;}步骤5：定义内容部分（content）的属性#content{ height:auto; width:780px; line-height:1.5em; padding:10px;}#contentp{ text-indent:2em;}#contenth3{ font-size:16px; margin:10px;}步骤6：定义页脚（footer）的属性#footer{ height:50px; width:780px; line-height:2em; text-align:center; background-color:#009966; padding:10px;}步骤7：定义各标记的边界和填充（开头处） *{ margin:0px; padding:0px;}步骤8：结构代码如下<body> <divid="header"></div> <divid="navigator"> <ulid="navigator"> <li><ahref="#">首页</a></li> <li><ahref="#">文章</a></li> <li><ahref="#">相册</a></li> <li><ahref="#">Blog</a></li> <li><ahref="#">论坛</a></li> <li><ahref="#">帮助</a></li> </ul> </div> <divid="content"> <h3>前言</h3> <p>CSS是英文CascadingStyleSheet的缩写，又称为“层叠样式表”，简称为样式表。它是W3C定义的标准，一种用来为结构化文档（如HTML文档）添加样式（字体、间距和背景等）的计算机语言。</p> <h3>理解DIV+CSS布局</h3><p>简单地说DIV+CSS(DIVCSS)被称为“WEB标准”中常用术语之一。首先认识DIV是用于搭建html网页结构（框架）标签，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。 </p> </div> <divid="footer"> <p>关于|广告服务|招聘|客服中心|QQ留言|网站管理|会员登录|购物车</p> <p>Copyright©清华大学出版社</p> </div></body>步骤9：页面运行效果如图2所示。图2DIV+CSS布局主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验三表单验证（1课时）实验目的：1、掌握JavaScript的语法基础；2、掌握JavaScript的事件处理机制；3、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：制作一个用户注册页面practice1_3.html，具体要求如下：（1）有常用的登录账号、密码、确认密码、姓名、身份证号码（只考虑18位的身份证）、出生年月日、住址、邮编、E-mail等输入区域（自己设定）；（2）自己设定验证规则，在提交时检验是否符合要求，alert出非法的输入，并将焦点返回要输入的控件对象；（3）根据出生年月日判断身份证号码是否合法（只考虑18位身份证）；（4）其它验证：登录账号只能是字母或数字且以字母开头；密码要在8位以上且需要有字母和数字之外的字符；出生年月日的格式为yyyy-mm-dd；邮编为6位数字；E-mail的基本格式验证。主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验4JSP脚本元素的应用（1课时）实验目的：1、掌握Java程序片的定义与使用；2、掌握JSP成员变量与方法的定义与使用；3、掌握Java表达式的定义与使用；4、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：1、编写1个JSP页面，在JSP页面中使用Java程序片输出26个小写的英文字母表；2、利用成员变量被所有客户共享这一性质，实现一个简单的计数器，页面效果如图3所示。图3简单的计数器3、使用JSP脚本元素，在浏览器中输出大小为15*10表格，页面效果如图4所示。图415*10表格主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验五JSP动作标记的应用（1课时）实验目的：1、掌握动作标记include、forward和param的应用；2、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：1、include和param动作标记的应用：编写3个JSP页面：input.jsp、first.jsp和second.jsp，将3个JSP文件保存在同一个Web服务目录中，input.jsp使用include动作标记加载first.jsp和second.jsp页面。first.jsp页面可以画出一个表格，second.jsp页面可以计算出两个正整数的最大公约数。当first.jsp被加载时获取input.jsp页面中include动作标记的param子标记提供的表格的行数和列数，当second.jsp被加载时获取input.jsp页面中include动作标记的param子标记提供的两个正整数的值；2、登录验证：编写3个JSP页面：login.jsp、validate.jsp和success.jsp，login.jsp输入用户名与密码信息，提交给validate.jsp进行用户验证，如果验证为合法用户（用户名：tom，密码：jenny）则转到（forward动作标记）success.jsp页面，否则转到login.jsp页面重新登录。主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验六JSP内置对象的应用（2课时）实验目的：1、掌握JSP内置对象的定义及常用方法；2、理解request、session以及application的区别；3、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：1、获取客户端的基本信息：编写1个JSP页面practice4_1.jsp，在该页面中使用request的方法获取客户端的IP地址、客户机名称、服务器名称以及服务器端口号。2、登录验证：编写3个JSP页面login_1.jsp、server.jsp和loginSuccess.jsp。在页面login_1.jsp中输入用户名和密码，单击“提交”按钮将输入的信息提交给页面server.jsp。在server.jsp页面中进行登录验证：如果输入正确（用户名“zhangsan”，密码“123”），提示“成功登录，3秒钟后进入loginSuccess.jsp页面”，如果输入不正确，重新定向到login_1.jsp页面。先运行login_1.jsp页面，页面运行效果如图5~7所示。图5login_1.jsp页面图6server.jsp页面图7loginSuccess.jsp页面3、购物车：用户到便民超市采购商品，购物前需要先登录会员卡号，购物时先将选购的商品放入购物车，最后到柜台清点商品。请借助于session对象模拟购物车，并存储客户的会员卡号和购买的商品名称。会员卡号输入后可以修改，购物车中的商品可以查看。编写程序模拟上述过程。loginID.jsp实现会员卡号输入，shop.jsp实现商品导购，food.jsp实现商品购物，count.jsp实现清点商品。本节实践环节的4个JSP页面都保存在目录practice4中，先运行loginID.jsp页面，运行效果如图8~11所示。图8会员卡输入页面图9导购页面图10购物页面图11查看购物车商品页面4、网站访客计数器：使用application对象实现网站访客计数器的功能。主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验七使用JavaBean计算三角形面积和周长（1课时）实验目的：1、掌握JavaBean的编写与定义；2、掌握<jsp:useBean>、<jsp:setProperty>、<jsp:getProperty>等JSP动作标记的使用；3、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：使用JavaBean计算三角形面积和周长：编写两个JSP页面：inputTriangle.jsp与showTriangle.jsp。inputTriangle.jsp提供一个表单，用户可以通过表单输入三角形的三条边提交给showTriangle.jsp。用户提交表单后，JSP页面将计算三角形面积和周长的任务交给一个bean去完成，创建bean的源文件是Triangle.java。页面运行效果如图12与13所示。图12三角形边长输入页面图13信息显示页面主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验八基于Servlet的登录验证（1课时）实验目的：1、掌握Servlet对象的创建与运行；2、理解JSP页面访问Servlet的运行机制；3、掌握重定向与转发的使用方法；4、理解重定向与转发的区别；5、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：登录验证：编写登录页面login_1.jsp，在该JSP页面中通过表单向urlPatterns为“{"/loginServlet_1"}”的Servlet（由LoginServlet_1类负责创建）提交用户名和密码。如果用户输入的数据不完整，loginServlet_1将用户重定向到login_1.jsp页面；如果用户输入的数据完整并正确（用户名“zhangsan”，密码“123”），loginServlet_1将用户的请求转发给loginSuccess_1.jsp页面，loginSuccess_1.jsp页面显示用户输入的信息。主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验九使用基于Servlet的MVC模式设计一个Web应用（1课时）实验目的：1、掌握MVC的基本概念；2、理解MVC模式的基本思想；3、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：使用基于Servlet的MVC模式设计一个Web应用（四则运算），要求如下：用户通过JSP页面inputNumber.jsp输入两个操作数，并选择一种运算符，点击提交按钮后，调用HandleComputer.java这个Servlet。在HandleComputer中首先获取用户输入的数字和运算符并将这些内容存入到实体模型（由Computer.java创建）中，然后调用业务模型（由CalculateBean.java创建）进行计算并把结果存入到实体模型中，在showResult.jsp中调用JavaBean显示计算的结果。主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验十会话跟踪技术的应用：登录注销系统（1课时）实验目的：1、理解会话跟踪的含义；2、掌握会话跟踪技术的应用；3、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：编写一个登录注销系统，用户登录成功的情况下，将用户的信息保存在会话HttpSession中，用户信息可以在会话过程中任意页面或Servlet中被获取并显示，使用HttpSession的invalidate()方法实现系统的注销功能。一旦注销，该用户信息丢失，用户需要重新登录。该系统需要考虑用户浏览器禁用Cookie的情况。主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验十一监听器的实际应用——统计在线用户（1课时）实验目的：1、理解监听器的原理；2、掌握监听器的实际应用；3、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：做一个网站ch8SS，实现在线用户的统计。可以通过ServletContextListener监听，当Web应用上下文启动时，在ServletContext中添加一个List.用来准备存放在线的用户名。然后通过HttpSessionAttributeListener监听，当用户登录成功，把用户名设置到session中，同时将用户名放到ServletContext的List中。当用户注销会话时，将用户名从应用上下文范围中的List列表中删除。主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验十二使用JSTL标签打印九九乘法表（1课时）实验目的：1、了解JSTL的环境配置；2、掌握JSTL的核心标签库的应用方法；3、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：编写1个JSP页面，在该页面中使用<c:forEach>标签输出九九乘法表。页面运行效果如图14所示。图14使用<c:forEach>打印九九乘法表主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验十三使用PreparedStatement语句实现多条件查询（2课时）实验目的：1、理解JDBC的基本原理；2、掌握PreparedStatement语句的编写方法；3、掌握数据库的基本操作CRUD；4、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：使用PreparedStatement语句实现多条件查询：编写两个JSP页面：inputQuery.jsp和showGoods.jsp。用户可以在inputQuery.jsp页面输入查询条件，单击“查询”按钮后，在showGoods.jsp页面中显示符合查询条件的商品信息。需要编写一个Servlet类SelectGoodsServlet.java实现该题的条件查询功能，另外需要使用例11-2的实体类Goods。页面运行效果如图15和16所示。图15输入条件图16符合条件的记录主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验十四使用jQueryAjax技术实现注册邮箱的唯一性验证（1课时）实验目的：1、掌握Ajax、JSON以及jQuery等技术的应用；2、理解异步请求的实现方法及机制；3、掌握jQuery对Ajax的实现方法；4、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：使用jQueryAjax技术实现注册邮箱的唯一性验证。主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具实验十五（综合实战1）基于JSP+JavaBean+Servlet的电子商务平台的设计与实现（8课时）实验目的：1、掌握基于JSP+JavaBean+Servlet开发的流程、方法以及技术；2、熟悉电子商务平台的业务需求、设计以及实现；3、熟练撰写设计文档；4、了解电商行业的法律法规、市场准入机制；5、加强团队协作，积极承担团队成员与负责人的多种角色；6、认真书写实验报告，如实填写各项实验内容。实验要求：按照实验内容及实验报告要求，完成规定的实验内容，并认真填写实验报告。实验内容：1、电子商务平台分为两个子系统，一是后台管理子系统，一是电子商务子系统；2、管理员登录成功后，进入后台管理主页面可以对商品、商品类型、注册用户以及用户的订单进行管理。后台管理子系统的模块划分，如图17所示；后台管理子系统后台管理子系统商品管理查询订单销量统计安全退出新增商品删除商品修改商品查询商品月统计类型统计类型管理新增类型删除类型修改类型查询类型图17后台管理子系统3、非注册用户只可以浏览商品、搜索商品，不能购买商品、收藏商品、查看购物车、查看用户中心、我的订单和我的收藏。成功登录的用户可以完成电子商务子系统的所有功能，包括购买商品、支付等功能。电子商务子系统的模块划分，如图18所示；图18电子商务子系统4、使用JSP+JavaBean+Servlet开发电子商务平台的各个模块；5、其他具体内容要求见教材的第13章内容。主要设备和实验环境：计算机，Eclipse或IntelliJIDEA集成开发工具五、主要教材（指导书）及参考用书（1）使用教材陈恒.JavaWeb开发从入门到实