Spring MVC 基本操作五

Spring MVC 表单标签库

1、在 JSP 页面中导入 Spring MVC 标签库,与导入 JSTL 标签库的语法非常相似,前缀 prefix 可以自定义,通常为 form。

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

2、将 form 表单与业务数据进行绑定,通过 modelAttribute 属性完成绑定,将 modelAttribute 的值设置为控制器向 ModelAndView 对象存值时的 key 即可。


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

@Controller
@RequestMapping("/person")
public class PersonHandler {

    @GetMapping("/get")
    public ModelAndView get(){
        ModelAndView modelAndView = new ModelAndView();
        Person person = new Person();
        person.setId(1);
        person.setName("张三");
        person.setAge(22);
        person.setGender("男");
        modelAndView.addObject("person",person);
        modelAndView.setViewName("person");
        return modelAndView;
    }
}

el表达式标签

<%@page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>person</title>
</head>
<body>
<h1>修改用户信息</h1>
<form>
    用户编号:<input type="text" name="id" value="${person.id}">
    用户姓名:<input type="text" name="name" value="${person.name}"/>
    用户性别<input type="text" name="gender" value="${person.gender}"/>
    用户年龄:<input type="text" name="age" value="${person.age}"/>
    <input type="submit" value="提交">

在这里插入图片描述

<form:form modelAttribute="person">
  用户编号:<form:input path="id"></form:input>
  用户姓名:<form:input path="name"></form:input>
  用户年龄:<form:input path="age"></form:input>
  用户性别:<form:input path="gender"></form:input>
</form:form>

3、form 表单与业务数据完成绑定后,接下来就是将业务数据中的值取出绑定到不同的标签中,通过设置标签的 path 属性完成,将 path 属性的值设置为业务数据对应的属性名即可。

  • form 标签
<form:form modelAttribute="person" method="post"></form:form>

渲染的是 HTML 中的 ,通过 modelAttribute 属性绑定具体的业务数据。

  • input 标签
<form:input path="name"/>

渲染的是 HTML 中的 ,form 标签绑定的是业务数据,input 标签绑定的是业务数据中的属性值,通过 path 与业务数据的属性名对应,并支持级联属性
级联address对象

@Controller
@RequestMapping("/person")
public class PersonHandler {
    @GetMapping("/get")
    public ModelAndView get(){
        ModelAndView modelAndView=new ModelAndView();
        Person person =new Person();
        person.setId(1);
        person.setName("张三");
        person.setAge(22);
        person.setGender("男");
        Address address=new Address();
        address.setAddressId(1);
        address.setAddressName("一号路");
        person.setAddress(address);
        modelAndView.addObject("person",person);
        modelAndView.setViewName("person");
        return modelAndView;
    }

person.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
    <title>person</title>
</head>
<body>
<h1>修改用户信息</h1>
<form>
    用户编号:<input type="text" name="id" value="${person.id}"><br/>
    用户姓名:<input type="text" name="name" value="${person.name}"/><br/>
    用户性别<input type="text" name="gender" value="${person.gender}"/><br/>
    用户年龄:<input type="text" name="age" value="${person.age}"/><br/>
    地址编号:<input type="text" name="address.adressId" value="${person.address.addressId}"/><br/>
    地址名称: <input type="text" name="address.adressName" value="${person.address.addressName}"/><br/>
  </form>
<form:form  modelAttribute="person">
    用户编号:<form:input path="id"></form:input><br/>
    用户姓名:<form:input path="name"></form:input><br/>
    用户年龄:<form:input  path="age"></form:input><br/>
    用户性别:<form:input path="gender"></form:input><br/>
    地址编号:<form:input path="address.addressId"></form:input><br/>
    地址名称:<form:input path="address.addressName"></form:input><br/>
</form:form>
</body>
</html>

在这里插入图片描述

  • password 标签
<form:password path="password"/>

渲染的是 HTML 中的 ,通过 path 属性与业务数据的属性名对应,password 标签的值不会在页面显示。

 地址名称:<form:input path="address.addressName"></form:input><br/>
    用户密码:<form:password path="password"></form:password>
    <form:input path="password"></form:input>

在这里插入图片描述

  • checkbox 标签
 checkbox: <form:checkbox path="flag"/>
 person.setFlag(true);

在这里插入图片描述

<form:checkbox path="hobby" value="读书"/>读书

渲染的是 HTML 中的 ,通过 path 与业务数据的属性名对应,可以绑定 boolean、数组和集合。

如果绑定 boolean 类型的变量,该变量的值为 true,则表示选中,false 表示不选中。

如果绑定数组或者集合类型,数组/集合中的元素等于 checkbox 的 value 值,则该项选中,否则不选中。

public class Person {
private Integer id;
private String name;
private Integer age;
    private String gender;
    private Address address;
    private String password;
private boolean flag;
private String[] hobby;
 String[] hobby={"读书","看电影","旅行"};
        person.setHobby(hobby);
 用户爱好:<form:checkbox path="hobby" value="读书"></form:checkbox>读书
    <form:checkbox path="hobby" value="看电影"></form:checkbox>看电影
    <form:checkbox path="hobby" value="打游戏"></form:checkbox>打游戏
    <form:checkbox path="hobby" value="听音乐"></form:checkbox>听音乐
    <form:checkbox path="hobby" value="旅行"></form:checkbox>旅行

在这里插入图片描述

public class Person {
private Integer id;
private String name;
private Integer age;
    private String gender;
    private Address address;
    private String password;
private boolean flag;
private String[] hobby;
private List<String> hobby2

PersonHandler

List<String> hobby2=new ArrayList<>();
        hobby2.add("打游戏");
        hobby2.add("旅行");
        person.setHobby2(hobby2)

person.jsp

用户爱好:<form:checkbox path="hobby" value="读书"></form:checkbox>读书
<form:checkbox path="hobby" value="看电影"></form:checkbox>看电影
<form:checkbox path="hobby" value="打游戏"></form:checkbox>打游戏
<form:checkbox path="hobby" value="听音乐"></form:checkbox>听音乐
<form:checkbox path="hobby" value="旅行"></form:checkbox>旅行
<hr/>
用户爱好:<form:checkbox path="hobby2" value="读书"></form:checkbox>读书
<form:checkbox path="hobby2" value="看电影"></form:checkbox>看电影
<form:checkbox path="hobby2" value="打游戏"></form:checkbox>打游戏
<form:checkbox path="hobby2" value="听音乐"></form:checkbox>听音乐
<form:checkbox path="hobby2" value="旅行"></form:checkbox>旅行

在这里插入图片描述

  • checkboxes 标签
<form:checkboxes items="${person.hobby}" path="selectHobby" />

渲染的是 HTML 中的一组 ,这里需要结合 items 和 path 两个属性来使用,items 绑定被遍历的集合或数组,path 绑定被选中的集合或数组,可以这样理解,items 为全部选型,path 为默认选中的选型。
数组:
Person类

private String[] hobbys;
private String[] selectHobbys;

PersonHandler类添加

String[] hobbys={"读书","看电影","打游戏","听音乐","旅行"};
        String[] selectHobbys={"读书","打游戏","旅行"};
        person.setHobbys(hobbys);
        person.setSelectHobbys(selectHobbys)
用户爱好:<form:checkboxes path="selectHobbys" items="${person.hobbys}"></form:checkboxes>

在这里插入图片描述
集合:

Person 类

private List<String> hobbys2;
private List<String> selectHobbys2;

PersonHandler类

person.setHobbys2(Arrays.asList("读书","看电影","打游戏","听音乐","旅行"));
person.setSelectHobbys2(Arrays.asList("读书","打游戏","旅行"));

person.jsp

用户爱好:<form:checkboxes path="selectHobbys2" items="${person.hobbys2}"></form:checkboxes>

在这里插入图片描述

  • radiobutton 标签(单选框)
<form:radiobutton path="radioId" value="0"/>

渲染的是 HTML 只的一个 ,绑定的数据与标签的 value 值相等为选中状态,否则为不选中状态。

person类添加

  private Integer radioId;
    public Integer getRadioId() {
        return radioId;
    }
    public void setRadioId(Integer radioId) {
        this.radioId = radioId;
    }

PersonHandler类添加

 person.setRadioId(1);

person.jsp

radio:<form:radiobutton path="radioId" value="0"></form:radiobutton>0
<form:radiobutton path="radioId" value="1"></form:radiobutton>1

访问结果:
在这里插入图片描述

  • radiobuttons 标签
<form:radiobuttons items="${person.grade}" path="selectGrade">

渲染的是 HTML 中的一组 ,这里需要结合 items 和 path 两个属性来使用,items 绑定被遍历的集合或数组,path 绑定被选中的值,可以这样理解,items 为全部选型,path 为默认选中的选型,用法与 form:checkboxes 一致。

Person类

 private Map<Integer,String> gradeMap;
 private Integer selectGrade;

PersonHandler类

Map<Integer,String> gradeMap=new HashMap<>();
gradeMap.put(1,"一年级");
gradeMap.put(2,"二年级");
gradeMap.put(3,"三年级");
gradeMap.put(4,"四年级");
gradeMap.put(5,"五年级");
gradeMap.put(6,"六年级");
 person.setGradeMap(gradeMap);
person.setSelectGrade(3);

person.jsp

radioButtons:<form:radiobuttons path="selectGrade" items="${person.gradeMap}"></form:radiobuttons>

访问结果:
在这里插入图片描述

  • select 标签 (下拉框)

渲染的是 HTML 中的一个 ,这里需要结合 items 和 path 两个属性来使用,items 绑定被遍历的集合或数组,path 绑定被选中的值,用法与 form:radiobuttons/ 一致。
Person.java

private Map<Integer,String> cityMap;
private Integer selectCity;

PersonHandler类

  Map<Integer,String> cityMap=new HashMap<>();
  cityMap.put(1,"北京");
  cityMap.put(2,"上海");
  cityMap.put(3,"广州");
  cityMap.put(4,"深圳");
  person.setCityMap(cityMap);
  person.setSelectCity(3);

person.jsp

 select: <form:select path="selectCity" items="${person.cityMap}"></form:select><hr/>

访问结果:
在这里插入图片描述
在这里插入图片描述

  • options 标签

form:select 结合 form:options 使用,form:select 只定义 path 属性,在 form:select 标签内部添加一个子标签 form:options,设置 items 属性,获取被遍历的集合。

person.jsp添加

select&options:<form:select path="selectCity">
      <form:options items="${person.cityMap}"></form:options>
     </form:select>

访问结果
在这里插入图片描述

  • option 标签

from:select 结合 form:option 使用,form:select 定义 path 属性,给每一个 form:options 设置 values 属性,path 与哪个 value 相等,该项默认选中。(比较灵活,值不需要从后台获取,前台可以定义)

person.jsp

select&option:
    <form:select path="selectCity">
        <form:option value="3" >杭州</form:option>
        <form:option value="4" >成都</form:option>
        <form:option value="5" >西安</form:option>
    </form:select>

访问结果
在这里插入图片描述

  • textarea 标签

渲染的是 HTML 中的一个 ,path 绑定业务数据的属性值,作为文本输入域的默认值。
Person类

private String introduce;

person.jsp

<form:textarea path="introduce"></form:textarea>

PersonHandler类

person.setIntroduce("你好");

访问结果
在这里插入图片描述

  • errors 标签

该标签的使用需要结合 Spring MVC 的 Validator 验证器来使用,将验证结果的 error 信息渲染到 JSP 页面中。

1、创建验证器,实现 Validator 接口。

import org.springframework.validation.Errors;
import org.springframework.validation.ValidationUtils;
import org.springframework.validation.Validator;

public class StudentValidator implements Validator {
//验证当前对象是否时student类型,是的话验证,不是能验证
    @Override
    public boolean supports(Class<?> aClass) {
        return Student.class.equals(aClass);
    }

    @Override
    public void validate(Object o, Errors errors) {
        ValidationUtils.rejectIfEmpty(errors,"name",null,"姓名不能为空");
        ValidationUtils.rejectIfEmpty(errors,"age",null,"年龄不能为空");
    }
}

让其生效
2、springmvc.xml 中添加 Validator 配置。

<bean id="studentValidator" class="com.xxx.StudentValidator"></bean>

<mvc:annotation-driven validator="studentValidator"></mvc:annotation-driven>

3、创建业务方法,第一个 login 方法用来生成业务数据,跳转到 login.jsp,第二个 login 方法用来做验证。添加注解(@Validated ,对student 进行验证,错误信息存到bindingResult,有错误返回到login.jsp,通过errors标签展示错误信息。

@GetMapping("/login")
public ModelAndView login(){
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.addObject("student",new Student());
    modelAndView.setViewName("login");
    return modelAndView;
}

@PostMapping("/login")
public String reg(@Validated Student student, BindingResult bindingResult){
    if(bindingResult.hasErrors()){
        return "login";
    }
    return "index";
}

4、JSP


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <form:form action="/person/login" method="post" modelAttribute="student">
        <form:input path="name"></form:input><form:errors path="name" /><br/>
        <form:input path="age"></form:input><form:errors path="age"/><br/>
        <input type="submit"/>
    </form:form>
</body>
</html>

首先通过get请求来到login,http://localhost:8080/person/login
在这里插入图片描述
不填任何数据直接提交=>
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值