引入依赖
<!-- 引入 thymeleaf 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
配置
# thymeleaf相关配置参数 (ThymeleafAutoConfiguration)
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html # ;charset=<encoding> is added
spring.thymeleaf.cache=true # set to false for hot refresh
Java Code
- 通过`ModelAndView`的方式
@GetMapping("/index")
public ModelAndView index() {
ModelAndView view = new ModelAndView();
// 设置跳转的视图 默认映射到 src/main/resources/templates/{viewName}.html
view.setViewName("index");
// 设置属性
view.addObject("title", "我的第一个WEB页面");
view.addObject("desc", "欢迎进入battcn-web 系统");
Author author = new Author();
author.setAge(22);
author.setEmail("abcdefg@qq.com");
author.setName("AAA");
view.addObject("author", author);
return view;
}
- 通过`HttpServletRequest`的方式
@GetMapping("/index1")
public String index1(HttpServletRequest request) {
// TODO 与上面的写法不同，但是结果一致。
// 设置属性
request.setAttribute("title", "我的第一个WEB页面");
request.setAttribute("desc", "欢迎进入battcn-web 系统");
Author author = new Author();
author.setAge(22);
author.setEmail("abcdefg@qq.com");
author.setName("AAAAA");
request.setAttribute("author", author);
// 返回的 index 默认映射到 src/main/resources/templates/xxxx.html
return "index";
}
thymeleaf模板
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<!-- 可以看到 thymeleaf 是通过在标签里添加额外属性来绑定动态数据的 -->
<title th:text="${title}">Title</title>
<!-- 在/resources/static/js目录下创建一个hello.js 用如下语法依赖即可-->
<script type="text/javascript" th:src="@{/js/hello.js}"></script>
</head>
<body>
<h1 th:text="${desc}">Hello World</h1>
<h2>=====作者信息=====</h2>
<p th:text="${author?.name}"></p>
<p th:text="${author?.age}"></p>
<p th:text="${author?.email}"></p>
</body>
</html>
资料
文件上传
文件上传和下载是JAVA WEB中常见的一种操作，文件上传主要是将文件通过IO流传输到服务器的某一个特定的文件夹下；刚开始工作那会一个上传文件常常花费小半天的时间，繁琐的代码量以及XML配置让我是痛不欲生；值得庆幸的是有了Spring Boot短短的几句代码就能实现文件上传与本地写入操作….
属性配置
# 禁用 thymeleaf 缓存
spring.thymeleaf.cache=false
# 是否支持批量上传 (默认值 true)
spring.servlet.multipart.enabled=true
# 上传文件的临时目录 （一般情况下不用特意修改）
spring.servlet.multipart.location=
# 上传文件最大为 1M （默认值 1M 根据自身业务自行控制即可）
spring.servlet.multipart.max-file-size=1048576
# 上传请求最大为 10M（默认值10M 根据自身业务自行控制即可）
spring.servlet.multipart.max-request-size=10485760
# 文件大小阈值，当大于这个阈值时将写入到磁盘，否则存在内存中，（默认值0 一般情况下不用特意修改）
spring.servlet.multipart.file-size-threshold=0
# 判断是否要延迟解析文件（相当于懒加载，一般情况下不用特意修改）
spring.servlet.multipart.resolve-lazily=false
上传页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<h2>单一文件上传示例</h2>
<div>
<form method="POST" enctype="multipart/form-data" action="/uploads/upload1">
<p>
文件1：<input type="file" name="file"/>
<input type="submit" value="上传"/>
</p>
</form>
</div>
<hr/>
<h2>批量文件上传示例</h2>
<div>
<form method="POST" enctype="multipart/form-data"
action="/uploads/upload2">
<p>
文件1：<input type="file" name="file"/>
</p>
<p>
文件2：<input type="file" name="file"/>
</p>
<p>
<input type="submit" value="上传"/>
</p>
</form>
</div>
<hr/>
<h2>Base64文件上传</h2>
<div>
<form method="POST" action="/uploads/upload3">
<p>
BASE64编码：<textarea name="base64" rows="10" cols="80"></textarea>
<input type="submit" value="上传"/>
</p>
</form>
</div>
</body>
</html>
FileUploadController
其中@GetMapping的方法用来跳转index.html页面，而@PostMapping相关方法则是对应的 单文件上传、多文件上传、BASE64编码 三种处理方式。
@RequestParam("file") 此处的"file"对应的就是html 中 name="file" 的 input 标签，而将文件真正写入的还是借助的commons-io中的FileUtils.copyInputStreamToFile(inputStream,file)
@Controller
@RequestMapping("/uploads")
public class FileUploadController {
public static void main(String[] args) {
SpringApplication.run(Chapter16Application.class, args);
}
private static final Logger log = LoggerFactory.getLogger(Chapter16Application.class);
@GetMapping
public String index() {
return "index";
}
@PostMapping("/upload1")
@ResponseBody
public Map<String, String> upload1(@RequestParam("file") MultipartFile file) throws IOException {
log.info("[文件类型] - [{}]", file.getContentType());
log.info("[文件名称] - [{}]", file.getOriginalFilename());
log.info("[文件大小] - [{}]", file.getSize());
// TODO 将文件写入到指定目录（具体开发中有可能是将文件写入到云存储/或者指定目录通过 Nginx 进行 gzip 压缩和反向代理，此处只是为了演示故将地址写成本地电脑指定目录）
file.transferTo(new File("F:\\app\\chapter16\\" + file.getOriginalFilename()));
Map<String, String> result = new HashMap<>(16);
result.put("contentType", file.getContentType());
result.put("fileName", file.getOriginalFilename());
result.put("fileSize", file.getSize() + "");
return result;
}
@PostMapping("/upload2")
@ResponseBody
public List<Map<String, String>> upload2(@RequestParam("file") MultipartFile[] files) throws IOException {
if (files == null || files.length == 0) {
return null;
}
List<Map<String, String>> results = new ArrayList<>();
for (MultipartFile file : files) {
// TODO Spring Mvc 提供的写入方式
file.transferTo(new File("F:\\app\\chapter16\\" + file.getOriginalFilename()));
Map<String, String> map = new HashMap<>(16);
map.put("contentType", file.getContentType());
map.put("fileName", file.getOriginalFilename());
map.put("fileSize", file.getSize() + "");
results.add(map);
}
return results;
}
@PostMapping("/upload3")
@ResponseBody
public void upload2(String base64) throws IOException {
// TODO BASE64 方式的 格式和名字需要自己控制（如 png 图片编码后前缀就会是 data:image/png;base64,）
final File tempFile = new File("F:\\app\\chapter16\\test.jpg");
// TODO 防止有的传了 data:image/png;base64, 有的没传的情况
String[] d = base64.split("base64,");
final byte[] bytes = Base64Utils.decodeFromString(d.length > 1 ? d[1] : d[0]);
FileCopyUtils.copy(bytes, tempFile);
}
}