• 了解JSP开发模型发展历程。
• 熟悉JSP Model1和JSP Model2模型的原理。
• 掌握MVC（Model-View-Controller，模型-视图-控制器）设计模式，其中控制器的角色由Servlet实现，视图的角色由JSP页面实现，模型的角色是由JavaBean实现。

二、实验环境

 IDEA2019、Windows10、Servlet、JSP、JavaBean。

三、实验步骤

实现用户注册需要创建两个JSP页面，注册页面register.jsp和注册成功提示信息页面loginSuccess.jsp；一个负责处理用户注册的请求的Servlet类ControllerServlet；两个JavaBean类，封装注册表单信息的JavaBean类RegisterFormBean和封装用户信息的JavaBean类UserBean；一个访问模拟数据库的辅助类DBUtil，这些组件的关系如下图所示。

（1）UserBean是封装用户信息的JavaBean，ControllerServlet根据用户注册信息创建出一个UserBean对象，并将UserBean对象添加到DBUtil对象中users成员，loginSuccess.jsp页面从UserBean对象中提取用户信息进行显示。

（2）RegisterFormBean是封装注册表单信息的JavaBean，用于校验从ControllerServlet中获取到的注册表单信息中的各个属性（也就是注册表单内的各个字段中所填写的数据）。

（3）DBUtil是用于访问数据库的辅助类，它相当于一个DAO（数据访问对象）。DBUtil类中封装了一个HashMap对象，用于模拟数据库中用户注册的信息，HashMap对象中的每一个元素即为一个UserBean对象。

（4）ControllerServlet是控制器，它负责处理用户注册的请求，如果注册成功，就会跳到loginSuccess.jsp页面，如果注册失败，重新跳回到register.jsp页面并显示错误信息。

（5）register.jsp是显示用户注册表单的页面，它将注册请求提交给ControllerServlet处理。

（6）loginSuccess.jsp是用户登录成功后进入的页面，新注册成功的用户自动完成登录，直接进入loginSuccess.jsp页面。

四、实验过程

1.本实验的文件结构如图1所示。

2.设置web.xml可以方便指定首页以进行注册页面的指定，指定Web页面首页为register.jsp文件，代码如图2所示。

3.对于ControllerServlet，代码如图3-图4所示。

4.对于DBUtil类文件，代码如图5-图6所示。

5.对于RegisterFormBean文件，代码如图7-图9所示。

6.对于UserBean文件，代码如图10所示。

7.对于注册页面Register.jsp，代码如图11-图13所示。

8.对于注册成功页面loginSuccess.jsp，代码如图14-图15所示。

五、实验结果与分析

1.对于普通用户注册界面，如图16所示。

2.在图16中点击“注册”，按钮，可以正常注册，使用了ControllerServlet，结果如图17所示。

3.在3秒后，跳转到了登录成功界面，结果如图18所示。

4.返回注册页面，再次以同样信息注册，会提示注册用户存在，如图19所示。

六、附件下载

1. 掌握JDBC操作数据库的步骤。
2. 熟悉 PreparedStatement和Statement对象的使用方法。
3. 掌握ResultSet对象的使用。
4. 掌握释放数据库资源方法。

二、实验环境

 IDEA2019、Windows10、Servlet、JSP、JavaBean、JDBC、Mysql。

三、实验步骤

（1）设计登录页面，提交登录信息到控制层。Servlet获取登录页面的username和password。

（2）遍历数据库中数据表，是否存在username，存在则继续执行程序，不存在则结束程序。

（3）遍历数据库中数据表，查找对应username的password，判断password是否与登录页面的password一致，一致则完成登录，不一致则跳出。

（4）数据库资源允许的并发访问连接数量有限，因此，当数据库资源使用完毕后，一定要释放资源。

四、实验过程

0.本次实验数据库版本为8.0.33（JDBC驱动也为8.0.33）如果您下载了附件，且数据库版本不一致，请替换为相应版本的JDBC驱动。数据库用户名为root，密码为123456.

1.本次实验使用的数据库详情如图1所示，列结构如图2所示。

2.本次实验文件结构如图3所示。

3.对于index.jsp，代码如图4所示。

4.对于SQL_UNIT类文件，代码如图5所示。

5.对于DB_UNIT文件，代码如图6所示。

6.对于接收用户输入的Servlet控件loginServlet，代码如图7所示。

7.对于进行输入数据传递到数据库进行处理的控件LoginServlet，代码如图8所示。

8.User类如图9所示。

五、实验结果与分析

1.根据图1数据库的用户信息，输入符合要求的用户名和密码，如图10所示。

2.以图10中正确信息登录，回显“用户名”及“登录成功”字样，结果如图11所示。

3.以图10中错误密码登录，回显“密码错误”字样，结果如图12所示。

4.以图13为例输入图1中不存在的用户信息，回显“用户不存在”字样，结果如图14所示。

六、附件下载

1. 熟练使用集合中数据的操作方法，如保存、遍历蛋糕对象（Cake）。
2. 掌握运用Servlet动态展示数据列表的方法。
3. 掌握创建Session对象的方法，并能设置或获取会话数据。
4. 掌握设置Session和Cookie生命周期的方法。

二、实验环境

IDEA2019、Windows10、Servlet、HTML。

三、实验步骤

（1）以购买蛋糕为例,首先创建蛋糕对象（包括属性和方法），并存储到MAP集合中。

（2）运用Servlet展示集合中的所有蛋糕列表，增加超级链接。

（3）通过URL地址栏发送请求，并传送ID参数，Servlet判断id值，如果存在，则创建Session对象和购物车对象，并将选择的蛋糕加入到购物车，否则重定向到蛋糕列表。

（4）为确保Session对象的有效性，要相应的设置“JSESSIONID”的Cookie 有效周期的与Session一致。

（5）Servlet遍历购物车的数据，展示所有购买的蛋糕。

模拟购物的整个流程如下：

四、实验过程（关键代码）

1.对于蛋糕属性和方法的定义，具体代码如图1所示。

2.对于购买的操作，文件名为PurchaseServlet，代码内容如图2所示。

3.因为是简单模拟，所以创建一个CakeDB的类文件来模拟数据库，其代码内容如图3所示。

4.对于本次实验的首页入口，名为ListCakeServlet，其代码如图4所示。

5.对于购物车相关操作，文件名为CartServlet，代码内容如图5所示。

五、实验结果与分析

1.运行项目，通过在URL末端输入项目首页入口ListCakeServlet，可以显示蛋糕列表，如图6所示。

2.在图6所示的界面中点击B类蛋糕的“点击购买”按钮，此时跳转到了购物车的页面，即为CartServlet，结果如图7所示。

3.单击后退按钮，再次点击“D类蛋糕”右侧的“点击购买”按钮，此时会返回到购物车的页面，同时D类蛋糕增加到购物车中，结果如图8所示。

六、附件下载

1. 掌握Servlet容器请求对象获取表单数据方法， 如请求对象getParameter()方法获取用户、密码等。
2. 熟悉设置HttpServletRequest接口请求对象的中文字符编码方法setCharacterEncoding("utf-8")，正确获取请求信息中文内容。
3. 熟悉Servlet对象获取数据并进行比较检测的方法。
4. 掌握响应对象实现网页重定向的应用。

二、实验环境

IDEA2019、Windows10、Servlet、HTML。

三、实验步骤

（1）在chapter04项目的web根目录下编写一个表单文件login.html，如图:

（2）通过HttpServletRequest接口获取表单信息，如getParameter()方法用于获取某个指定的参数、getParameterValues()方法用于获取多个同名的参数等。

（3）为使服务器正常获得中文数据，需要使用HttpServletRequest接口设置请求对象中文字符解码方法：setCharacterEncoding("utf-8")，同时使中文正常显示，需要在响应对象中设置setContentType("text/html;charset=utf-8")方法。

（4）模拟登录数据，用户名：“张三”，密码：“123456”为正确登录的数据，如果用户名和密码检测正确，则请求转发给“urlpatterns=/sucess”的servlet对象并显示“张三欢迎您访问我们的网站！”，否则，重定向到原login.html登录页面。

四、实验过程

1.对于负责登录表单的index.jsp，代码如图1所示。

2.对于处理登录操作的LoginServlet，代码如图2所示。

五、实验结果与分析

1.运行Tomcat，此时会自动进入index.jsp文件，输入指定好的用户名张三和指定密码123456，完成输入的内容如图3所示。

2.点击图1中的“登录”按钮，可以正常登录，结果如图4所示。

3.现在测试输入错误信息的结果：再次打开项目主页，此时观察URL栏是没有提示有index.jsp的，是默认路径，此时在用户名和密码文本框中输入任意信息，输入完成的结果如图5所示。

4.点击登录按钮，因为数据库中没有相应的用户信息，且页面设置了重定向，重定向到index.jsp文件，此时观察URL栏，发现有了文件路径，如图6所示。

六、附件下载

1. 利用Bootstrap、jQuery、Html、CSS等设计蛋糕商城页面。
2. 掌握Bootstrap框架中导航条的设计方法以及列表、表单的创建操作方法。
3. 掌握jQuery动态效果的设计。
4. 熟悉页面布局的设计。

二、实验环境

IDEA2019、Windows10、Bootstrap、jQuery。

三、实验要求

根据本章中所学的网页知识，实现一个蛋糕商城注册页面，要求如下：页面主要分为3部分，第一部分为导航内容，有首页、商品分类、热销、新品、注册、登录、搜索及购物车等信息；第二部分为注册内容，有标题、注册表单、提交按钮等信息；第三部分为友情链接与作者署名内容。页面展示效果如下所示。

四、实验过程

1.本次实验代码如图1-图4所示。

五、实验结果与分析

1.本次实验效果如图5所示。

2.对于在邮箱填写区域中如果没有邮箱符号“@”，会提示错误，如图6所示。

六、附件下载

二、实验环境

 IDEA2019、Windows10。

三、实验要求

• 编写一个简单的留言板页面, 动态更新内容与删除操作。
• 单击“发布”按钮，显示用户发布的留言内容。
• 在每个留言板提供一个“删除”链接，用来删除留言，并显示更新后的同容。

四、实验过程

1.本次实验的参考代码内容如图1所示。

图1

五、实验结果与分析

2.在浏览器中运行，结果如图2-图4所示。

附件下载

• 了解表单及其属性。
• 掌握input控件常用类型的使用。
• 熟悉textarea控件的使用。
• 熟悉select控件的使用。
• 熟悉使用CSS3美化表单。

二、实验环境

IDEA2019、Windows10、Html5、CSS3。

三、实验要求

 表单项包括文本框、文件、单选框、复选框和下拉列表等类型，有相应的提示信息、表单控件和表单域组成。实验中通过表单进行布局和设计，并使用CSS对表单进行美化（背景图片课中提供），制作出一个信息登记表模块,效果图如下：

四、实验过程（部分核心代码）

1.本实验的CSS参考代码以及头部代码如图1所示。

2.表单部分的参考代码如图2-图4所示。

五、实验结果与分析

1.实验结果效果如图5所示。

附件下载

本教程代码文件将于5月9日发布。

1.制作网页设计软件列表，其默认效果如下图所示。

2.当鼠标悬浮于导航选项时，该选项的文本颜色发生变化，且添加背景色，效果如下图所示。

3.当用鼠标点击导航选项后，会出现该款软件的相关介绍，例如点击最后一个导航选项，效果如下图所示。

参考步骤

部分参考代码如下（作业提交截止后公布完整代码）

效果图

附件下载

制作“电影影评网”，效果如下图所示，要求页面能适配不同屏幕，当点击“科幻电影”时，会显示动作电影的下拉菜单，如下图所示；再次点击，将下拉菜单收缩。

注：用到的图片素材在“资源”栏目中的“网页基础”文件夹对应的目录——1.2——images

参考步骤

本次作业参考代码见图3-图5（也可以从附件下载）

请自行修改部分显示参数或文本！！！

（被判定作弊后果自负）

参考效果

全屏显示效果（图6-图7）：

小屏幕自适应宽度显示：

代码附件下载

https://www.leexinghai.com/aic/category/gdgm/21221/java-web/