一、RESTful 风格案例(CRUD)
准备工作
和传统 CRUD 一样,实现对员工信息的增删改查。
- 搭建环境
- 准备实体类
准备dao模拟数据 ```xml <?xml version=”1.0” encoding=”UTF-8”?>
<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>forceResponseEncoding</param-name>
<param-value>true</param-value>
</init-param>
<filter-name>CharacterEncodingFilter</filter-name> <url-pattern>/*</url-pattern>
<filter-name>HiddenHttpMethodFilter</filter-name> <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
<filter-name>HiddenHttpMethodFilter</filter-name> <url-pattern>/*</url-pattern>
<servlet-name>DispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springMVC.xml</param-value> </init-param> <load-on-startup>1</load-on-startup>
<servlet-name>DispatcherServlet</servlet-name> <url-pattern>/</url-pattern>
```xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
https://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
https://www.springframework.org/schema/mvc/spring-mvc.xsd">
<!--扫描组件-->
<context:component-scan base-package="com.atguigu.mvc.rest"/>
<!-- 配置Thymeleaf视图解析器 -->
<bean id="viewResolver" class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
<!--设置优先级-->
<property name="order" value="1"/>
<property name="characterEncoding" value="UTF-8"/>
<property name="templateEngine">
<bean class="org.thymeleaf.spring5.SpringTemplateEngine">
<property name="templateResolver">
<bean class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
<!-- 视图前缀 -->
<property name="prefix" value="/WEB-INF/templates/"/>
<!-- 视图后缀 -->
<property name="suffix" value=".html"/>
<property name="templateMode" value="HTML5"/>
<property name="characterEncoding" value="UTF-8" />
</bean>
</property>
</bean>
</property>
</bean>
<!--开启mvc注解驱动-->
<mvc:annotation-driven/>
<!--开启对静态资源的访问-->
<mvc:default-servlet-handler/>
<!--配置视图控制器-->
<mvc:view-controller path="/" view-name="index"/>
<mvc:view-controller path="/toAdd" view-name="employee_add"/>
</beans>
public class Employee {
private Integer id;
private String lastName;
private String email;
private Integer gender;//1 male, 0 female
public Employee() {
}
public Employee(Integer id, String lastName, String email, Integer gender) {
this.id = id;
this.lastName = lastName;
this.email = email;
this.gender = gender;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getLastName() {
return lastName;
}
public void setLastName(String lastName) {
this.lastName = lastName;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public Integer getGender() {
return gender;
}
public void setGender(Integer gender) {
this.gender = gender;
}
@Override
public String toString() {
return "Employee{" +
"id=" + id +
", lastName='" + lastName + '\'' +
", email='" + email + '\'' +
", gender=" + gender +
'}';
}
}
@Repository
public class EmployeeDao {
private static Map<Integer, Employee> employees = null;
static{
employees = new HashMap<Integer, Employee>();
employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1));
employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1));
employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0));
employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0));
employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1));
}
private static Integer initId = 1006;
public void save(Employee employee){
if(employee.getId() == null){
employee.setId(initId++);
}
employees.put(employee.getId(), employee);
}
public Collection<Employee> getAll(){
return employees.values();
}
public Employee get(Integer id){
return employees.get(id);
}
public void delete(Integer id){
employees.remove(id);
}
}
准备实现的功能清单
功能 | URL 地址 | 请求方式 |
---|---|---|
访问首页√ | / | GET |
查询全部数据√ | /employee | GET |
删除√ | /employee/2 | DELETE |
跳转到添加数据页面√ | /toAdd | GET |
执行保存√ | /employee | POST |
跳转到更新数据页面√ | /employee/2 | GET |
执行更新√ | /employee | PUT |
1、访问首页
配置view-controller
<mvc:view-controller path="/" view-name="index"/>
创建页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" >
<title>Title</title>
</head>
<body>
<h1>首页</h1>
<a th:href="@{/employee}">访问员工信息</a>
</body>
</html>
2、查询所有数据
控制器方法
@Controller
public class EmployeeController {
@Autowired
private EmployeeDao employeeDao;
@GetMapping("/employee")
public String getAllEmployee(Model model) {
Collection<Employee> employeeList = employeeDao.getAll();
model.addAttribute("employeeList", employeeList);
return "employee_list";
}
}
创建 employee_list.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>员工列表</title>
</head>
<body>
<table id="dataTable" border="1" cellspacing="0" cellpadding="0" style="text-align: center">
<tr>
<th colspan="5">Employee Info</th>
</tr>
<tr>
<th>id</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>options(<a th:href="@{/toAdd}">add</a>)</th>
</tr>
<tr th:each="employee : ${employeeList}">
<td th:text="${employee.id}"></td>
<td th:text="${employee.lastName}"></td>
<td th:text="${employee.email}"></td>
<td th:text="${employee.gender}"></td>
<td>
<a @click="deleteEmployee" th:href="@{'/employee/' + ${employee.id}}">delete</a>
<a th:href="@{'/employee/' + ${employee.id}}">update</a>
</td>
</tr>
</table>
</body>
</html>
3、删除某条数据
在 employee_list.html 中 创建处理 delete 请求的表单
需要先引入 vue.js(需要开启静态资源的访问:<mvc:default-servlet-handler/>
)
然后,通过vue处理点击事件。
<form id="deleteForm" method="post">
<input type="hidden" name="_method" value="delete">
</form>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript">
let vue = new Vue({
el: "#dataTable",
methods: {
deleteEmployee: function (event) {
let deleteForm = document.getElementById("deleteForm");
deleteForm.action = event.target.href;//触发点击事件的超链接的 href 属性赋给表单的 action
deleteForm.submit();//提交表单
event.preventDefault();//取消超链接的默认行为
}
}
});
</script>
控制器方法
@DeleteMapping("/employee/{id}")
public String deleteEmployee(@PathVariable("id") Integer id) {
employeeDao.delete(id);
return "redirect:/employee";
}
4、添加一条数据
配置 view-controller
<mvc:view-controller path="/toAdd" view-name="employee_add"/>
创建employee_add.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>add employee</title>
</head>
<body>
<form th:action="@{/employee}" method="post">
lastName: <input type="text" name="lastName"><br>
email: <input type="text" name="email"><br>
gender: <input type="radio" name="gender" value="1">male
<input type="radio" name="gender" value="0">female<br>
<input type="submit" value="add">
</form>
</body>
</html>
控制器方法
@PostMapping("/employee")
public String addEmployee(Employee employee) {
employeeDao.save(employee);
return "redirect:/employee";
}
5、修改某条数据
创建 employee_update.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>update employee</title>
</head>
<body>
<form th:action="@{/employee}" method="post">
<input type="hidden" name="_method" value="put">
<input type="hidden" name="id" th:value="${employee.id}">
lastName: <input type="text" name="lastName" th:value="${employee.lastName}"><br>
email: <input type="text" name="email" th:value="${employee.email}"><br>
gender: <input type="radio" name="gender" value="1" th:field="${employee.gender}">male
<input type="radio" name="gender" value="0" th:field="${employee.gender}">female<br>
<input type="submit" value="update">
</form>
</body>
</html>
控制器方法
//数据回显
@GetMapping("/employee/{id}")
public String getEmployeeById(@PathVariable("id") Integer id, Model model) {
Employee employee = employeeDao.get(id);
model.addAttribute("employee", employee);
return "employee_update";
}
//修改数据
@PutMapping("/employee")
public String updateEmployee(Employee employee) {
employeeDao.save(employee);
return "redirect:/employee";
}
二、报文信息转换
HttpMessageConverter
,报文信息转换器,将请求报文转换为 Java 对象,或将 Java 对象转换为响应报文,它提供了两个注解和两个类型:
@RequestBody
@ResponseBody
RequestEntity
ResponseEntity
@ResquestBody
@RequestBody
可以获取请求体,需要在控制器方法设置一个形参,使用@RequestBody
进行标识,当前请求的请求体就会为当前注解所标识的形参赋值。
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<form th:action="@{/testRequestBody}" method="post">
用户名:<input type="text" name="username"><br>
密码:<input type="password" name="password"><br>
<input type="submit" value="测试@RequestBody注解">
</form>
<br>
<a th:href="@{/testResponse}">通过 servletAPI 的 response 对象响应浏览器数据</a>
<br>
<a th:href="@{/testResponseBody}">测试 @responseBody 响应浏览器数据</a>
<br>
<a th:href="@{/testResponseUser}">测试 @responseBody 返回 User 对象</a>
</body>
</html>
@Controller
public class HttpController {
@RequestMapping("/testRequestBody")
public String testRequestBody(@RequestBody String requestBody) {
System.out.println("requestBody : " + requestBody);//requestBody : username=admin&password=123456
return "success";
}
}
RequestEntity
RequestEntity
封装请求报文的一种类型,需要在控制器方法的形参中设置该类型的形参,当前请求的请求报文就会赋值给该形参,可以通过getHeaders()
获取请求头信息,通过getBody()获取请求体信息。
@RequestMapping("/testRequestEntity")
public String testRequestEntity(RequestEntity<String> requestEntity) {
//当前 requestEntity 表示整个请求报文的信息
System.out.println("请求头: " + requestEntity.getHeaders());
System.out.println("请求体: " + requestEntity.getBody());
return "success";
}
@ResponseBody(常用)
在不使用@ResponseBody
时候,原生的Servlet处理方法如下:
@RequestMapping("/testResponse")
public void testResponse(HttpServletResponse response) throws IOException {
response.getWriter().println("Hello, response");
}
@ResponseBody
用于标识一个控制器方法,可以将该方法的返回值直接作为响应报文的响应体响应到浏览器。
@RequestMapping("/testResponseBody")
@ResponseBody
public String testResponseBody() {
return "success";//浏览器页面显示success
}
@RestController(常用)
@RestController
是 SpringMVC 提供的一个复合注解,标识在控制器的类上,就相当于为类添加了@Controller
,并且为其中的每个方法添加了@ResponseBody
。
ResponseEntity
ResponseEntity
用于控制器方法的返回值类型,该控制器方法的返回值就是响应到浏览器的响应报文。
处理 JSON
1、导入 jackson 的依赖
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.12.1</version>
</dependency>
2、开启mvc的注解驱动
<mvc:annotation-driven />
此时在HandlerAdaptor
中会自动装配一个消息转换器:MappingJackson2HttpMessageConverter
,可以将响应到浏览器的Java 对象转换为 Json 格式的字符串。
3、使用@ResponseBody
将Java对象直接作为控制器方法的返回值返回,就会自动转换为Json格式的字符串。
@RequestMapping("/testResponseUser")
@ResponseBody
public User testResponseUser() {
return new User(1001, "admin", "123456", 23, "男");
}
浏览器的页面中展示的结果:{“id”:1001,”username”:”admin”,”password”:”123456”,”age”:23,”sex”:”男”}
处理 Ajax 请求
1、vue 和 axios 处理点击事件
注意,该步骤需要引入 vue.js
和 axios.min.js
,并开启静态资源访问(<mvc:default-servlet-handler/>
)
<div id="app">
<a @click="testAxios" th:href="@{/testAxios}">SpringMVC处理ajax</a>
</div>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript">
new Vue({
el: "#app",
methods: {
testAxios: function (event) {
axios({
method: "post",
url: event.target.href,
params: {
username: "admin",
password: "123456"
}
}).then(function (response) {
alert(response.data);
});
event.preventDefault();
}
}
});
</script>
2、使用@ResponseBody
@RequestMapping("/testAxios")
@ResponseBody
public String testAxios(String username, String password) {
System.out.println(username + ", " + password);
return "Hello, Axios";
}
三、文件上传与下载
文件上传
文件上传要求 form 表单的请求方式必须为 post,并且添加属性 enctype="multipart/form-data"
,SpringMVC 中将上传的文件封装到 MultipartFile
对象中,通过此对象可以获取文件相关信息。
1、添加依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
2、配置文件上传解析器
<!--配置文件上传解析器-->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>
3、控制器方法
@Controller
public class FileUpAndDownController {
@RequestMapping("/testUp")
public String testUp(MultipartFile photo, HttpSession session) throws IOException {
//获取上传的文件的文件名
String fileName = photo.getOriginalFilename();
//获取上传的文件的后缀名
String suffixName = fileName.substring(fileName.lastIndexOf("."));
//将 UUID 和后缀名拼接后的结果作为文件名
String uuid = UUID.randomUUID().toString().replaceAll("-", "");
fileName = uuid + suffixName;
//获取服务器中的 photo 目录路径
ServletContext servletContext = session.getServletContext();
String photoPath = servletContext.getRealPath("photo");
File file = new File(photoPath);
//判断 photoPath 对应的路径是否存在,若不存在,则创建目录
if (!file.exists()) {
file.mkdir();
}
String finalPath = photoPath + File.separator + fileName;
photo.transferTo(new File(finalPath));
return "success";
}
}
文件下载
使用 ResponseEntity
实现下载文件的功能
@Controller
public class FileUpAndDownController {
@RequestMapping("/testDown")
public ResponseEntity<byte[]> testResponseEntity(HttpSession session) throws IOException {
//获取ServletContext对象
ServletContext servletContext = session.getServletContext();
//获取服务器中文件的真实路径
String realPath = servletContext.getRealPath("/static/img/1.JPG");
//创建输入流
InputStream is = new FileInputStream(realPath);
//创建字节数组
byte[] bytes = new byte[is.available()];
//将流读到字节数组中
is.read(bytes);
//创建HttpHeaders对象设置响应头信息
MultiValueMap<String, String> headers = new HttpHeaders();
//设置要下载方式以及下载文件的名字
headers.add("Content-Disposition", "attachment;filename=1.jpg");
//设置响应状态码
HttpStatus statusCode = HttpStatus.OK;
//创建ResponseEntity对象
ResponseEntity<byte[]> responseEntity = new ResponseEntity<>(bytes, headers, statusCode);
//关闭输入流
is.close();
return responseEntity;
}
}