2020-01-10 从零开始用Spring Boot开发一个个
2020-01-10 本文已影响0人
NoelleMu
由于这几个页面都比较简单，功能也比较单一，所以就直接上效果图和代码了。
分类页和标签页
效果图
分类
标签
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">«</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">»</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>
©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>
©2020 江文(WenDev)
</li>
</ul>
</div>
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Content -->
</body>
</html>
总结
在编写了这么多页面之后，我发现了一些问题：
- 页面中重复的部分太多，如头部的
Header和尾部的Footer。如果使用的是Vue.js，那么这些部分可以提取成一个component。 - 每个页面都要重复引用一些东西（如Bootstrap的CSS和JS文件），而如果要修改，就会变得很麻烦。
- 页面对移动端对适配比较一般。
解决方法：
1和2可以靠Thymeleaf的组件功能解决，也就是th:replace和th:include。当然也可以靠Thymeleaf的模板、布局功能来解决。具体解决方法到后面要把页面改成动态的之后再决定。
至于3，可以在网页端开发完后给移动端单独开发一套专门适配移动端的页面。
