第九章SpringMVC练习2

最新推荐文章于 2024-09-16 21:37:07 发布

Nefertari_______

最新推荐文章于 2024-09-16 21:37:07 发布

阅读量120

点赞数

文章标签： java 前端 http

本文链接：https://blog.csdn.net/Nefertari_______/article/details/130668313

版权

实验内容：

1、SpingMVC参数绑定，接受地址栏和表单传递的值。练习实例，并体会工作原理。

2、教材中的参数绑定的list和map类型的数据，拦截器以及文件上传，不做要求。大家根据兴趣自己练习。

一、SpringMVC参数绑定

springmvc参数绑定过程

从客户端请求key/value数据，经过参数绑定，将key/value数据绑定到controller方法的形参上。

SpringMVC中，接收页面提交的数据是通过方法形参来接收，而不是在controller类定义成员变量接收！！！

其作用是把视图约定在 /WEB-INF/page/*.jsp 这个位置

prefix前缀，surfix后缀

1.下载how.2j网站上的springmvc项目，导入eclipse中，确认项目可以运行。

2.练习url地址栏参数传递与绑定。

①创建url.jsp页面。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
	body{
		font-size:70px;
		background-color:orange;
	}
</style>
</head>
<body>
	<a href="url?Uid=6">传递id参数</a>
</body>
</html>

②在controller包下new一个class，创建UidController.java。

package controller;


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class UidController {

    @RequestMapping("url")
    public ModelAndView getUrlid(Integer Uid){
        ModelAndView mav= new ModelAndView("urlid");

         System.out.println(Uid);  //会输出到控制台，不是jsp页面中 
         mav.addObject("aa", Uid);
        mav.setViewName("urlid");
        return mav;
    }
}

③在WEB-INF下的page文件夹中创建urlid.jsp页面。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>通过url传递的参数，只能到达第二个页面，没法保存，
	所以不能传递到第三个页面。体会如下两个变量为什么是这样的
	显示情况。
	</p>
	aa的值是:${aa}<br>
	Uid的值是:${Uid}
</body>
</html>

④运行url.jsp页面后跳转到如下页面。

⑤点击“传递id参数”，跳转到如下页面：

体会：

①通过url传递的参数，只能到达第二个页面，没法保存，不能传到第三个页面。因为Uid的值发到UidController里面之后，System.out.println(Uid);会输出到控制台，而不是jsp页面中

②SpringMVC框架Controller的 addObject(String attributeName, Object ttributeValue)方法，第二个参数是Object类型，当你传入一个int型，系统会把它自动转变或String类型

二、表单参数的传递与绑定

1.练习how.2j网站上的案例

删除导入springmvc文件中的其他文件，保留lib中的jar包，其他文件自己重新创建。

①在pojo包下创建实体类Product。

package pojo;

public class Product {
	private int id;
	private String name;
	private float price;
	public int getID(){
		return id;
	}
	public void setId(int id){
		this.id=id;
	}
	public String getName(){
		return name;
	}
	public void setName(String name){
		this.name=name;
	}
	public float getPrice(){
		return price;
	}
	public void setPrice(float price){
		this.price=price;
	}
}

②在web目录下增加商品的页面addProduct.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="addProduct">
		产品名称：<input type="text" name="name" value=""><br>
		产品价格：<input type="text" name="price" value=""><br>
		<input type="submit" value="增加商品">
	</form>
</body>
</html>

③ 运行该页面

④点击“增加商品”按钮后跳转页面出现404

⑤在controller包下创建一个ProductController.java。

控制器ProductController，准备一个add方法映射/addProduct路径，为add方法准备一个Product 参数，用于接收注入，最后跳转到showProduct页面显示用户提交的数据。

package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import pojo.Product;

@Controller
public class ProductController {
	
	@RequestMapping("/addProduct")
	public ModelAndView add(Product product) throws Exception{
		ModelAndView mav=new ModelAndView("showProduct");
		return mav;
	}
}

⑥在WEB-INF下的page文件夹下创建showProduct.jsp，用 EL 表达式显示用户提交的名称和价格

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	产品名称：${product.name }<br>
	产品价格：${product.price }
</body>
</html>

⑦运行addProduct.jsp页面如下图所示：

我注意到在showProduct中增加了isELIgnored=“false“，但是删掉这个语句后依然可以运行。

2.练习多值的传递和使用

①在WEB下创建reg.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="regsubmit" method="post">
        姓名：<input type="text" name="name" /> <br/>
        性别：<input type="text" name="gender" /> <br/>
        爱好：
        <input type="checkbox" name="hobby" value="football">足球
		<input type="checkbox" name="hobby" value="dance">跳舞
		<input type="checkbox" name="hobby" value="sing">唱歌
		<input type="checkbox" name="hobby" value="piano">钢琴
		<input type="checkbox" name="hobby" value="bascketball">篮球<br>
        <input type="submit" value="注册" />
    </form>
</body>
</html>

②在controller包下创建控制器RegController.java,最后跳转到reglist.jsp页面显示用户提交的数据。

package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import pojo.Reg;

@Controller
public class RegController {
@RequestMapping("/regsubmit")

public ModelAndView reg(Reg reg){
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("reglist");
    return modelAndView;
}
    
}

③在pojo包下创建Reg.java。

表单中的hobby是多选框，所以给Reg类又设置一个参数hobbys用来存放选中的hobby。

package pojo;

public class Reg {
    public String name;
    public String gender;
    public String[] hobby;
    public String hobbys;
    
public String getHobbys() {
        hobbys="";
        for(int i=0;i<hobby.length;i++)
        {
            hobbys+=hobby[i]+"   ";
        }
        return hobbys;
    }
    public void setHobbys(String hobbys) {
        this.hobbys = hobbys;
    }
    
public String[] getHobby() {
        return hobby;
    }
public void setHobby(String[] hobby) {
        this.hobby = hobby;
    }
public String getName() {
    return name;
}
public void setName(String name) {
    this.name = name;
}
public String getGender() {
    return gender;
}
public void setGender(String gender) {
    this.gender = gender;
}


}

④在WEB-INF下的page文件夹下创建reglist.jsp页面，用 EL 表达式显示用户提交的内容。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	body{
		font-ssize:40px;
		background:5px solid red;
	}
</style>
</head>
<body>
	姓名：${reg.name }<br>
	性别：${reg.gender }<br>
	爱好：${reg.hobbys }
</body>
</html>

⑤运行reg.jsp页面，结果如下图所示：

问题：一开始我想把性别的文本框设置成单选框，但是获取参数有问题，出现了404页面。

运行reg.jsp页面，结果如下图所示：

三、练习简单计算器

经过前面的两个练习，需要两个jsp页面，一个控制器CalculatorController.java（在controller包中），一个实体类Product.java（在pojo包中），一个calculator.jsp页面（在WEB目录下），一个calresult.jsp页面（在WEB-INF目录下的page文件夹中）。

①首先创建calculator.jsp页面，设计简单计算器的样式。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="calculator" method="post">
		<h2>简单计算器</h2>
		第一个数：<input type="text" name="num1" values=" "><br>
		运算符：&nbsp;&nbsp;&nbsp;
			<select name="operate">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">&times</option>
				<option value="/">&divide</option>
			</select><br>
		第二个数：<input type="text" name="num2" values=" "><br>
		<input type="submit" value="计算">
	</form>
</body>
</html>

②在controller包下创建CalculationController.java。

package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import pojo.Calculator;

@Controller

public class CalculatorController {
	
	@RequestMapping("/calculator")
	public ModelAndView cal(Calculator cal){
		ModelAndView modelAndView=new ModelAndView();
		
		if(cal.getOperate().equals("+"))
			cal.setResult(cal.getNum1()+cal.getNum2());
		else if(cal.getOperate().equals("-"))
			cal.setResult(cal.getNum1()-cal.getNum2());
		else if(cal.getOperate().equals("*"))
			cal.setResult(cal.getNum1()*cal.getNum2());
		else if(cal.getOperate().equals("/"))
			cal.setResult(cal.getNum1()/cal.getNum2());
		
		modelAndView.addObject("cal",cal);
		modelAndView.setViewName("calresult");
		return modelAndView;
	}
	
}

③在pojo包中创建实体类Calculator.java。

package pojo;

public class Calculator {

		public float num1;
		public String operate;
		public float num2;
		public float result;
		
	public float getNum1(){
		return num1;
	}
	public void setNum1(float num1){
		this.num1=num1;
	}
	
	
	public String getOperate(){
		return operate;
	}
	public void setOperate(String operate){
		this.operate=operate;
	}
	
	
	public float getNum2(){
		return num2;
	}
	public void setNum2(float num2){
		this.num2=num2;
	}
	
	public float getResult(){
		return result;
	}
	public void setResult(float result){
		this.result=result;
	}
}

④在WEB-INF目录下page文件夹中创建calresult.jsp用于获取计算器的结果。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	您选择的运算符是：${cal.operate }<br>
	您的计算结果是：${cal.result }<br>
</body>
</html>