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

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

写在前面

自从服务器和域名备案完成后，我就一直在开发自己的个人网站，争取让它可以在年前上线。本来已经完成了一部分功能，但是这几天学了一些关于设计模式的知识、看了一些开源博客框架（WordPress和Typecho）的源码之后，我越来越觉得自己的功力不足，写出来的代码也是一团糟，数据库、包和服务之间的划分也没有特别清楚、明白。而最近那个微服务项目的开发也遇到了阻碍（不知道应该如何划分服务和功能，对各种功能的实现也没有很好的办法），于是决定重构一遍个人网站，顺便做一下记录。

需求分析

我们要开发一个系统，首先需要明确需求，这样才能更好地划分各个模块的功能。

作为一个个人网站系统，用户角色主要有我和访客两种。下面就从这两个角色出发来分析一下我们的需求：

访客

访客可以在网站注册
访客可以查看文章数量最多的10个标签
访客可以查看文章数量最多的5个分类
访客可以查看所有的标签
访客可以查看所有的分类
访客可以以分页的形式查看所有的文章
访客可以在登录后对文章进行评论
访客可以查看一篇文章的全部内容
访客可以以模糊查询的方式搜索文章
访客可以以时间分类的方式查看所有文章
访客可以查看我全部的友情链接
访客可以查看“关于我”页面

我

我可以发布新文章
我可以以Markdown的形式写文章、编辑文章
我可以对文章内容进行修改
我可以删除文章
我可以编辑文章内容
我可以给文章打标签
我可以给文章做分类
我可以查看所有已发布的文章
我可以根据标签、分类、模糊查询来搜索文章
我可以新增一个分类
我可以删除已有的分类
我可以修改一个分类
我可以根据分类查询文章
我可以新增一个标签
我可以删除一个标签
我可以修改一个标签
我可以根据标签查询文章
我可以添加友情链接
我可以修改友情链接
我可以删除友情链接
我可以查询友情链接

有了需求之后，就比较好规划出功能了。这里我用思维导图的形式来展示一下我们需要做的功能（图是用Xmind画的）：

接下来我们就可以开始开发了。

首页的编写

考虑到以前我一直是先开发后端，再开发前端，这种模式有一个比较大的缺点——不方便测试，也不好看到效果。所以我们这次先开发前端界面。

UI框架的选择

从开始做开发到现在，我也使用了很多框架，比如Element UI、Hui、LayUI、BootStrap、MDUI等。本来我使用的是Hui，但是最后我还是选择了Bootstrap来完成重构。理由嘛，当然是因为它比较成熟啦。版本选用的是3.3.7，因为4的文档还不是特别成熟。

目录结构

我们用WebStorm新建一个空工程。因为这个工程最后需要整合到Spring Boot中，所以我们按照Spring Boot规定的目录结构建立工程。这样虽然最后需要改动一些代码，但是目录结构就不需要再作出变动了。

正式开始！

先上效果：

~~忽然产生了一种自己的审美又回来了的错觉~~

背景图片是临时找的，到最后会换掉。

因为三栏布局会显得文章一栏非常窄，而一栏布局又会让过多的内容被挤到页脚上去，所以采用了两栏布局，将文章数量最多的五个分类和文章数量最多的十个标签放在了右侧，文章列表和分页放在了左侧。友情链接和一些信息（如联系方式等）放在了页脚。

由于不懂设计，也不会做原型设计，更不懂色彩搭配和用户体验，所以只能按照自己喜欢的样子来，因为我实在不喜欢类似于MDUI那种花里胡哨、阴影渐变一大片的，想让页面看起来干净点，所以采用了一点极简主义的思想，为此也是在自己的CSS里对Bootstrap进行了一番大刀阔斧的修改（见下面的代码）。

HTML代码，因为很多东西都是造出来充数的，所以很长（315行）。最后与Thymeleaf结合套成模板之后应该会短一些：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>WenDev</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 -->

    <link rel="stylesheet" href="../static/css/wen.css">
</head>
<body>
<!-- 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">
    <!-- Body -->
    <div class="container-fluid">
        <div class="container-fluid">
            <!-- Margin-Left -->
            <div class="col-md-1" style="background-color: transparent; height: 200px;"></div>
            <!-- End Margin-Left -->

            <!-- Articles -->
            <div class="col-md-8">
                <div class="article">
                    <div>
                        <h1>2019-12-15 Spring Cloud微服务从入门到入土（2）使用Nacos进行服务注册与发现</h1>
                    </div>
                    <div>
                        <p>启动Nacos
                            官网：https://nacos.io/zh-cn/
                            下载地址：https://github.com/alibaba/nacos/releases
                            解压后使用以下命令启动：
                            sh nacos/bin/startup.sh -m standalone
                            其中standalone表示以单机模式运行，具体可以参考文档。
                            启动后访问127.0.0.1:8848，默认用户名和密码都是nacos，登录后就可以看到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>
                        <a class="btn btn-default pull-right">Read More</a>
                    </div>
                </div>
            </div>
            <!-- End Articles -->

            <!-- Content-Right -->
            <div class="col-md-2">
                <!-- Top Categories -->
                <div>
                    <h4 class="right-info">Top 5 categories</h4>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <span class="glyphicon glyphicon-arrow-right"></span>
                            <a href="#">Cras justo odio</a>
                            <span class="badge">14</span>
                        </li>
                        <li class="list-group-item">
                            <span class="glyphicon glyphicon-arrow-right"></span>
                            <a href="#">Cras justo odio</a>
                            <span class="badge">14</span>
                        </li>
                        <li class="list-group-item">
                            <span class="glyphicon glyphicon-arrow-right"></span>
                            <a href="#">Cras justo odio</a>
                            <span class="badge">14</span>
                        </li>
                        <li class="list-group-item">
                            <span class="glyphicon glyphicon-arrow-right"></span>
                            <a href="#">Cras justo odio</a>
                            <span class="badge">14</span>
                        </li>
                        <li class="list-group-item">
                            <span class="glyphicon glyphicon-arrow-right"></span>
                            <a href="#">Cras justo odio</a>
                            <span class="badge">14</span>
                        </li>
                    </ul>
                </div>
                <!-- End top categories -->
                <!-- Top Tags -->
                <div>
                    <h4 class="right-info">Top 10 tags</h4>
                    <div>
                        <span class="label label-default">
                            <strong>Java</strong>
                            <span>10</span>
                        </span>
                        <span class="label label-default">
                            <strong>微服务</strong>
                            <span>10</span>
                        </span>
                        <span class="label label-default">
                            <strong>C语言</strong>
                            <span>10</span>
                        </span>
                        <span class="label label-default">
                            <strong>Java Web安全</strong>
                            <span>10</span>
                        </span>
                        <span class="label label-default">
                            <strong>CTF</strong>
                            <span>10</span>
                        </span>
                        <span class="label label-default">
                            <strong>Web后端</strong>
                            <span>10</span>
                        </span>
                        <span class="label label-default">
                            <strong>算法</strong>
                            <span>10</span>
                        </span>
                        <span class="label label-default">
                            <strong>Java</strong>
                            <span>10</span>
                        </span>
                        <span class="label label-default">
                            <strong>Java</strong>
                            <span>10</span>
                        </span>
                        <span class="label label-default">
                            <strong>Java</strong>
                            <span>10</span>
                        </span>
                    </div>
                </div>
                <!-- End Top Tags -->
            </div>
            <!-- End Content-Right -->

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

    <!-- Pagination -->
    <nav aria-label="Page navigation" class="col-md-offset-4 col-lg-offset-4col-xl-offset-4">
        <ul class="pagination">
            <li class="disabled">
                <span>
                    <span aria-hidden="true">&laquo;</span>
                </span>
            </li>
            <li class="active">
                <span>1</span>
            </li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- End Pagination -->

    <!-- 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>
    </div>
    <!-- End Footer -->
</div>
<!-- End Content -->
</body>
</html>

相应的CSS：

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

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

h4 {
    font-weight: bolder;
}

.form-control:focus {
    border-color: #8b0000 !important;
    outline: 0;
    -webkit-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: 50px;
}

.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;
}

对Bootstrap原有的样式进行了一番大刀阔斧的修改之后，终于满意了。

首页写好了，接下来就应该开始写其他的页面了。

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

写在前面

需求分析

访客

我

首页的编写

UI框架的选择

目录结构

正式开始！

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读