先看效果：本小例=SpringBoot+MySql+JAP+JQuery+Vue+animate.css+一个我
结果展示.gif
一、自定义的css样式：static/css/my.css
ol, ul {
list-style: none;
}
body {
background-image: url("http://localhost:8080/imgs/ubw.png");
}
#root {
width: 900px;
margin: 0 auto;
}
#root ul li {
background-color: #D6EAFD;
height: auto;
width: 164px;
border: 1px solid #aaa;
box-shadow: 4px 4px 6px rgba(0, 0, 0, .6);
float: left;
margin: 20px;
}
#root ul li img {
width: 100%;
height: 160px;
align-content: center;
}
.bottom {
height: 40px;
line-height: 40px;
text-align: center;
background: #eee;
}
.star {
font-size: 14px;
letter-spacing: -3px;
}
#add {
position: fixed;
width: 48px;
height: 48px;
background-image: url(a2.png);
}
p a {
display: block;
line-height: 15px;
padding-left: 10px;
text-decoration: none;
}
p span {
display: block;
line-height: 15px;
padding-left: 10px;
}
.top {
height: 40px;
}
.top a {
height: 20px;
width: 20px;
display: block;
float: right;
margin: 5px;
}
二、展示页html:注animate.css为一个库，自己下载引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloThymeleaf</title>
<link rel="stylesheet" href="../static/css/my.css">
<link rel="stylesheet" href="../static/css/animate.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="add"></div>
<div id="root">
<h1 class="animated bounceInDown">名剑表</h1>
<ul>
<li class="animated bounceIn" v-for="(val, key, index) in imgData" :key="index">
<a href=""><img :src="val.imgurl" width="300"></a>
<p><a :href="val.imgurl">{{val.name}}</a>
<div class="bottom">{{val.origin}}</div>
</li>
</ul>
</div>
<script>
$('#add').click(function () {
window.location.href = "/add_form";//跳转
});
$.getJSON('http://localhost:8080/swords/findall', function (data) {
console.log(data);
new Vue({
el: "#root",//与id是box的元素绑定
data: {//数据
imgData: data.data
}
});
}
);
</script>
</body>
</html>
三、控制器：由于没有修改太多就不贴了，和上篇基本一致，这里用来个重定向到展示url
@PostMapping("/submit_form")
public void greetingSubmit(@ModelAttribute Sword sword, HttpServletResponse response,
@RequestParam("file") MultipartFile file) {
//.....同前
try {
//.....同前
response.sendRedirect("/show");//重定向到展示页
} catch (IllegalStateException | IOException e) {
//.....同前
}
}