10--SpringBoot之初阶整合篇（下）

最新推荐文章于 2021-05-12 20:53:52 发布

张风捷特烈

最新推荐文章于 2021-05-12 20:53:52 发布

阅读量191

点赞数

分类专栏： SpringBoot SpringBoot 文章标签： SpringBoot

本文链接：https://blog.csdn.net/qq_30447263/article/details/81101813

版权

SpringBoot 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

SpringBoot

12 篇文章 0 订阅

订阅专栏

先看效果：本小例=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) {
            //.....同前
        }
    }

张风捷特烈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10--SpringBoot之初阶整合篇（下）

先看效果：本小例=SpringBoot+MySql+JAP+JQuery+Vue+animate.css+一个我一、自定义的css样式：static/css/my.cssol, ul { list-style: none;}body { background-image: url(&quot;http://localhost:8080/imgs/ubw....
复制链接

扫一扫