美文网首页
2020-01-10 从零开始用Spring Boot开发一个个

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

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

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

    分类页和标签页

    效果图

    分类

    标签

    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，可以在网页端开发完后给移动端单独开发一套专门适配移动端的页面。

    相关文章

      网友评论

          本文标题：2020-01-10 从零开始用Spring Boot开发一个个

          本文链接：https://www.haomeiwen.com/subject/xhauactx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|2020-01-10 从零开始用Spring Boot开发一个个|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！