专栏首页Android知识点总结SpringBoot-10-之初阶整合篇(下)

SpringBoot-10-之初阶整合篇(下)

先看效果:本小例=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 条评论
登录 后参与评论

相关文章

  • 建站四部曲之前端显示篇(React+上线)

    张风捷特烈
  • 理一理屏幕尺寸那些事

    其中configuration.fontScale是根据系统字号改变的,默认是1,所以会遇到dp和sp混用无影响的情况。但,一旦用户改变了系统字号,有一定的缩放...

    张风捷特烈
  • 理一理屏幕尺寸那些事

    其中configuration.fontScale是根据系统字号改变的,默认是1,所以会遇到dp和sp混用无影响的情况。但,一旦用户改变了系统字号,有一定的缩放...

    张风捷特烈
  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习
  • 前端基础-CSS定位

    注意:偏移值准确的理解是“距离什么位置有多少像素” 。 如 top:100px; 距离顶部为100像素 (向下走)

    cwl_java
  • 「css实用手册」CSS 垂直居中的七种方法,值得收藏

    我之所以整理这类专题的手册,就是CSS相关的内容实在太零散,同时又夹杂着相关的兼容问题。遇到问题时,我们有时过度依赖搜索引擎进行求证解决,解决完也没做认真的归纳...

    前端达人
  • 来来来,手把手教你做大白!

    这个东西也是经常被拿来玩的一个小东西,就是通过border-radius 去自己切一个图形。

    疯狂的技术宅
  • JavaScript 鼠标悬停图片,显示隐藏文本

    当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间

    Nian糕
  • 自定义按钮~自适应布局~常见bug

    超然
  • css实用手册」CSS 垂直居中的七种方法

    我之所以整理这类专题的手册,就是CSS相关的内容实在太零散,同时又夹杂着相关的兼容问题。遇到问题时,我们有时过度依赖搜索引擎进行求证解决,解决完也没做认真的归纳...

    前端迷

扫码关注云+社区

领取腾讯云代金券