点餐——JSP 的 MVC 模式
01、实验目的
掌握 MVC 模式三部分的设计。使用 session bean 存储数据，使用 servlet 处理数据，并将有关数据存储到 session bean，使用 JSP 页面显示 session bean 数据。
02、实验要求
（1）编写一个创建 bean 的类，该类可以储存餐单相关的数据，例如菜名，价格等信息。
（2）编写一个 JSP 页面 inputMenu.jsp。该页面提供 1 个 form 表单，该表单提供用户输入餐单信息。用户单击名字“添加到餐单”的提交键请求名字是 addMenu 的 servlet。
（3）编写创建 servlet 的 Servlet 类，该类创建的 servlet 根据有户提交的餐单数据，解析出餐单的消费总额，并将餐单中消费分项按价格排序，并将这些信息存放到 session bean 中。servlet 请求 showMenu.jsp 页面显示 session bean 中的数据。
（4）编写 showMenu.jsp 页面，该页面显示或删除 session bean 中的数据（显示餐单，同时也可以删除餐单中的某道菜）。
（5）在 Tomcat 服务器的 webapps 目录下（比如，D:\apache-tomcat-9.0.26\webapps）新建名字是 ch7_priatice_two 的 Web 服务目录。把 JSP 页面保存到 ch7_priatice_two 中。在 ch7_priatice_two 下建立子目录 WEB-INF（字母大写），然后在 WEB-INF 下再建立子目录 classes，将创建 servlet 和 bean 的类的 Java 源文件按着包名保存在 classes 的相应子目录中。
（6）向 ch7_priatice_two\WEB\INF\下的部署文件 web.xml 添加 servlet 和 servlet-mapping 标记，部署 servlet 的名字和访问 servlet 的 url-pattern。
（7）用浏览器访问 JSP 页面 inputMenu.jsp。
03、参考代码
代码仅供参考，参考代码运行效果如图 1。
（a）输入名称和价格
（b）查看、删除餐单
■ 图 1 点餐
1●bean（模型）
创建 session bean 需要使用 MenuBean 类， Food 类是 MenuBean 类需要的一个类。
用命令行进入 save\data 的父目录 classes，编译 Food.java 和 MenuBean.java：
classes>javac save\data\Food.javaclasses>javac save\data\MenuBean.java
复制代码
Food.java
package save.data;public class Food implements Comparable<Food>{ String foodName ; //食物名称。 double price; //价格。 public void setFoodName(String name){ foodName = name; } public String getFoodName(){ return foodName; } public void setPrice(double d){ price = d; } public double getPrice(){ return price; } public int compareTo(Food food){ //Food对象按价格比较大小。 return (int)(food.getPrice()*1000-price*1000); }}
复制代码
MenuBean.java
package save.data;import java.util.ArrayList;import java.util.Collections;public class MenuBean { String time ; //点餐时间。 String totalPrice; //餐单总额。 ArrayList<Food> foodList;//存放Food对象的ArrayList。 public MenuBean(){ foodList = new ArrayList<Food>(); } public void addFood(Food food){ foodList.add(food); Collections.sort(foodList);//排序foodList。 } public void removeFood(int index){ if(index>=0){ foodList.remove(index); Collections.sort(foodList);//排序foodList。 } } public String getFoodName(int index) {//返回某个Food的名字。 return foodList.get(index).getFoodName(); } public double getPrice(int index) { //返回某个Food的价格。 return foodList.get(index).getPrice(); } public int size() { return foodList.size(); } public void setTime(String time){ this.time = time; } public String getTime(){ return time; } public String getTotalPrice(){ double sum = 0; for(Food food:foodList){ sum += food.getPrice(); } totalPrice = String.format("%.2f",sum);//保留2位小数。 return totalPrice; }}
复制代码
2●JSP 页面（视图）
inputMenu.jsp 提供 form 表单，该 form 表单提供用户输入某道菜的名字和价格。用户单击名字“添加到餐单”的提交键请求名字是 addMenu 的 servlet。showMenu.jsp 负责显示 session bean 中的数据，以及删除 session bean 中的某个数据（即删除某道菜）。
inputMenu.jsp
<%@ page contentType="text/html" %><%@ page pageEncoding = "utf-8" %><jsp:useBean id="menu" class ="save.data.MenuBean" scope="session"/><style> #textStyle{ font-family:宋体;font-size:36;color:blue }</style><HTML><body bgcolor=#ffccff><form action="addMenu" id= textStyle method=post>输入餐单(每次输入一个消费项目)：<br>名称：<input type=text name='foodName' id =textStyle value ='剁椒鱼头' size = 8 />价格：<input type=text name='price' id =textStyle value ='26.9' size = 8 /><br><input type=submit id=textStyle value="添加到餐单"></form></body></HTML>
复制代码
showMenu.jsp
<%@ page contentType="text/html" %><%@ page pageEncoding = "utf-8" %><jsp:useBean id="menu" class ="save.data.MenuBean" scope="session"/><style> #tom{ font-family:宋体;font-size:26;color:blue }</style><HTML><body bgcolor=pink><table border=1><tr><th id=tom>序号</th><th id=tom>食物名称</th><th id=tom>价格</th><% request.setCharacterEncoding("utf-8"); String index = request.getParameter("删除"); if(index!=null){ menu.removeFood(Integer.parseInt(index)); } for(int i=0;i<menu.size();i++){ out.print("<tr>"); out.print("<td id=tom>"+(i+1)+"</td>"); out.print("<td id=tom>"+menu.getFoodName(i)+"</td>"); out.print("<td id=tom>"+menu.getPrice(i)+"</td>"); out.print("<td ><form action ="+"showMenu.jsp"+" method=post>"); out.print("<input type = hidden name = 删除 value = "+i+" />"); out.print("<input type = submit value = 删除该食物 />"); out.print("</form></td>"); out.print("</tr>"); } %></table><p id = tom>餐单总额(共有<%=menu.size()%>道食物):<jsp:getProperty name="menu" property="totalPrice" /><br>点餐时间:<jsp:getProperty name="menu" property="time" /></p><a id =tom href="inputMenu.jsp">继续点餐</a></body></HTML>
复制代码
3●servlet（控制器）
HandleMenu_Servlet 负责创建名字是 addMenu 的 servlet。名字为 addMenu 的 servlet 控制器负责创建 id 是 menu 的 session bean，并将 Food 对象存储到 session bean 中，然后将用户重定向到 showMenu.jsp 页面查看餐单。
用命令行进入 handle\data 的父目录 classes，编译 HandleMenu_Servlet.java：
classes>javac -cp .;servlet-api.jar handle/data/HandleMenu_Servlet.java
复制代码
事先将 Tomcat 安装目录 lib 子目录中的 servlet-api.jar 文件复制（不要剪贴）到\ch7_practice_one\WEB-INF\classes 中。
注意“.;”和“servlet-api.jar”之间不要有空格，“.;”的作用是保证 Java 源文件能使用 import 语句引入当前 classes 目录中其他自定义包中的类，比如 save.data 包中的 bean 类。
HandleMenu_Servlet.java
package handle.data;import save.data.Food;import save.data.MenuBean;import java.util.*;import java.io.*;import java.time.LocalTime;import javax.servlet.*;import javax.servlet.http.*;public class HandleMenu_Servlet extends HttpServlet{ public void init(ServletConfig config) throws ServletException{ super.init(config); } public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{ request.setCharacterEncoding("utf-8"); MenuBean menu = null; //餐单。 HttpSession session=request.getSession(true); menu = (MenuBean)session.getAttribute("menu"); if(menu == null ){//menu不存在就创建menu。 menu = new MenuBean(); session.setAttribute("menu",menu);//sesion bean。 } String foodName = request.getParameter("foodName");//食物名称。 String price = request.getParameter("price"); Food food = new Food(); if(foodName.length()==0||price.length()==0){ response.sendRedirect("inputMenu.jsp"); return; } food.setFoodName(foodName); food.setPrice(Double.parseDouble(price)); LocalTime dateTime = LocalTime.now(); String str = dateTime.toString(); String time =str.substring(0,str.lastIndexOf("."));//不要纳秒。 menu.setTime(time); menu.addFood(food);//添加一道食物。 response.sendRedirect("showMenu.jsp"); //显示餐单。 }}
复制代码
4●web.xml（部署文件）
向 ch7_practice_two\WEB\INF\下的 web.xml 添加如下的 servlet 和 servlet-mapping 标记，部署的 servlet 的名字是 addMenu，访问 servlet 的 url-pattern 是/addMenu。
web.xml
<?xml version="1.0" encoding="utf-8"?><web-app><!-- 以下是web.xml文件新添加的内容 --><servlet><servlet-name>addMenu</servlet-name><servlet-class>handle.data.HandleMenu_Servlet</servlet-class></servlet><servlet-mapping><servlet-name>addMenu</servlet-name><url-pattern>/addMenu</url-pattern></servlet-mapping></web-app>
复制代码
评论