在上一篇博客 SpringMVC框架之创建第一个项目(IDEA)演示了如何在Java Web项目中引入Spring MVC
框架,本篇博客将演示SpringMVC如何进行前后端的数据交互,包括前端页面
提交数据到controller
以及controller
返回数据给前端页面
。
为了缩短博文篇幅,此处不再复述项目的创建、配置过程,请参考前一篇博客 SpringMVC框架之创建第一个项目(IDEA)。
一、前端页面提交数据给controller
1、在web/WEB-INF/user
目录添加页面register.jsp
<%--
Created by IntelliJ IDEA.
User: hestyle
Date: 2020/1/28
Time: 12:01
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>用户注册</title>
</head>
<body>
<form action="/user/register.do" method="post">
用户名:<input type="text" name="username"><br>
密码:<input type="text" name="password"><br>
性别:<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女<br>
年龄:<input type="text" name="age"><br>
邮箱:<input type="text" name="email"><br>
<input type="submit" value="注册">
</form>
</body>
</html>
2、编写UserController
控制器
package cn.hestyle.demo.web.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* description: UserController控制器
*
* @author hestyle
* @version 1.0
* @className springmvc_demo_01->UserController
* @date 2020-01-27 16:39
**/
@Controller
@RequestMapping("user")
public class UserController {
//@Controller注解的作用是声明UserController是一个控制器
//@RequestMapping("user")注解的作用是,设置控制器的根路径
@RequestMapping("toRegister.do")
public String toRegister(){
//跳转到/user/register.jsp注册页面,因为WEB-INF下的页面无法直接访问
return "/user/register";
}
}
启动项目后,访问/user/toRegister.do链接进入register.jsp页面。
3、controller接收前端页面参数的几种方式
方法①、在方法中直接声明参数
在UserController控制器中添加register1方法。
@RequestMapping("register1.do")
public String register1(String username, String password, String gender, String age, String email){
//方式一:直接在方法参数列表中声明所有参数,SpringMVC会帮我们自动注入
System.err.println(username);
System.err.println(password);
System.err.println(gender);
System.err.println(age);
System.err.println(email);
return "/user/userInfo";
}
修改register.jsp
中表单提交的路径。
刷新项目,然后访问/user/toRegister.do
,输入表单参数,然后提交
控制台输出如下信息:
方法②、封装成实体类提交
首先编写实体类User
package cn.hestyle.demo.entity;
import java.io.Serializable;
/**
* description: User实体类
*
* @author hestyle
* @version 1.0
* @className SpringMVC_demo_01->User
* @date 2020-01-28 12:34
**/
public class User implements Serializable {
private Integer id;
private String username;
private String password;
private String gender;
private Integer age;
private String email;
public User() {
}
public User(String username, String password, String gender, Integer age, String email) {
this.username = username;
this.password = password;
this.gender = gender;
this.age = age;
this.email = email;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
", gender='" + gender + '\'' +
", age=" + age +
", email='" + email + '\'' +
'}';
}
}
在UserController控制器中添加register2方法
修改register.jsp
页面表单参数提交的url为/user/register2.do
刷新项目后,重新访问toRegister.do,然后重新输入表单参数提交表单
控制台输出信息:
方法③、封装成包装类型
添加包装类UserExt
package cn.hestyle.demo.entity;
import java.io.Serializable;
import java.util.List;
import java.util.Map;
/**
* description: UserExt包装类
*
* @author hestyle
* @version 1.0
* @className SpringMVC_demo_01->UserExt
* @date 2020-01-28 12:46
**/
public class UserExt implements Serializable {
private User user;
private List<User> userList;
private Map<String, Object> userInfo;
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public List<User> getUserList() {
return userList;
}
public void setUserList(List<User> userList) {
this.userList = userList;
}
public Map<String, Object> getUserInfo() {
return userInfo;
}
public void setUserInfo(Map<String, Object> userInfo) {
this.userInfo = userInfo;
}
@Override
public String toString() {
return "UserExt{" +
"user=" + user +
", userList=" + userList +
", userInfo=" + userInfo +
'}';
}
}
在UserController
控制器中添加register3
方法
修改register.jsp
中的表单
刷新项目后,重新访问toRegister.do,然后重新输入表单参数提交表单
控制台输出信息:
方法④、封装成list批量提交
在UserController添加register4
方法
修改register.jsp
中的表单
<form action="${pageContext.request.contextPath}/user/register4.do" method="post">
用户名:<input type="text" name="userList[0].username"><br>
密码:<input type="text" name="userList[0].password"><br>
性别:<input type="radio" name="userList[0].gender" value="男">男
<input type="radio" name="userList[0].gender" value="女">女<br>
年龄:<input type="text" name="userList[0].age"><br>
邮箱:<input type="text" name="userList[0].email"><br>
<hr>
用户名2:<input type="text" name="userList[1].username"><br>
密码2:<input type="text" name="userList[1].password"><br>
性别2:<input type="radio" name="userList[1].gender" value="男">男
<input type="radio" name="userList[1].gender" value="女">女<br>
年龄2:<input type="text" name="userList[1].age"><br>
邮箱2:<input type="text" name="userList[1].email"><br>
<input type="submit" value="注册">
</form>
刷新项目后,重新访问toRegister.do,然后重新输入表单参数提交表单
控制台输出:
方法⑤、封装成map
在userController中添加register5方法
@RequestMapping("register5.do")
public String register5(UserExt userExt){
//方式四:将表单参数封装到包装类UserExt.userInfo的map属性
System.err.println(userExt.getUserInfo());
return "/user/userInfo";
}
修改register.jsp
中的表单
<form action="${pageContext.request.contextPath}/user/register5.do" method="post">
用户名:<input type="text" name="userInfo['username']"><br>
密码:<input type="text" name="userInfo['password']"><br>
性别:<input type="radio" name="userInfo['gender']" value="男">男
<input type="radio" name="userInfo['gender']" value="女">女<br>
年龄:<input type="text" name="userInfo['age']"><br>
邮箱:<input type="text" name="userInfo['email']"><br>
<input type="submit" value="注册">
</form>
刷新项目后,重新访问toRegister.do
,然后重新输入表单参数提交表单
二、Controller传数据给前端页面
SpringMVC
专门为Controller
设计了一个Model
用户传递数据给前端页面。
修改UserController.register2
方法
@RequestMapping("register2.do")
public String register2(User user, Model model){
//方式二:将表单参数封装到实体类User
System.err.println(user);
//model专门用于Controller传数据给前端页面,只要放到里面,springMVC会自动传
model.addAttribute("user", user);
return "/user/userInfo";
}
修改register.jsp
页面
新建userInfo.jsp
页面
刷新项目后,重新访问toRegister.do
,然后重新输入表单参数提交表单
会自动跳转到userInfo.jsp页面
总的来说,SpringMVC
框架前端后端数据交互比较方便,前端传递数据给Controller
,只需要在对应的处理方法上添加对应的参数,Controller
传递数据给前端页面
,只需要在方法上添加Model
参数即可。
在web.xml中增加编码拦截器
<!-- 编码过滤器 -->
<filter>
<filter-name>characterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>characterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
地址一:https://pan.baidu.com/s/1dJZyRfwHi73Dws68quf-Ow 提取码: 4y8n
地址二:https://pan.baidu.com/s/1sFv-WbKU2yqvy74JoqRS2g 提取码: bb6r
地址三:https://pan.baidu.com/s/1VoyciIaA6-ugpYCGLkA9tA 提取码: a2ks
以上就是SpringMVC框架之前后端数据交互的主要内容,喜欢的可以点个赞、给个关注哟~ ღ( ´・ᴗ・` )比心