这篇将结合引擎模板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) {
//在F:/SpringBootFiles/Image/下如果有一张 Excalibar.jpg的图片，那么：
//【1】访问：http://localhost:8080/imgs/Excalibar.jpg 可以访问到
//【2】html 中 <img src="imgs/Excalibar.jpg">
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 //注意由于是RequestBody 所以这里将@RestController拆分出来了
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",//与id是box的元素绑定
data: {//数据
imgData: data.data
}
});
}
);
</script>
</body>
</html>
- 访问：http://localhost:8080/add_form
插入Excalibur
插入两个来看看效果,这样我就可以通过数据库的改变决定前端页面的显示
发布到服务器上，也可以让任何人通过接口添加条目，就像给它演变的可能，让它"活了"。
数据便是它流动的血液、它的肉体。不然的话它只是一个静态的只能观看的玩偶而已。
下一篇将用css对页面装饰一下，给我打造的"生物"一件新衣。
