1. 处理JSON数据
1.1 案例需求
目标： RoleConrtoller控制器
- /role/list GET请求
- 跳转到角色管理初始化页面 role_list.jsp
请求转发
- 跳转到角色管理初始化页面 role_list.jsp
- /role/data_list GET请求
Ajax- 获取角色
数据 - 返回JSON格式的数据
- 获取角色
- /role/add GET请求
- 跳转到新增角色页面 role_add.jsp
请求转发
- 跳转到新增角色页面 role_add.jsp
- /role/add POST请求
- 保存成功后弹出成功提示，然后跳转到列表页面
Ajax
- 保存成功后弹出成功提示，然后跳转到列表页面
- /role/update/10 GET请求
- 跳转到用户修改页面 user_update.jsp
请求转发
- 跳转到用户修改页面 user_update.jsp
- /role/update POST请求
- 保存成功后弹出成功提示，然后跳转到列表页面
Ajax
- 保存成功后弹出成功提示，然后跳转到列表页面
- /role/delete/10 GET请求
- 删除成功后弹出成功提示，然后跳转到列表页面
Ajax
- 删除成功后弹出成功提示，然后跳转到列表页面
1.2 引入JSON类库
com.fasterxml.jackson.core
jackson-core
2.9.8
com.fasterxml.jackson.core
jackson-databind
2.9.8
com.fasterxml.jackson.core
jackson-annotations
2.9.8
1.3 R 类
image-20191024120128217.png
package com.imcode.common.model;
import java.util.HashMap;
public class R extends HashMap {
public static R ok() {
R r = new R();
r.put("code", 0);
r.put("msg", "请求成功");
return r;
}
public static R ok(String msg) {
R r = new R();
r.put("code", 0);
r.put("msg", msg);
return r;
}
public static R ok(String msg, Object data) {
R r = new R();
r.put("code", 0);
r.put("msg", msg);
r.put("data", data);
return r;
}
public static R error(String msg) {
R r = new R();
r.put("code", 1);
r.put("msg", msg);
return r;
}
public static R error(int code, String msg) {
R r = new R();
r.put("code", code);
r.put("msg", msg);
return r;
}
@Override
public R put(String key, Object value) {
super.put(key, value);
return this;
}
}
2. @ResponseBody 返回JSON数据
该注解用于将Controller的方法返回的对象，通过适当的HttpMessageConverter转换为指定格式后，写入到Response对象的body数据区
2.1 获取角色列表数据
model
image-20191024115612412.png
public class Role {
private Integer id;
private String roleName;
private String remark;//角色描述
private Date createTime;
private Date updateTime;
...
}
controller
image-20191024115451715.png
@Controller
@RequestMapping("/role")
public class RoleController {
/**
* 获取角色列表的数据
* @return
*/
@GetMapping("/data_list")
@ResponseBody
public R dataList(){
List list = new ArrayList<>();
for (int i=1;i<=10;i++){
Role role = new Role();
role.setId(i);
role.setRoleName("角色名称" + i);
role.setRemark("角色描述" + i);
role.setCreateTime(new Date());
role.setUpdateTime(new Date());
list.add(role);
}
R data = R.ok();
data.put("total",500);
data.put("rows",list);
return data;
}
}
响应数据
image-20191024124905712.png
日期返回的是时间戳，处理成我们需要的日期格式
@JsonFormat
该注解是jackson类库提供的注解，使用在对象的属性上，在使用jackson的api序列化和反序列java对象的时候，按pattern属性定义的日期格式对日期进行格式化。
timezone:设置时区，GMT+8表示东八区
image-20191024125105691.png
再次测试
image-20191024125225107.png
2.2 展示角色列表数据
controller
image-20191024125817738.png
jsp
角色列表
BootstrapTable 表格插件
运行效果
image-20191024130315584.png
2.3 新增角色
controller
/**
* 跳转到新增角色页面
* @return
*/
@GetMapping("/add")
public String add(){
return "sys/role_add";
}
/**
* 新增角色
* @param role
* @return
*/
@PostMapping("/add")
@ResponseBody
public R add(Role role){
System.out.println(role);
return R.ok();
}
响应数据
image-20191024131415139.png
js
$('#data-form').parsley().on('form:submit', function () {
$.ajax({
//url: '${ctx}/static/data/response.json',
url: '${ctx}/role/add',
type: 'post',
data: $("#data-form").serialize(),
dataType: 'json',
success: function (response) {
if (response.code == 0) {
layer.msg(response.msg, {
icon: 1,
time: 2000,
offset: '0px'
}, function (index) {
window.location.href = '${ctx}/role/list';
});
} else {
layer.alert(response.msg, {icon: 5, offset: '0px'});
}
}
})
});
3. @RequestBody 接收JSON数据
ResponseBody java对象---> json字符串
RequestBody json字符串-->java对象
该注解用于读取Request请求的body部分数据，使用系统默认配置的HttpMessageConverter进行解析，然后把相应的数据绑定到要返回的对象上
再把HttpMessageConverter返回的对象数据绑定到 controller中方法的参数上
3.1 修改角色
controller
@GetMapping("/update/{id}")
public String update(@PathVariable Integer id, Model model) {
Role role = new Role();
role.setId(id);
role.setRoleName("系统管理员");
role.setRemark("描述信息");
model.addAttribute("role",role);
return "sys/role_update";
}
@PostMapping("/update")
@ResponseBody
// @RequestBody 将从客户端接收到的json字符串转换成java对象
public R update(@RequestBody Role role) {
System.out.println(role);
return R.ok();
}
postman测试
image-20191024150045001.png
js
function form2Json(formId) {
var arr = $(formId).serializeArray();
var jsonObj = {};
for (var index in arr) {
jsonObj[arr[index].name] = arr[index].value;
}
return JSON.stringify(jsonObj);
}
$('#data-form').parsley().on('form:submit', function () {
var arr = $("#data-form").serializeArray();
var jsonObj = {};
for (var index in arr) {
jsonObj[arr[index].name] = arr[index].value;
}
$.ajax({
url: '${ctx}/role/update',
type: 'post',
data: form2Json('#data-form'),
dataType: 'json',
contentType:"application/json;charset=utf-8",
success: function (response) {
if (response.code == 0) {
layer.msg(response.msg, {icon: 1, time: 1000, offset: '0px'}, function (index) {
window.location.href = 'role_list.html';
});
} else {
layer.alert(response.msg, {icon: 5, offset: '0px'});
}
}
})
});
4. 文件上传
4.1 环境搭建
-
在
pom.xml引入common-file-upload依赖commons-fileupload commons-fileupload 1.3.3 -
在
springmvc-config.xml配置文件解析器
4.2 单文件上传
@PostMapping("/upload01")
@ResponseBody
public R upload(MultipartFile uploadFile) {
try {
System.out.println(uploadFile.getName());//表单name属性的值
System.out.println(uploadFile.getOriginalFilename());//文件名称
System.out.println(uploadFile.getSize());
//保存文件到磁盘
File file = new File("D:/" + uploadFile.getOriginalFilename());
uploadFile.transferTo(file);
} catch (IOException e) {
e.printStackTrace();
return R.error(e.getMessage());
}
return R.ok("文件上传成功");
}
4.3 多文件上传
@PostMapping("/upload02")
@ResponseBody
public R upload(@RequestParam("uploadFile") MultipartFile[] multipartFile) {
try {
for(MultipartFile uploadFile : multipartFile){
//保存文件到磁盘
File file = new File("D:/" + uploadFile.getOriginalFilename());
uploadFile.transferTo(file);
}
} catch (IOException e) {
e.printStackTrace();
return R.error(e.getMessage());
}
return R.ok("文件上传成功");
}
4.4 上传文件到服务器
- 思路：将图片上传到工程的发布目录下，工程发布目录下的资源可以通过http协议直接访问到
@Controller
@RequestMapping("/common/file")
public class FileController {
@PostMapping("/upload")
@ResponseBody
public R uplaod(@RequestParam("uploadFile") MultipartFile uploadFile, HttpSession session) {
try {
String fileName = uploadFile.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf(".") - 1);
String uuid = UUID.randomUUID().toString().toUpperCase().replace("-", "");
String uploadFileName = uuid + suffix;
String realPath = session.getServletContext().getRealPath("upload");
File file = new File(realPath + File.separator + uploadFileName);
uploadFile.transferTo(file);
return R.ok()
.put("url", "http://localhost:8080/admin/upload/" + uploadFileName)
.put("name",uploadFileName);
} catch (IOException e) {
e.printStackTrace();
return R.error(e.getMessage());
}
}
}
4.5 文件上传插件-dropzone
dropzone 文档地址
https://gitlab.com/meno/dropzone
参考资料：
https://www.jianshu.com/p/eaf870f7c88e 入门文章
https://www.cnblogs.com/webenh/p/6143237.html 官方文档翻译
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%--获取应用上下文的路径--%>
i-admin 后台管理系统 - 文件上传
ajax文件上传 - dropzone
5. 封装文件上传服务
5.1 application.properties
将上传文件有关的配置抽取到配置文件
image-20191028012601736.png
file.server=http://localhost:8080/admin/upload
file.location = /upload
5.2 FileService
image-20191028012831161.png
@Service
public class FileService {
@Value("${file.server}")
private String fileServer;
@Value("${file.location}")
private String fileLocation;
@Autowired(required = false)
HttpSession session;
/**
* 上传文件
*
* @param uploadFile
* @return
* @throws IOException
*/
public R upload(MultipartFile uploadFile) throws IOException {
String fileName = uploadFile.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf(".") - 1);
String uuid = UUID.randomUUID().toString().toUpperCase().replace("-", "");
fileName = uuid + suffix;
String parent = session.getServletContext().getRealPath(fileLocation);
File file = new File(parent, fileName);
if (!file.exists()) {
file.mkdirs();
}
uploadFile.transferTo(file);
return R.ok()
.put("url", fileServer + "/" + fileName)
.put("name", fileName);
}
}
5.3 FileController
image-20191028012950710.png
@Controller
@RequestMapping("/common/file")
public class FileController {
@Autowired
private FileService fileService;
/**
* 单文件上传
*
* @param uploadFile
* @return
*/
@PostMapping("/upload")
@ResponseBody
public R uplaod(@RequestParam("uploadFile") MultipartFile uploadFile) {
try {
return fileService.uplaod(uploadFile);
} catch (IOException e) {
e.printStackTrace();
return R.error(e.getMessage());
}
}
/**
* 多文件上传
*
* @param uploadFile
* @param session
* @return
*/
@PostMapping("/uploads")
@ResponseBody
public R uplaods(@RequestParam("uploadFile") MultipartFile[] uploadFile) {
List> data = new ArrayList<>();
for (MultipartFile f : uploadFile) {
try {
data.add(fileService.uplaod(f));
} catch (IOException e) {
e.printStackTrace();
data.add(R.error(e.getMessage()));
}
}
return R.ok().put("data", data);
}
}
5.4 获取Request和Session对象
在web.xml添加监听器
org.springframework.web.context.request.RequestContextListener
在普通类中获取
HttpServletRequest request = ((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest();
HttpSession session = request.getSession();
在Bean类中获取
@Controller
public class XxxController {
@Autowired
public HttpSession session;
@Autowired
public HttpServletRequest request;
...
}
@Service
public class XXXService {
@Autowired
public HttpSession session;
@Autowired
public HttpServletRequest request;
...
}