2020-01-10 从零开始用Spring Boot开发一个个人网站（3）前端：分类、标签、登录与注册

由于这几个页面都比较简单，功能也比较单一，所以就直接上效果图和代码了。

分类页和标签页

效果图

分类

标签

HTML

分类页和标签页的HTML几乎完全一样（只有标题不一样），所以就不重复放了，只放分类页的。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Types</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">
    <link rel="stylesheet" href="../static/css/type.css">
</head>
<body>
<!-- Head -->
<div class="header">
    <h1>江文｜WenDev</h1>
    <h4>不想当切图仔的接口仔不是好架构师</h4>
</div>

<!-- Start Navigation Bar -->
<nav class="navbar navbar-default" style="position: fixed; 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>
                                Types
                            </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">
    <!-- Body -->
    <div class="container">
        <div class="col-md-12">
            <h1 class="page-title">Types</h1>
            <div class="label-area">
                <span class="label label-default label-active">
                    Lorem ipsum dolor sit amet
                    <span class="badge">14</span>
                </span>
                <span class="label label-default">
                    Java
                    <span class="badge">4353</span>
                </span>
                <span class="label label-default">
                    dolor sit amet
                    <span class="badge">140</span>
                </span>
                <span class="label label-default">
                    Lorem ipsum
                    <span class="badge">1</span>
                </span>
                <span class="label label-default">
                    dolor sit
                    <span class="badge">14</span>
                </span>
                <span class="label label-default">
                    Lorem ipsum dolor sit amet
                    <span class="badge">14</span>
                </span>
                <span class="label label-default">
                    Java
                    <span class="badge">4353</span>
                </span>
                <span class="label label-default">
                    dolor sit amet
                    <span class="badge">140</span>
                </span>
                <span class="label label-default">
                    Lorem ipsum
                    <span class="badge">1</span>
                </span>
                <span class="label label-default">
                    dolor sit
                    <span class="badge">14</span>
                </span>
                <span class="label label-default">
                    Lorem ipsum dolor sit amet
                    <span class="badge">14</span>
                </span>
                <span class="label label-default">
                    Java
                    <span class="badge">4353</span>
                </span>
                <span class="label label-default">
                    dolor sit amet
                    <span class="badge">140</span>
                </span>
                <span class="label label-default">
                    Lorem ipsum
                    <span class="badge">1</span>
                </span>
                <span class="label label-default">
                    dolor sit
                    <span class="badge">14</span>
                </span>
            </div>
            <!-- Articles -->
            <div class="col-md-12">
                <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 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 -->
        </div>
    </div>
    <!-- End Body -->

    <!-- Pagination -->
    <nav aria-label="Page navigation" class="col-md-offset-5 col-lg-offset-5 col-xl-offset-5">
        <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

分类页也是用的这个CSS

.label-active {
    font-size: 1.5rem;
    display: inline-block;
    margin: 5px;
    padding: 5px 6px;
    background-color: #333333;
    color: white;
    border: none;
}

.label-active .badge {
    background-color: white;
    color: #333333;
}

.col-md-12 h1.page-title {
    font-size: 5rem;
    margin: 30px 0 50px 0;
}

.label-area {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #DDDDDD;
}

登录、注册

登录

效果图

注册

效果图

HTML

因为两个页面的HTML几乎是完全一样的，所以也只放登录页面的了。另外，这两个页面没有自己的CSS文件。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Login</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: fixed; 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>
                                Types
                            </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">
    <!-- Body -->
    <div class="container">
        <div class="col-md-12">
            <form style="margin-bottom: 100px;">
                <h1>Login</h1>
                <div style="margin-bottom: 30px;">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input id="username" name="username" type="text" class="form-control"
                               placeholder="Username">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input id="password" name="password" type="password" class="form-control"
                               placeholder="Password">
                    </div>
                </div>
                <a type="submit" class="btn btn-default btn-lg">Submit</a>
                <div style="font-size: 1.8rem; margin-top: 30px;">
                    <a href="#">Click Here to Register</a>
                </div>
            </form>
        </div>
    </div>
    <!-- End Body -->

    <!-- 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>

总结

在编写了这么多页面之后，我发现了一些问题：

  1. 页面中重复的部分太多，如头部的Header和尾部的Footer。如果使用的是Vue.js，那么这些部分可以提取成一个component。
  2. 每个页面都要重复引用一些东西（如Bootstrap的CSS和JS文件），而如果要修改，就会变得很麻烦。
  3. 页面对移动端对适配比较一般。

解决方法：

1和2可以靠Thymeleaf的组件功能解决，也就是th:replace和th:include。当然也可以靠Thymeleaf的模板、布局功能来解决。具体解决方法到后面要把页面改成动态的之后再决定。

至于3，可以在网页端开发完后给移动端单独开发一套专门适配移动端的页面。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,172评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,346评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,788评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,299评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,409评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,467评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,476评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,262评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,699评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,994评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,167评论 1赞 343
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,827评论 4赞 337
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,499评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,149评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,387评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,028评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,055评论 2赞 352

推荐阅读更多精彩内容