这篇将结合引擎模板thymeleaf，mysql数据库jap,简单的jQuery和vue。来构建一个图片上传和展示的小案例 其中maven配置，及配置文件配置这里就不废话了，详见： 04–SpringBoot之模板引擎–thymeleaf 07–SpringBoot之数据库JPA（CRUD）
本篇以实现功能为主，样式由下篇讲述。
1.图片访问接口文件夹：toly1994.com.toly01.config.WebConfig
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler(
"/imgs/**").addResourceLocations(
"file:F:/SpringBootFiles/Image/");
}
}
2.文件上传页：templates/submit.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>文件上传页
</title>
</head>
<!DOCTYPE HTML>
<body>
<h1>添加名剑
</h1>
<form th:action="@{/submit_form}" th:object="${sword}" method="post" enctype="multipart/form-data">
<p>名剑名称:
<input type="text" th:field="*{name}"/></p>
<p>名剑简介:
<br> <textarea rows="10" th:field="*{info}"></textarea></p>
<p>名剑来源:
<input type="text" th:field="*{origin}"/></p>
<p>名剑图片:
<input type="file" name="file"/></p>
<p><input type="submit" value="提交"/> <input type="reset" value="重置"/></p>
</form>
</body>
</html>
3.控制器:跳转+上传+插入数据库：
@Controller
public class ShowPhotoController {
@GetMapping(
"/show")
public String
swordList(Model model) {
model.addAttribute(
"sword",
new Sword());
return "SwordList";
}
@GetMapping(
"/add_form")
public String
greetingForm(Model model) {
model.addAttribute(
"sword",
new Sword());
return "submit";
}
@Autowired
private SwordRepository mSwordRepository;
@PostMapping(
"/submit_form")
public String
greetingSubmit(@ModelAttribute Sword sword,
@
RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "false";
}
String fileName = file.getOriginalFilename();
String path =
"F:/SpringBootFiles/Image";
File dest =
new File(path +
"/" + fileName);
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdir();
}
try {
file.transferTo(dest);
sword.setImgurl(
"http://localhost:8080/imgs/" + fileName);
sword.setCreate_time(
new Date());
sword.setModify_time(
new Date());
mSwordRepository.save(sword);
return "SwordList";
}
catch (IllegalStateException | IOException e) {
e.printStackTrace();
return "上传失败!";
}
}
}
4.显示界面:templates/SwordList.html
这里简单的使用了jquery和vue两位前端大佬。 简单介绍一下：$.getJSON('http://localhost:8080/swords/findall', function (data) 是说data是访问http://localhost:8080/swords/findall返回的数据， 这个接口详见:08–SpringBoot之统一化json输出与自定义异常捕获 imgData: data.data是说把data.data给imgData变量，还记得data.data就是所有sword对象的json化字符串 v-for="(val, key, index) in imgData" :key="index"就是遍历val就是单个对象。 val.imgurl 是图片访问的url,我把图片上传到指定文件夹，并将url放在数据库中， 即第3小点的：sword.setImgurl("http://localhost:8080/imgs/" + fileName);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloThymeleaf
</title>
<link rel="stylesheet" href="../static/css/my.css">
<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/js/vue2.5.16.min.js"></script>
</head>
<body>
<div id="root">
<h1>名剑表
</h1>
<ul>
<li v-for="(val, key, index) in imgData" :key="index">
<a href=""><val.imgurl width="300"></a>
</li>
</ul>
</div>
<script>
$.getJSON('http://localhost:8080/swords/findall', function (data) {
new Vue({
el: "#root",
data: {
imgData: data.data
}
});
}
);
</script>
</body>
</html>
访问：http://localhost:8080/add_form
插入两个来看看效果,这样我就可以通过数据库的改变决定前端页面的显示 发布到服务器上，也可以让任何人通过接口添加条目，就像给它演变的可能，让它”活了”。 数据便是它流动的血液、它的肉体。不然的话它只是一个静态的只能观看的玩偶而已。 下一篇将用css对页面装饰一下，给我打造的”生物”一件新衣。
转载于:https://www.cnblogs.com/toly-top/p/9781986.html
相关资源：JAVA上百实例源码以及开源项目
