实验六 JSP/Servlet

Size: px

Start display at page:

Download "实验六 JSP/Servlet"

晚诸葛
6 years ago
Views:

1 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/ 你的学号目录下, 其中学号目录需要自己建立实验步骤

2 本实验使用 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) else{ out.print("not Login. <a href='login.html'>login Now!</a>"); out.print("welcome " + session.getattribute("username")); out.print(" &nbsp<a href=\"" + request.getcontextpath() + "/servlet/usercheck?status=\'logout\'\">logout</a>"); 展示商品的页面 index.jsp 源代码如下 <%@ page language="java" pageencoding="iso " import="java.util.*"%> <%! public void jspinit() { getservletcontext().setattribute("cats", estore.eshop.getcats()); public void jspdestroy() {

3 getservletcontext().removeattribute("cats"); private String dispprice( String price) { int len = price.length(); if (len <= 2) return price; else return "$" + price.substring(0,len -2) + "." + price.substring(len-2); %> <html> <head> <title>shopping Mall</title> </head> <body > <table width="600"> <tr><td> </td><td align="right"> <%if (session.getattribute("username") == null) out.print("not Login. <a href='login.html'>login Now!</a>"); else { out.print("welcome " + session.getattribute("username")); out.print(" &nbsp<a href=\"" + request.getcontextpath() + "/servlet/usercheck?status=\'logout\'\">logout</a>"); %> </td></tr> <tr><td width="20%"> <% ArrayList cats = (ArrayList) application.getattribute("cats"); for (int i=0; i< cats.size(); i++) { estore.category curcat = (estore.category) cats.get(i); %> <a href="<%= request.getrequesturl() + "?catid=" + curcat.getid() %>"> <%= curcat.getname() %></a> <br/> <% //for %> </td> <td><table border="1"> <tr><th align="left">item</th><th align="left">price</th> <th align="left">order</th></tr> <% String selectedcat = request.getparameter("catid"); if (selectedcat == null) selectedcat = "1"; ArrayList items = (ArrayList) estore.eshop.getitems(selectedcat); for (int i=0; i< items.size(); i++) { estore.product curitem = (estore.product) items.get(i); %> <tr> <td><%= curitem.getname() %></td> <td><%= dispprice(string.valueof(curitem.getprice())) %></td>

4 <td><a href="<%= request.getcontextpath() + "/servlet/sessioncart?action=add&sku=" + </tr> <% %> curitem.getsku() %>"> <b>buy</b></a></td> </table></td></tr></table> </body> </html> 购买商品链接到自定义的 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 源文件如下 <%@ page language="java" import="java.util.*" pageencoding="iso "%> <jsp:directive.page import="estore.*"/> <%! 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) + "." +

5 + price.substring(len-2); %> <%if(session.getattribute("username") == null) response.sendredirect(request.getcontextpath()+"/login.html"); %> <html> <head> <title>my Shopping Cart</title> </head> <body> <table width="600"> <tr><td> <table border="1"> <tr><th colspan="6">your Shopping Cart</th></tr> <tr><th align="left">quantity</th><th align="left">item</th> <th align="right">price</th><th align="right">extended</th> <th align="left">add</th><th align="left">remove</th> </tr> <% long total = 0; ArrayList mycart = (ArrayList)session.getAttribute("mycart"); if(mycart!= null && mycart.size() > 0){ for(int i = 0; i< mycart.size(); i++){ cart ct = (cart)mycart.get(i); Product item = EShop.getItem(ct.getSku()); total += item.getprice() * ct.getcount(); %> <tr> <td><%= ct.getcount() %></td> <td><%= item.getname() %></td> <td align="right"> <%= dispprice(string.valueof(item.getprice())) %></td> <td align="right"> <%= dispprice(string.valueof(item.getprice() * ct.getcount())) %></td> <td> <a href="<%= request.getcontextpath() + CART_PAGE + "?action=add&&sku=" + ct.getsku() %>"> <b>add 1</b></a> </td> <td > <a href="<%= request.getcontextpath() + CART_PAGE + "?action=remove&sku=" + ct.getsku() %>"> <b>remove 1</b></a> </td></tr> <tr><% %> <td colspan="3" align="right">total</td> <td colspan="2" align="left"><%= dispprice(string.valueof(total)) %></td> </tr> <tr> <td colspan="6"> <a href="<%= request.getcontextpath() + CART_PAGE + "?action=clear&sku=0" %>"> Clear Shopping Cart</a> </td></tr> <% %> <tr> <td colspan="6">

6 <a href="<%= request.getcontextpath() + SHOP_PAGE %>"> Return to Shopping</a> </td></tr></table></td></tr> </table> </body> </html> 2.3 登录界面的设计 1) 登录功能是常见的 Web 功能点, 在很多 Web 应用中都有应用一般的登录验证主要通过用户名密码两个属性来进行用户身份验证进行用户身份验证的方法有很多, 本次实验采用最为简单的一种方式进行认证 2) 将下面的代码 6.1 保存为 login.html 作为登录页面 ( 建议将本次实验的所有 jsp 文件保存在同一目录下 ) 登录页面有三个表单项, 分别是用来表示用户登录 id 的 username, 登录状态的 status, 以及用来表示用户密码的 password Login.html 源文件如下 <html> <head> <title>login.html</title> </head> <body onload="javascript:document.f1.username.focus();"> <form name="f1" id="f1" action="servlet/usercheck" method="post"> <table border="0"> <tr> <td>username:</td> <td><input type="text" name="username" id="username"></td> </tr> <tr> <td>password:</td> <td><input type="password" name="password" id="password"> <input type="hidden" name="status" id="status" value="login"></td> </tr> <tr> <td colspan="1" align="right"><input type="submit" value="login"></td> <td colspan="2" align="center"><input type="reset" value="reset"></td> </tr> </table> </form> </body> </html>

7 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()){ else{ else HttpSession session = request.getsession(true); session.setattribute("username", ui.getusername()); response.sendredirect("../index.jsp"); response.sendredirect("../login.html"); 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){

8 int flag = 0; for(int i =0; i < mycart.size(); i++){ estore.cart tc = (estore.cart)mycart.get(i); if(tc.getsku().equals(sku)){ flag = 1; int cc = tc.getcount(); tc.setcount(cc+1); mycart.set(i, tc); break; if(flag == 0){ mycart.add(new estore.cart(1,sku)); else{ mycart = new ArrayList(); mycart.add(new estore.cart(1,sku)); session.setattribute("mycart", mycart); else if(action.equals("remove")){ if(mycart!= null){ int cc = 0, flag = -1; estore.cart tc = new estore.cart(); for(int i =0; i < mycart.size(); i++){ tc = (estore.cart)mycart.get(i); if(tc.getsku().equals(sku)){ cc = tc.getcount(); flag = i; break; if(flag!= -1){ if(cc > 1){ tc.setcount(cc-1); mycart.set(flag, tc); else mycart.remove(flag); if(mycart.size() == 0) session.removeattribute("mycart"); else

9 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, 进入如下窗口

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

基于CDIO一体化理念的课程教学大纲设计

基于CDIO一体化理念的课程教学大纲设计 Java 语言程序设计课程教学大纲 Java 语言程序设计课程教学大纲一课程基本信息 1. 课程代码 :52001CC022 2. 课程名称 :Java 语言程序设计 3. 课程英文名称 :Java Programming 4. 课程类别 : 理论课 ( 含实验上机或实践 ) 5. 授