复旦大学：《Web应用基础》实验练习_Lab05

Web lab 5 JSP/Servlet 实验目的 1)复习和掌握 TOMCAT配置 2)掌握JSP基本语法 3)掌握使用JSP, JavaBean, Servlet进行编程 4)掌握使用 Session进行数据传递的方法 实验任务 通过设计JSP、 Servlet、 JavaBean使用Mv℃模式实现用户登录验证、注销,购物车的添加 移除以及清除商品,页面之间使用 session传递消息 实验环境 Servlet/JSP容器: Apache Tomcat5.5或以上 JDK: Sun JDK1.5或以上 浏览器: Internet Explorer6或以上, Firefox1.5或以上 IDE:任意熟悉的IDE(建议 MyEclipse) 实验检查 完成实验内容后,由助教检查编写的页面效果。 检查清单: JSP index.jsp(商品展示界面 Login.html(用户登录) Shopcart.jsp(购物车显示界面) Servlet Usercheck.java(登录注销处理) Sessioncart.java(购物车操作处理) avabean cart.java(购物车中的单个商品) Category.java(商品目录) Product.java(商品信息) Eshop.java(商店) Userinfo.java(用户信息) War 实验检查通过后,请将自己编写的以上文件打包上传到ftp上的 WORK UPLOAD/lab6/你的学 号目录下,其中学号目录需要自己建立 实验步骤

Web Lab 5 JSP/Servlet 实验目的 1) 复习和掌握TOMCAT配置 2) 掌握JSP 基本语法 3) 掌握使用 JSP ,JavaBean ,Servlet 进行编程 4）掌握使用Session 进行数据传递的方法 实验任务 通过设计 JSP、Servlet、JavaBean 使用 MVC 模式实现用户登录验证、注销，购物车的添加、 移除以及清除商品，页面之间使用 session 传递消息。 实验环境 Servlet/JSP 容器：Apache Tomcat 5.5 或以上 JDK：Sun JDK 1.5 或以上 浏览器：Internet Explorer 6 或以上，Firefox 1.5 或以上 IDE：任意熟悉的 IDE（建议 MyEclipse） 实验检查 完成实验内容后，由助教检查编写的页面效果。 检查清单： JSP index.jsp（商品展示界面） Login.html(用户登录) Shopcart.jsp(购物车显示界面) Servlet Usercheck.java（登录注销处理） Sessioncart.java(购物车操作处理) JavaBean cart.java(购物车中的单个商品) Category.java(商品目录) Product.java(商品信息) Eshop.java(商店) Userinfo.java(用户信息) War Lab6.war 实验检查通过后，请将自己编写的以上文件打包上传到ftp 上的WORK_UPLOAD/lab6/你的学 号目录下，其中学号目录需要自己建立。 实验步骤

本实验使用MwC模式实现 View:负责应用程序的显示 JSP/HTML Modle:代表业务逻辑 JavaBean Controller:负责过程控制 Servlet 参考Lab中关于 MyEclipse和 Tomcat的配置,配置成功后在 My Eclipse中新建项目, 在项目下新建包 estore和 servlet。 1. Model的设计 实验模拟一个简单的购物流程,涉及到的业务逻辑包括:用户信息、商品、 商品目录、商店、由于购物车通过 Session保存,在此只将购物车中的相同商 品作为一个实体 1.1用户信息 用户信息包含用户名和密码,同时提供二者时候匹配的方法,在此项目的包 estore下添加Java文件,代码中使用一个静态的 Arraylist保存由“用户名” “密码”配对组成的 userinfo。可以根据自身情况变换其中的用户名和密码。其 中最后一个方法实现用户验证 1.2商品信息、商品目录、商店、购物车单种商品的实体设计 在项目包 estore下添加如下文件:cart.java Category Product. java, Eshop java 注:各个 JavaBean的源文件在本文档目录给出。 2.view的设计 本实验中的购物,对外显示包括商品展示页面、用户登录页面以及显示购物车 页面。 2.1商品展示页面设计 此页面中需要根据商品的分类列出不同的商品,每件商品必须提供用户可以点 击购买的链接,点击链接后,如果购买成功,应该跳转到购物车页面,提示用户 购买成功。在页面上提供用户可以登录的链接,对于未登录的用户,只能浏览商 品,不能购买(这个功能下一步会通过 Servlet实现) 其中判断当前时候有用户已登录需要通过 session记录用户,实现方法如下 if (session. getAttribute("username")== null out. print("Not Login. Login Now! ")i out. print("Welcome session getAttribute(username" ))i out. print ("&nbsp; &nbspLogout")i 展示商品的页面 index.jsp源代码如下 <a@ page language="java pageEncoding=ISo-8859-1 public void jspInit() i getservletContext(). setAttribute("cats estore EShop. getcats()) public void jspDestroy ()

本实验使用MVC模式实现 View：负责应用程序的显示 JSP/HTML Modle:代表业务逻辑 JavaBean Controller：负责过程控制 Servlet 参考Lab1中关于MyEclipse和Tomcat的配置，配置成功后在MyEclipse中新建项目, 在项目下新建包estore和servlet。 1. Model的设计 实验模拟一个简单的购物流程，涉及到的业务逻辑包括：用户信息、商品、 商品目录、商店、由于购物车通过Session保存，在此只将购物车中的相同商 品作为一个实体。 1.1 用户信息 用户信息包含用户名和密码，同时提供二者时候匹配的方法，在此项目的包 estore下添加Java文件，代码中使用一个静态的ArrayList保存由“用户名”- “密码”配对组成的userinfo。可以根据自身情况变换其中的用户名和密码。其 中最后一个方法实现用户验证。 1.2 商品信息、商品目录、商店、购物车单种商品的实体设计 在项目包estore下添加如下文件：cart.java、 Category.java、 Product.java、 Eshop.java 注:各个JavaBean的源文件在本文档目录给出。 2.View的设计 本实验中的购物，对外显示包括商品展示页面、用户登录页面以及显示购物车 页面。 2.1 商品展示页面设计 此页面中需要根据商品的分类列出不同的商品，每件商品必须提供用户可以点 击购买的链接，点击链接后，如果购买成功，应该跳转到购物车页面，提示用户 购买成功。在页面上提供用户可以登录的链接，对于未登录的用户，只能浏览商 品，不能购买（这个功能下一步会通过Servlet实现）。 其中判断当前时候有用户已登录需要通过session记录用户，实现方法如下 if (session.getAttribute("username") == null) out.print("Not Login. Login Now!"); } else{ out.print("Welcome " + session.getAttribute("username")); out.print("&nbsp;&nbspLogout");} 展示商品的页面index.jsp源代码如下 <%! public void jspInit() { getServletContext().setAttribute("cats", estore.EShop.getCats()); } public void jspDestroy() {

getservletcontext().removeAttribute("cats")i) private String dispPrice( String price)( () if(1en Shopping Mall &nbsp; Login Now!") out. print ("Welcome session getAttribute("username")) out. print("&nbsp; &nbspLogout)i)8> tr> sturla+ curcat getId(8>> curcat. getName() > ItemPrice Order String selectedcat request getParameter("catid") if (selectedcat u11) lectedcat estore EShop. getItems(selectedcat) ();i++) estore Product curItem =(estore Product) items get (i)i

getServletContext().removeAttribute("cats"); } private String dispPrice( String price) { int len = price.length(); if (len Shopping Mall &nbsp; Login Now!"); else { out.print("Welcome " + session.getAttribute("username")); out.print("&nbsp;&nbspLogout"); }%> "> ItemPrice Order

> BUY 8}号 购买商品链接到自定义的 servlet sessioncart保存购买的商品,并重定向到购 物车显示页面。效果图如下 Welcome admin Logout Systems em Software Pentium 4-4 GHz, 512 MB, 300 GB $98999 BUY AMD Opteron-4 GHz, 1 GB, 300 GB $.99 BUY 2.2购物车显示页面设计 此页面显示用户所购商品的列表,同时用户可以单独增加和减少列表中的商 品,以及清空购物车,这些操作都通过链接到自定义 servlet的 sessioncart下完 成。显示用户购物车中的商品列表,需要从 session中读取用户的购物车,实现 如下 ArrayList mycart =(ArrayList)session. getAttribute("mycart")i 购物车页面需要判断用户是否已登录,通过 session实现,若未登录,跳转到登 录页面 if(session. getAttribute ("username") response. sendRedirect(request. getContextPath()+"/login. html")i 购物车页面 shopcart.jsp源文件如下 private static String SHOP PAGE ="/index. jsp private static String CART PAGE ="/servlet/sessioncart private string dispPrice( string price)( int len price length( i￡(1en<=2) return price return "s"+ price substring(o,len -2)+"."+

"> BUY 购买商品链接到自定义的servlet sessioncart保存购买的商品，并重定向到购 物车显示页面。 效果图如下 2.2 购物车显示页面设计 此页面显示用户所购商品的列表，同时用户可以单独增加和减少列表中的商 品，以及清空购物车，这些操作都通过链接到自定义servlet的sessioncart下完 成。显示用户购物车中的商品列表，需要从session中读取用户的购物车，实现 如下 ArrayList mycart = (ArrayList)session.getAttribute("mycart"); 购物车页面需要判断用户是否已登录，通过session实现，若未登录，跳转到登 录页面 if(session.getAttribute("username") == null) response.sendRedirect(request.getContextPath()+"/login.html"); 购物车页面shopcart.jsp源文件如下 <%! private static String SHOP_PAGE = "/index.jsp"; private static String CART_PAGE = "/servlet/sessioncart"; private String dispPrice( String price) { int len = price.length(); if (len <= 2) return price; else return "$" + price.substring(0,len -2) + "." +

p mice substring (len-2) My Shopping Cart Your Shopping Cart QuantityItem PriceExtended AddRemove 81 ArrayList mycart =(Arraylist)session. getAttribute ("mycart " if(mycart ! null & mycart size()>0)t o2(1n cart ct =(cart)mycart get (i) em EShop getItem(ct. getsku())i total + item. getPrice(* ct. getcount ( "> Add1 > Remove 1 /td> Total > Clear Shopping Cart /td>

+ price.substring(len-2); } %> My Shopping Cart Your Shopping Cart QuantityItem PriceExtended AddRemove 0){ for(int i = 0; i "> Add 1 "> Remove 1 Total "> Clear Shopping Cart

Return to shopping 2.3登录界面的设计 1)登录功能是常见的Web功能点,在很多Web应用中都有应用。一般的登录验证主要通 过用户名、密码两个属性来进行用户身份验证。进行用户身份验证的方法有很多,本次 实验采用最为简单的一种方式进行认证。 2)将下面的代码6.1保存为1 ogin. htm1作为登录页面(建议将本次实验的所有jsp文件保 存在同一目录下)。登录页面有三个表单项,分别是用来表示用户登录id的 username,登录 状态的 status,以及用来表示用户密码的 password Login.html源文件如下 head> login. html /head> servlet/usercheck"method="post"> Username: Password: nput type=hidden" name="status" id=status" va1ue="1ogin"× /body

"> Return to Shopping 2.3登录界面的设计 1) 登录功能是常见的Web 功能点，在很多Web 应用中都有应用。一般的登录验证主要通 过用户名、密码两个属性来进行用户身份验证。进行用户身份验证的方法有很多，本次 实验采用最为简单的一种方式进行认证。 2) 将下面的代码6.1 保存为login.html 作为登录页面（建议将本次实验的所有jsp 文件保 存在同一目录下）。登录页面有三个表单项，分别是用来表示用户登录id的username，登录 状态的status，以及用来表示用户密码的password。 Login.html源文件如下 login.html Username: Password:

3. Controller的设计 用户的登录和注销操作,以及购物过程的操作都由 servlet实现,在项目下添加包 servlet,并在此包中添加两个 servlet: usercheck, sessioncart Servlet的 doGet方法直接调用 dopost方法,一下具体实现他们的 doPost方法 3.1用户验证的 servlet设计 为了区别用户登录和注销,需要除用户名和密码之外的第三个参数 status,此 servlet调 用 JavaBean userinfo验证用户,具体实现如下 String username request getParameter ("username") String passwd request getParameter ("password") String status request getParameter ("status") if(status ! null) if(status. equals (" login"))i estore userinfo ui= new estore userinfo (username, passwd) if (ui. islogin()) sessIo Attribute("username", ui. getUsername())i response. sendRedirect("./index. jsp") response. sendRedirect ("./login. html") Httpsession session request. getSession( true)i response. sendRedirect("./index. jsp")i 3.2购物车操作的 servlet 购物过程包括添加商品,移除商品,清空购物车操作,用户的购物车需要保存在 session 中,用于在 servlet于JSP页面之间传递参数,具体实现如下 Httpsession session = request getsession(true) if(session. getAttribute("username") nu11) response. sendRedirect ("./login. html")i response. setContentType("text/html")i Printwriter out response. getwriter ()i ArrayList mycart =(Arraylist)session. getAttribute("mycart") String action request getParameter ("action")i String sku request getParameter ("sku") if(action null & sku ! null) if(action. equals("add")) if(mycart I null)i

3. Controller的设计 用户的登录和注销操作，以及购物过程的操作都由servlet实现，在项目下添加包 servlet,并在此包中添加两个servlet：usercheck，sessioncart Servlet的doGet方法直接调用doPost方法，一下具体实现他们的doPost方法 3.1 用户验证的servlet设计 为了区别用户登录和注销，需要除用户名和密码之外的第三个参数status,此servlet调 用JavaBean userinfo验证用户，具体实现如下 String username = request.getParameter("username"); String passwd = request.getParameter("password"); String status = request.getParameter("status"); if(status != null){ if(status.equals("login")){ estore.userinfo ui = new estore.userinfo(username,passwd); if (ui.islogin()){ HttpSession session = request.getSession(true); session.setAttribute("username", ui.getUsername()); response.sendRedirect("../index.jsp"); } else response.sendRedirect("../login.html"); } else{ HttpSession session = request.getSession(true); session.invalidate(); response.sendRedirect("../index.jsp"); } 3.2 购物车操作的servlet 购物过程包括添加商品，移除商品，清空购物车操作，用户的购物车需要保存在session 中，用于在servlet于JSP页面之间传递参数，具体实现如下 HttpSession session = request.getSession(true); if(session.getAttribute("username") == null) response.sendRedirect("../login.html"); response.setContentType("text/html"); PrintWriter out = response.getWriter(); ArrayList mycart = (ArrayList)session.getAttribute("mycart"); String action = request.getParameter("action"); String sku = request.getParameter("sku"); if(action != null && sku != null){ if(action.equals("add")){ if(mycart != null){

int fl for (int i estore cart tc =(estore cart)mycart get(i)i if(tc. getsku()equals(sku))( int cc tc. getCount()i t count(cc+1) brea g mycart. add(n cart (l, sku))i mycart new Arraylist ()i mycart. add(new estore cart (1, sku))i tribute("mycart", mycart else if(action. equals("remove "))I if(mycart ! null)t int cc =0, flag =-l; new estor t(); for (int i =0; i mycart size()i 1++)t tc =(estore cart)mycart get(i) i￡(t brea if(fl tc. setCount(cc-1)i t set(fl else mycart. remove(flag) if(mycart size() 0) els

int flag = 0; for(int i =0; i 1){ tc.setCount(cc-1); mycart.set(flag, tc); } else mycart.remove(flag); } if(mycart.size() == 0) session.removeAttribute("mycart"); else

session. setAttribute("mycart",mycart) else if(action. equals("clear"))I t != null & mycart size()>0)I session. removeAttribute("mycart") response. sendRedirect("./shopcart. jsp") 项目部署 编辑完成后,点击 My Eclipse的按钮_弹出如下窗口 P Project Deployments Manage Deployments Deploy and undeploy J2EE project T Locati Deployment Status OK 定当前项目,点击“Add“,进入如下窗口

session.setAttribute("mycart",mycart); } } else if(action.equals("clear")){ if(mycart != null && mycart.size() > 0){ mycart.clear(); session.removeAttribute("mycart"); } } } response.sendRedirect("../shopcart.jsp"); 4. 项目部署 编辑完成后，点击MyEclipse的按钮 弹出如下窗口 选定当前项目，点击“Add“，进入如下窗口

Create new project deployment for Lab6 Tomcat6 Edit server connect ors Deploy type: O Exploded Archive (development node)PAckaged Archive (production node) Finish Cancel 在 Server项选择 Tomcat, Deploy type选择 Packaged Archive( product mode 点击 Finish完成部署,此时在 Tomcat的 Webapp目录下可以看到有Lab6.war文件存在,此文件 时当前项目的压缩包,包含各个页面以及Java文件生成的 class y件。可以通过 TOMCAT的 tp/ localhost:8080/ manager/hm动态部置WAR文件 部署完成后再浏览器敲入地址:htp:/ localhost:8080/Lab6/

在Server项选择Tomcat， Deploy type 选择 Packaged Archive(product mode) 点击Finish完成部署，此时在Tomcat的Webapp目录下可以看到有Lab6.war文件存在，此文件 时当前项目的压缩包，包含各个页面以及Java文件生成的class文件。可以通过TOMCAT的 http://localhost:8080/manager/html动态部置WAR文件 部署完成后再浏览器敲入地址：http://localhost:8080/Lab6/