2020-01-09 从零开始用Spring Boot开发一个个

作者: NoelleMu | 来源:发表于2020-01-09 20:43 被阅读0次

spring-boot
spring boot 连接Mysql
2020-01-09 从零开始用Spring Boot开发一个个
spring boot 开发环境搭建（Eclipse）
Spring Boot 介绍
spring boot hello
spring-boot自定义fastjson-starter
Spring Boot jar 瘦身攻略
Spring Boot 使用 Zuul 开发 API Gatew
spring boot & spring cloud 系列

需求明确

根据我们上一篇文章分析的需求，文章页需要有以下功能：

查看文章详情
评论文章
查看已有评论

除了展示文章详情，我们还需要做一个目录，以便用户可以方便地浏览较长的文章。

代码编写

按照惯例，先上效果图：

~~这玩意足足写了五个小时，写得我想吐，边写边怀疑人生……~~

大体布局沿用了首页的布局，只不过把文章列表换成了文章内容，右边的换成了目录。

因为目录需要在向下滚动一定距离后固定在窗口中，所以可以使用position: sticky属性来实现。使用这个属性需要设置top bottom left right中的任何一个才能生效，这里我设置了top，也就是向下滚动后目录固定的地方距离页面顶部的距离。

代码高亮使用了Google Code Prettify，但是我个人感觉太丑了，下次把这个代码高亮改掉。

至于动态生成目录以及目录的点击跳转，我使用了一个现有的框架，地址：https://www.cnblogs.com/qiudeqing/p/3229583.html，效果还是很不错的，只不过需要自己编辑一下。

HTML

这次的HTML因为内联了生成目录用的JavaScript，所以空前绝后地达到了473行之长。。。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 文章详情页 -->
    <meta charset="UTF-8">
    <title>Article</title>

    <!-- Start Bootstrap -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- End Bootstrap -->

    <!-- Google Code Prettify -->
    <link href="https://cdn.bootcss.com/prettify/r298/prettify.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/prettify/r298/prettify.js"></script>
    <!-- End Google Code Prettify -->

    <link rel="stylesheet" href="../static/css/wen.css">
    <link rel="stylesheet" href="../static/css/article.css">
</head>
<body onload="prettyPrint()">
<!-- Head -->
<div class="header">
    <h1>江文｜WenDev</h1>
    <h4>不想当切图仔的接口仔不是好架构师</h4>
</div>

<!-- Start Navigation Bar -->
<nav class="navbar navbar-default" style="position: absolute; top: 0; width: 100%">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="/">江文 | WenDev</a>
        </div>

        <!-- NavBar Body -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <!-- Drop Down Menu -->
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                       role="button" aria-haspopup="true" aria-expanded="false">
                        Article
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-list"
                                      style="margin: 5px"></span>
                                Category
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-tags"
                                      style="margin: 5px"></span>
                                Tags
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-folder-open"
                                      style="margin: 5px"></span>
                                Archive
                            </a>
                        </li>

                        <li role="separator" class="divider"></li>
                        <li>
                            <a href="#">
                                <span class="glyphicon glyphicon-link"
                                      style="margin: 5px"></span>
                                Friends
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- End Drop Down Menu -->

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="dropdown-toggle">About Me</a></li>
            </ul>

            <!-- NavBar Search -->
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <label for="nav-search"></label>
                    <input type="text" id="nav-search" class="form-control" placeholder="Search">
                </div>
                <a type="submit" class="btn btn-default">
                    Submit
                </a>
            </form>
            <!-- End NavBar Search -->
        </div>
        <!-- End NavBar Body -->
    </div>
</nav>
<!-- End Navigation Bar -->
<!-- End Head -->

<!-- Content -->
<div class="container-fluid">
    <!-- Margin-Left -->
    <div class="col-md-1" style="background-color: transparent; height: 200px;"></div>
    <!-- End Margin-Left -->

    <!-- Articles and Comments -->
    <div class="col-md-8">
        <div class="article">
            <div>
                <p class="title">2019-12-15 Spring Cloud微服务从入门到入土（2）使用Nacos进行服务注册与发现</p>
            </div>
            <div class="article-info">
                <span class="glyphicon glyphicon-calendar"></span>
                <span class="info-content">2020-1-1</span>
                <span class="glyphicon glyphicon-th-list"></span>
                <span class="info-content">Spring Cloud</span>
                <span class="glyphicon glyphicon-tag"></span>
                <span class="info-content">Java</span>
                <span class="glyphicon glyphicon-eye-open"></span>
                <span class="info-content">300</span>
            </div>
            <div>
                <h1>一级标题 h1</h1>
                <p>启动<code>Nacos</code>
                    官网：<a href="#">https://nacos.io/zh-cn/</a>
                    下载地址：<a href="#">https://github.com/alibaba/nacos/releases</a>
                    解压后使用以下命令启动：
                </p>
                <pre class="prettyprint Lang-bash">sh nacos/bin/startup.sh -m standalone</pre>
                <p>其中standalone表示以单机模式运行，具体可以参考文档。
                    启动后访问<code>127.0.0.1:8848</code>，默认用户名和密码都是nacos，登录后就可以看到Nacos控制台了。
                </p>
                <pre class="prettyprint Lang-java linenums">
                    package site.wendev.hello;

                    /**
                     * Doc Comment
                     * @author JiangWen
                     */
                    public class Hello {
                        public static void main(String[] args) {
                            System.out.println("Hello, World!");
                        }
                    }

                    // Line Comment

                    /*
                     * Block Comment
                     */
                </pre>
                <h2>二级标题 h2</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. A eligendi, eveniet magni nobis odio quam
                    temporibus vitae voluptatum. Dolores et explicabo magni minus modi, neque quae quidem quos tempore
                    temporibus?
                    Aliquid dicta dignissimos doloremque error illo molestias nesciunt nisi officiis repellendus ut?
                    Alias, aut deleniti doloribus dolorum ducimus, eos exercitationem expedita explicabo fugit harum
                    illo in laborum nam porro quia.
                    Autem cum dolores eius eligendi facere facilis id iure laudantium libero, maiores officiis
                    perferendis possimus provident quas recusandae reprehenderit saepe temporibus? Magnam nam nobis,
                    optio quia sequi ullam voluptate voluptatem!
                    Alias aut dolorum explicabo in nihil quae quas quidem? Ea libero magni repellat sapiente. Accusamus
                    aliquam dicta eveniet facere in, iste quaerat, quisquam ratione repellat rerum sed vero? Enim, vel.
                </p>
                <h3>三级标题 h3</h3>
                <p>
                    Amet, aspernatur ea eius minus nisi non nostrum obcaecati ratione rem vel! Adipisci, consequuntur
                    eaque earum eveniet fugit hic molestias nisi porro. Ad at corporis eligendi eveniet nesciunt placeat
                    quod.
                </p>
                <ol>
                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur dignissimos distinctio
                    </li>
                    <li>dolorum ducimus eos eveniet expedita, facere fugiat fugit ipsa iure nostrum odit pariatur
                        possimus
                    </li>
                    <li>provident reprehenderit similique, vero voluptatum?</li>
                </ol>
                <h4>四级标题 h4</h4>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolorem exercitationem illo in ipsum
                    perspiciatis temporibus voluptates? Consequuntur iusto nihil nostrum qui voluptatibus! Commodi
                    itaque natus quaerat quas quo sint.
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolorem exercitationem illo in ipsum
                    perspiciatis temporibus voluptates? Consequuntur iusto nihil nostrum qui voluptatibus! Commodi
                    itaque natus quaerat quas quo sint.
                </p>
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolorem exercitationem illo in
                        ipsum
                    </li>
                    <li>perspiciatis temporibus voluptates? Consequuntur iusto nihil nostrum qui voluptatibus! Commodi
                    </li>
                    <li>itaque natus quaerat quas quo sint.</li>
                </ul>
                <h1>h1h1h1h1</h1>
            </div>
        </div>

        <!-- Comments -->
        <div class="comments">
            <h1>Comments</h1>
            <div class="comment">
                <div class="comment-info">
                    <span class="glyphicon glyphicon-comment"></span>
                    <span class="info-content">Username</span>
                    <span class="glyphicon glyphicon-envelope"></span>
                    <span class="info-content">wendev1024@icloud.com</span>
                    <span class="glyphicon glyphicon-calendar"></span>
                    <span class="info-content">2020-1-1</span>
                    <span class="info-content"><a href="#">reply</a></span>
                    <span class="info-content"><a href="#">delete</a></span>
                </div>
                <div class="comment-content">
                    中文中文中文
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda corporis doloremque dolores
                    ducimus ea eius esse facilis harum laborum laudantium libero nihil, optio porro praesentium, quidem
                    ratione sunt suscipit ullam!
                </div>
            </div>
            <div class="sub-comments">
                <div class="sub-comment">
                    <div class="comment-info">
                        <span class="glyphicon glyphicon-comment"></span>
                        <span class="info-content">Username</span>
                        <span class="glyphicon glyphicon-envelope"></span>
                        <span class="info-content">wendev1024@icloud.com</span>
                        <span class="glyphicon glyphicon-calendar"></span>
                        <span class="info-content">2020-1-1</span>
                        <span class="info-content"><a href="#">reply</a></span>
                        <span class="info-content"><a href="#">delete</a></span>
                    </div>
                    <div class="sub-comment-content">
                        <strong>@Username</strong>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad beatae consequatur delectus
                        dignissimos dolore dolores esse est fugiat harum, itaque magnam maiores maxime, modi mollitia,
                        odit quam rerum sapiente unde!
                    </div>
                </div>
                <div class="sub-comment">
                    <div class="comment-info">
                        <span class="glyphicon glyphicon-comment"></span>
                        <span class="info-content">Username</span>
                        <span class="glyphicon glyphicon-envelope"></span>
                        <span class="info-content">wendev1024@icloud.com</span>
                        <span class="glyphicon glyphicon-calendar"></span>
                        <span class="info-content">2020-1-1</span>
                        <span class="info-content"><a href="#">reply</a></span>
                        <span class="info-content"><a href="#">delete</a></span>
                    </div>
                    <div class="sub-comment-content">
                        <strong>@Username</strong>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad beatae consequatur delectus
                        dignissimos dolore dolores esse est fugiat harum, itaque magnam maiores maxime, modi mollitia,
                        odit quam rerum sapiente unde!
                    </div>
                </div>
            </div>
            <div class="comment">
                <div class="comment-info">
                    <span class="glyphicon glyphicon-comment"></span>
                    <span class="info-content">Username</span>
                    <span class="glyphicon glyphicon-envelope"></span>
                    <span class="info-content">wendev1024@icloud.com</span>
                    <span class="glyphicon glyphicon-calendar"></span>
                    <span class="info-content">2020-1-1</span>
                    <span class="info-content"><a href="#">reply</a></span>
                    <span class="info-content"><a href="#">delete</a></span>
                </div>
                <div class="comment-content">
                    中文中文中文
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda corporis doloremque dolores
                    ducimus ea eius esse facilis harum laborum laudantium libero nihil, optio porro praesentium, quidem
                    ratione sunt suscipit ullam!
                </div>
            </div>
            <div class="comment">
                <div class="comment-info">
                    <span class="glyphicon glyphicon-comment"></span>
                    <span class="info-content">Username</span>
                    <span class="glyphicon glyphicon-envelope"></span>
                    <span class="info-content">wendev1024@icloud.com</span>
                    <span class="glyphicon glyphicon-calendar"></span>
                    <span class="info-content">2020-1-1</span>
                    <span class="info-content"><a href="#">reply</a></span>
                    <span class="info-content"><a href="#">delete</a></span>
                </div>
                <div class="comment-content">
                    中文中文中文
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda corporis doloremque dolores
                    ducimus ea eius esse facilis harum laborum laudantium libero nihil, optio porro praesentium, quidem
                    ratione sunt suscipit ullam!
                </div>
            </div>
        </div>
        <form>
            <div class="form-group">
                <h1>Post a comment</h1>
                <label for="comment"></label>
                <textarea id="comment" rows="10" class="comment-area form-control"></textarea>
            </div>
            <a type="submit" class="btn btn-default pull-right submit-btn">
                Submit
            </a>
        </form>
        <!-- End Comments -->
    </div>
    <!-- End Articles and Comments -->

    <!-- Content-Right -->
    <div class="col-md-2">
        <!-- Top Categories -->
        <div id="TOC">
            <h3 class="right-info">Category</h3>
            <div class="category-item-group" id="category-item-group"></div>
        </div>
        <!-- End top categories -->
    </div>
    <!-- End Content-Right -->

    <!-- Margin-Right -->
    <div class="col-md-1" style="background-color: transparent; height: 200px;"></div>
    <!-- End Margin-Right -->
</div>

<!-- Footer -->
<div class="footer" style="position: relative">
    <div class="container">
        <div class="row footer-top">
            <div class="col-sm-3 col-lg-3">
                <h4>Contact</h4>
                <p><strong>QQ</strong> 1686799346</p>
                <p><strong>WeChat</strong> CV10236516</p>
                <p><strong>E-mail</strong> wendev1024@icloud.com</p>
            </div>
            <div class="col-sm-3 col-lg-3">
                <h4>Friends</h4>
                <strong class="friends"><a href="#">JiangWen</a></strong>
                <strong class="friends"><a href="#">JiangWen</a></strong>
                <strong class="friends"><a href="#">JiangWen</a></strong>
                <strong class="friends"><a href="#">JiangWen</a></strong>
            </div>
            <div class="col-sm-6  col-lg-5 col-lg-offset-1">
                <div class="row about">
                    <div class="col-xs-3">
                        <h4>About</h4>
                        <ul class="list-unstyled">
                            <li>
                                <a href="#">About Me</a>
                            </li>
                            <li>
                                <a href="https://github.com/WenDev/WenDev-Web">Source Code</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-xs-3">
                        <h4>Other</h4>
                        <ul class="list-unstyled">
                            <li>
                                <a href="https://www.jianshu.com/u/dc63550214af">简书</a>
                            </li>
                            <li>
                                <a href="https://github.com/WenDev">GitHub</a>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <hr>
        <div class="row footer-bottom">
            <ul class="list-inline text-center">
                <li>Powered by
                    <a href="https://spring.io/projects/spring-boot">Spring Boot</a>
                    Design/Developed by
                    <a href="http://wendev.site">江文</a>
                    &copy;2020 江文(WenDev)
                </li>
            </ul>
        </div>
    </div>
    <!-- End Footer -->
</div>
<!-- End Content -->
<script>
    function toc() {
        // Find the TOC container element.
        // If there isn't one, create one at the start of the document.
        let toc = document.getElementById("TOC");
        let toc_group = document.getElementById("category-item-group");
        if (!toc) {
            toc = document.createElement("div");
            toc.id = "TOC";
            document.body.insertBefore(toc, document.body.firstChild);
        }
        // Find all section heading elements
        let headings;
        if (document.querySelectorAll) // Can we do it the easy way?
            headings = document.querySelectorAll(".article h1, .article h2, .article h3, " +
                ".article h4, .article h5, .article h6");
        else   // Otherwise, find the headings the hard way
            headings = findHeadings(document.body, []);

        // Recursively traverse the document body looking for headings
        function findHeadings(root, sects) {
            for (let c = root.firstChild; c != null; c = c.nextSibling) {
                if (c.nodeType !== 1) continue;
                if (c.tagName.length === 2 && c.tagName.charAt(0) === "H")
                    sects.push(c);
                else
                    findHeadings(c, sects);
            }
            return sects;
        }

        // Initialize an array that keeps track of section numbers.
        let sectionNumbers = [0, 0, 0, 0, 0, 0];
        // Now loop through the section header elements we found.
        for (let h = 0; h < headings.length; h++) {
            let heading = headings[h];
            // Skip the section heading if it is inside the TOC container.
            if (heading.parentNode === toc) continue;
            // Figure out what level heading it is.
            let level = parseInt(heading.tagName.charAt(1));
            if (isNaN(level) || level < 1 || level > 6) continue;
            // Increment the section number for this heading level
            // and reset all lower heading level numbers to zero.
            sectionNumbers[level - 1]++;
            for (let i = level; i < 6; i++) sectionNumbers[i] = 0;
            // Now combine section numbers for all heading levels
            // to produce a section number like 2.3.1.
            let sectionNumber = sectionNumbers.slice(0, level).join(".");
            // Add the section number to the section header title.
            // We place the number in a <span> to make it styleable.
            let span = document.createElement("span");
            span.className = "TOCSectNum";
            // span.innerHTML = sectionNumber + " ";
            heading.insertBefore(span, heading.firstChild);
            // Wrap the heading in a named anchor so we can link to it.
            let anchor = document.createElement("a");
            anchor.name = "TOC" + sectionNumber;
            anchor.id = "TOC" + sectionNumber;
            heading.parentNode.insertBefore(anchor, heading);
            anchor.appendChild(heading);
            // Now create a link to this section.
            let link = document.createElement("a");
            link.href = "#TOC" + sectionNumber; // Link destination
            link.innerHTML = heading.innerHTML; // Link text is same as heading
            // Place the link in a div that is styleable based on the level.
            let entry = document.createElement("li");
            entry.className = "category-item TOCEntry TOCLevel" + level;
            entry.appendChild(link);
            // And add the div to the TOC container.
            toc_group.appendChild(entry);
        }
    }

    window.onload = function () {
        toc();
        prettyPrint();
    }
</script>
</body>
</html>

CSS

div.article p.title {
    font-size: 5rem;
    line-height: 7rem;
    font-weight: 500;
    color: #333333;
}

div.article p {
    font-size: 1.9rem;
    line-height: 3rem;
}

div.article li {
    font-size: 1.9rem;
    line-height: 3rem;
}

textarea.comment-area {
    width: 95% !important;
    border: 1px solid #DDDDDD !important;
    border-radius: 5px;
    resize: none;
    padding: 10px;
}

.submit-btn, .submit-btn:hover {
    width: 20%;
    right: 5%;
    position: relative;
    background-color: darkred;
    border: none;
    color: white;
}

.submit-btn:active {
    color: white !important;
    background-color: #5b0000 !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

.article-info {
    margin: 15px 0 50px 0;
}

.comment-info {
    margin: 30px 0 20px 0;
}

.comment-content {
    width: 95%;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #DDDDDD;
}

div.comment span.info-content,
div.sub-comment span.info-content {
    margin: 0 20px 0 5px;
}

.sub-comments {
    color: #888888 !important;
    margin: 0 0 90px 0 !important;
}

.sub-comments strong {
    color: #333333;
}

.col-md-2 {
    top: 10%;
    position: sticky !important;
    position: -webkit-sticky !important;
}

div.article h1,
div.article h2,
div.article h3,
div.article h4 {
    margin: 50px 0 20px 0;
}

div.comments h1 {
    margin: 80px 0 30px 0;
}

div.form-group h1 {
    margin: 80px 0 10px 0;
}

div.sub-comment {
    left: 5%;
    width: 90%;
    position: relative;
}

.TOCLevel1 {
    padding-left: 5%;
}

.TOCLevel2 {
    padding-left: 10%;
}

.TOCLevel3 {
    padding-left: 15%;
}

.TOCLevel4 {
    padding-left: 20%;
}

.category-item {
    list-style: none;
    font-size: 1.7rem;
    line-height: 2.5rem;
}

.right-info {
    margin-bottom: 20px;
}

.category-item-group {
    padding: 5px 20px;
    border-left: 1px solid #DDDDDD;
}

#TOC {
    margin-top: 60%;
}

div.article h1 ,
div.article h2 ,
div.article h3 ,
div.article h4 {
    color: black;
}

div.article a#TOC1 ,
div.article a#TOC2 ,
div.article a#TOC3 ,
div.article a#TOC4 {
    text-decoration: none;
}

除了给本页面单独编写CSS之外，对全局的CSS样式也进行了一些修改：

/* 去除NavBar的背景颜色和边框颜色，达到极简主义的效果 */
.navbar-default {
    background: none !important;
    border: none !important;
}

body {
    font-family: varela round, Arial, sans-serif;
}

h4 {
    font-weight: bolder;
}

pre , pre li{
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 1.6rem !important;
    line-height: 2.5rem !important;
}

code {
    padding: 2px 4px;
    margin: 0 4px;
    font-size: 90%;
    color: #333333;
    background-color: #EEEEEE;
    border-radius: 4px;
}

.prettyprint {
    border: none !important;
    padding: 20px !important;
    margin: 20px 0 !important;
}

li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
    list-style-type: decimal !important;
}

.form-control:focus {
    border-color: #8b0000 !important;
    outline: 0;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.navbar-default .navbar-brand {
    color: #8b0000 !important;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #000000 !important;
    background-color: transparent;
}

a {
    color: darkred;
    text-decoration: none;
}

a:hover,
a:focus {
    color: black;
    text-decoration: underline;
}

.article {
    border-bottom: 1px solid #DDDDDD;
    padding: 10px 30px 50px 30px;
    margin: 10px 50px 10px 0;
}

.footer {
    margin-top: 100px;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: darkred;
    border-color: darkred;
}

.pagination > li > a,
.pagination > li > span {
    color: black;
}

.list-group {
    border-radius: 0;
    border-bottom: 1px solid #DDDDDD;
}

.list-group-item {
    border: none
}

li.list-group-item a {
    color: black;
}

span.label-default {
    font-size: 1.5rem;
    display: inline-block;
    margin: 5px;
    padding: 5px 6px;
}

.label-default {
    border: 1px solid #DDDDDD;
    background-color: transparent;
    color: #666666;
    font-weight: unset;
}

span.label-default strong {
    color: black;
}

div.article a.btn-default {
    border: none;
    color: white;
    background-color: darkred;
}

div.article a.btn-default:active {
    color: white;
    background-color: #5b0000;
}

div.article span.info-content {
    margin-right: 20px;
}

div.article span.glyphicon,
div.article span.info-content {
    color: #666666;
}

div.article h1 {
    line-height: 5rem;
}

div.article p {
    margin-top: 20px;
    color: #666666;
}

.article-info {
    margin-top: 30px;
}

.right-info {
    margin-top: 40px;
}

.friends {
    margin-right: 7px;
}

.header {
    background: #EEE url(../../static/img/34844544_p0.jpg) no-repeat 0 -60px;
    background-size: 100% auto;
    height: 500px;
    top: 0;
    width: 100%;
    display: flex;
    z-index: -100;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

nav.navbar-default a.dropdown-toggle {
    color: white !important;
}

div.header h1 {
    color: white;
    font-size: 6rem;
}

div.header h4 {
    color: white;
}

spring-boot
【从零开始学Spring Boot】
spring boot 连接Mysql
奇客谷 spring boot实战系列教程，学习从零开始搭建spring boot web项目框架 Spring ...
2020-01-09 从零开始用Spring Boot开发一个个
需求明确根据我们上一篇文章分析的需求，文章页需要有以下功能：查看文章详情评论文章查看已有评论除了展示文章...
spring boot 开发环境搭建（Eclipse）
奇客谷 spring boot实战系列教程，学习从零开始搭建spring boot web项目框架。 Spring...
Spring Boot 介绍
奇客谷 spring boot实战系列教程，学习从零开始搭建spring boot web项目框架。 Spring...
spring boot hello
奇客谷 spring boot实战系列教程，学习从零开始搭建spring boot web项目框架。 Spring...
spring-boot自定义fastjson-starter
1.前言我们用spring boot发现会有很多spring-boot-starter-xxx，在实际开发中可能...
Spring Boot jar 瘦身攻略
我们的项目是基于Spring Boot 开发的，所以打包时用的插件也是spring-boot-maven-plug...
Spring Boot 使用 Zuul 开发 API Gatew
Spring Boot 使用 Zuul 开发 API Gateway 《Spring Boot 实战开发》—— 基...
spring boot & spring cloud 系列
推荐博客纯洁的微笑-Spring Boot系列文章林祥纤-从零开始学Spring Boot Mkyong-Sp...