SpringMVC数据绑定的使用
数据绑定即是将HTTP请求中的参数绑定到Handler业务方法的形参
常用的数据绑定类型
- 基本数据类型
- 包装类
- 数组
- 对象
- 集合(List,Set,Map)
- JSON
话不多说,上代码:
项目结构如下所示:
第一步:编写Controller类:
package com.imooc.controller;
import com.imooc.dao.CourseDAO;
import com.imooc.entity.Course;
import com.imooc.entity.CourseList;
import com.imooc.entity.CourseMap;
import com.imooc.entity.CourseSet;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
/**
* Created by Administrator.
*/
@Controller
public class DataBindController {
@Autowired
private CourseDAO courseDAO;
//基本数据类型测试
@RequestMapping(value = "/baseType")
@ResponseBody
public String baseType(@RequestParam(value = "id") int id){
return "id:"+id;
}
//包装类测试
@RequestMapping(value = "/packageType")
@ResponseBody
public String packageType(@RequestParam(value = "id") Integer id){
return "id:"+id;
}
//数组测试
@RequestMapping(value = "/arrayType")
@ResponseBody
public String arrayType(String[] name){
StringBuffer sbf = new StringBuffer();
for (String item:name){
sbf.append(item).append(" ");
}
return sbf.toString();
}
//
@RequestMapping(value = "/pojoType")
public ModelAndView pojoType(Course course){
courseDAO.add(course);
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("index");
modelAndView.addObject("courses",courseDAO.getAll());
return modelAndView;
}
@RequestMapping(value = "/listType")
public ModelAndView listType(CourseList courseList){
for(Course course:courseList.getCourses()){
courseDAO.add(course);
}
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("index");
modelAndView.addObject("courses",courseDAO.getAll());
return modelAndView;
}
@RequestMapping(value = "/mapType")
public ModelAndView mapType(CourseMap courseMap){
for(String key:courseMap.getCourses().keySet()){
Course course = courseMap.getCourses().get(key);
courseDAO.add(course);
}
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("index");
modelAndView.addObject("courses",courseDAO.getAll());
return modelAndView;
}
@RequestMapping(value = "/setType")
public ModelAndView setType(CourseSet courseSet){
for (Course course:courseSet.getCourses()){
courseDAO.add(course);
}
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("index");
modelAndView.addObject("courses",courseDAO.getAll());
return modelAndView;
}
@RequestMapping(value = "/jsonType")
@ResponseBody
public Course jsonType(@RequestBody Course course){
course.setPrice(course.getPrice()+100);
return course;
}
}
第二步:创建实体类:
Author类:
package com.imooc.entity;
/**
* Created by Administrator.
*/
public class Author {
private int id;
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
}
Course类:
package com.imooc.entity;
/**
* Created by Administrator.
*/
public class Course {
private int id;
private String name;
private double price;
private Author author;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public Author getAuthor() {
return author;
}
public void setAuthor(Author author) {
this.author = author;
}
}
Course类和Author类设置级联,往Course类里面传入Author对象
CourseList类:
package com.imooc.entity;
import java.util.List;
/**
* Created by Administrator.
*/
public class CourseList {
private List<Course> courses;
public List<Course> getCourses() {
return courses;
}
public void setCourses(List<Course> courses) {
this.courses = courses;
}
}
CourseMap类:
package com.imooc.entity;
import java.util.Map;
/**
* Created by Administrator.
*/
public class CourseMap {
private Map<String,Course> courses;
public void setCourses(Map<String, Course> courses) {
this.courses = courses;
}
public Map<String, Course> getCourses() {
return courses;
}
}
CourseSet类:
package com.imooc.entity;
import java.util.HashSet;
import java.util.Set;
/**
* Created by Administrator.
*/
public class CourseSet {
private Set<Course> courses = new HashSet<Course>();
public void setCourses(Set<Course> courses) {
this.courses = courses;
}
public Set<Course> getCourses() {
return courses;
}
public CourseSet(){
courses.add(new Course());
courses.add(new Course());
}
}
第三步:创建一个CouserDao类:
package com.imooc.dao;
import com.imooc.entity.Course;
import org.springframework.stereotype.Repository;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
/**
* Created by Administrator.
*/
@Repository
public class CourseDAO {
private Map<Integer,Course> courses = new HashMap<Integer, Course>();
public void add(Course course){
courses.put(course.getId(),course);
}
public Collection<Course> getAll(){
return courses.values();
}
}
第四步:编写前端jsp页面
add.jsp,代码如下所示:
<%--
Created by IntelliJ IDEA.
User: Administrator.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>add</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
overflow-x:hidden;
}
#main{
width:1200px;
height:600px;
margin-left:500px;
}
</style>
</head>
<body>
<div id="main">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>添加课程</h1>
</div>
</div>
<!--提交给我pojoType-->
<form class="form-horizontal" role="form" action="pojoType" method="post">
<div class="form-group">
<label class="col-sm-1 control-label">课程编号</label>
<div class="col-sm-3">
<!--name即为couser.id -->
<input type="text" class="form-control" name="id" placeholder="请输入课程编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="name" placeholder="请输入课程名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程价格</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="price" placeholder="请输入课程价格">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="author.id" placeholder="请输入讲师编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师姓名</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="author.name" placeholder="请输入讲师姓名">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-3">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</body>
</html>
addList.jsp:
<%--
Created by IntelliJ IDEA.
User: Administrator.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>add</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
overflow-x:hidden;
}
#main{
width:1200px;
height:600px;
margin-left:500px;
}
</style>
</head>
<body>
<div id="main">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>添加课程</h1>
</div>
</div>
<form class="form-horizontal" role="form" action="listType" method="post">
<div class="form-group">
<label class="col-sm-1 control-label">课程1编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses[0].id" placeholder="请输入课程编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程1名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses[0].name" placeholder="请输入课程名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程1价格</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses[0].price" placeholder="请输入课程价格">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses[0].author.id" placeholder="请输入讲师编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师姓名</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses[0].author.name" placeholder="请输入讲师姓名">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程2编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses[1].id" placeholder="请输入课程编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程2名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses[1].name" placeholder="请输入课程名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程2价格</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses[1].price" placeholder="请输入课程价格">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses[1].author.id" placeholder="请输入讲师编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师姓名</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses[1].author.name" placeholder="请输入讲师姓名">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-3">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</body>
</html>
addMap.jsp:
<%--
Created by IntelliJ IDEA.
User: Administrator.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>add</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
overflow-x:hidden;
}
#main{
width:1200px;
height:600px;
margin-left:500px;
}
</style>
</head>
<body>
<div id="main">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>添加课程</h1>
</div>
</div>
<form class="form-horizontal" role="form" action="mapType" method="post">
<div class="form-group">
<label class="col-sm-1 control-label">课程1编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['one'].id" placeholder="请输入课程编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程1名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['one'].name" placeholder="请输入课程名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程1价格</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['one'].price" placeholder="请输入课程价格">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['one'].author.id" placeholder="请输入讲师编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师姓名</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['one'].author.name" placeholder="请输入讲师姓名">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程2编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['two'].id" placeholder="请输入课程编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程2名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['two'].name" placeholder="请输入课程名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程2价格</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['two'].price" placeholder="请输入课程价格">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['two'].author.id" placeholder="请输入讲师编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师姓名</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['two'].author.name" placeholder="请输入讲师姓名">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-3">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</body>
</html>
addset.jsp:
<%--
Created by IntelliJ IDEA.
User: Administrator.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>add</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
overflow-x:hidden;
}
#main{
width:1200px;
height:600px;
margin-left:500px;
}
</style>
</head>
<body>
<div id="main">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>imooc-添加课程</h1>
</div>
</div>
<form class="form-horizontal" role="form" action="mapType" method="post">
<div class="form-group">
<label class="col-sm-1 control-label">课程1编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['one'].id" placeholder="请输入课程编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程1名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['one'].name" placeholder="请输入课程名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程1价格</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['one'].price" placeholder="请输入课程价格">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['one'].author.id" placeholder="请输入讲师编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师姓名</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['one'].author.name" placeholder="请输入讲师姓名">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程2编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['two'].id" placeholder="请输入课程编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程2名称</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['two'].name" placeholder="请输入课程名称">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">课程2价格</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['two'].price" placeholder="请输入课程价格">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师编号</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['two'].author.id" placeholder="请输入讲师编号">
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label">讲师姓名</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="courses['two'].author.name" placeholder="请输入讲师姓名">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-3">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</body>
</html>
index.jsp:
<%--
Created by IntelliJ IDEA.
User: Administrator.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>课程列表</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>课程管理</h1>
</div>
</div>
<!-- 显示表格数据 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>
<input type="checkbox" id="check_all"/>
</th>
<th>编号</th>
<th>课程名</th>
<th>价格</th>
<th>讲师</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${courses}" var="course">
<tr>
<td><input type='checkbox' class='check_item'/></td>
<td>${course.id}</td>
<td>${course.name}</td>
<td>${course.price}</td>
<td>${course.author.name}</td>
<td>
<button class="btn btn-primary btn-sm edit_btn">
<span class="glyphicon glyphicon-pencil">编辑</span>
</button>
<button class="btn btn-danger btn-sm delete_btn">
<span class="glyphicon glyphicon-trash">删除</span>
</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
json.jsp:
<%--
Created by IntelliJ IDEA.
User: Administrator.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var course = {
"id":"8",
"name":"SSM框架整合",
"price":"200"
};
$.ajax({
url:"jsonType",
data:JSON.stringify(course),
type:"post",
contentType:"application/json;charse=UTF-8",
dataType:"json",
success:function(data){
alert(data.name+"---"+data.price);
}
})
})
</script>
<body>
</body>
</html>
pom.xml:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.imooc</groupId>
<artifactId>SpringMVCDataBind</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>SpringMVCDataBind Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.3.1.RELEASE</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.3</version>
</dependency>
<!-- JSTL -->
<dependency>
<groupId>jstl</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
</dependencies>
<build>
<finalName>SpringMVCDataBind</finalName>
</build>
</project>
运行效果如下所示: