写在前面
自从服务器和域名备案完成后，我就一直在开发自己的个人网站，争取让它可以在年前上线。本来已经完成了一部分功能，但是这几天学了一些关于设计模式的知识、看了一些开源博客框架（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">«</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：
/* 去除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原有的样式进行了一番大刀阔斧的修改之后，终于满意了。
首页写好了，接下来就应该开始写其他的页面了。
网友评论