先看效果：本小例=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) { //.....同前 } }转载于:https://www.cnblogs.com/toly-top/p/9781985.html
相关资源：JAVA上百实例源码以及开源项目