MyBlog前端开发

MyBlog个人博客前端开发

作者：silence

编写日期：2020-06-20

分类：学习记录

项目演示地址：MyBlog演示地址

---

一、背景

因为这几天在尝试着搭建一个自己的个人博客平台，然后逛b站的时候就看到一个讲解使用SpringBoot进行开发
个人博客的视频，好奇就点进去看了看，尝试了一番，接下来我就来讲一下这个项目，加深一下印象。感兴趣的也可以点击 原视频链接去b站观看。

二、项目介绍

2.1 系统叙述

作为一个博客，首先我们要能够拥有自己的账号，而且，自己要能够在这个系统里面编写、管理、发布博客。然后，当有人对
我们的博客感兴趣的时候，人家要能够访问到我们的博客，并进行查看，又或者是留言。

2.2 功能提取

从2.1节的叙述中，我们可以发现，一个博客系统，至少拥有2个角色，一个是账号拥有者，或者说是管理员（当然，这里的
管理员只是针对自己这个账号的），还有一个就是访问者了。

2.2.1 管理员功能：

	- 使用用户名和密码登录，然后对博客进行管理
		* 发布新博客
		* 对博客进行分类
		* 添加标签
		* 修改博客
		* 删除博客
		* 根据标题、分类、标签查询博客

	- 管理博客分类
		* 新增
		* 修改
		* 删除
		* 根据分类名称进行查询
	
	- 管理博客标签
		* 新增
		* 修改
		* 删除
		* 根据名称查询标签

2.2.2 访问者功能：

	- 可以分页查看所有的博客
	- 可以快速查看博客数目最多的5个分类
	- 可以查看所有分类
	- 可以查看某个分类下的博客列表
	- 可以快速查看标记博客最多的6个标签
	- 可以查看所有标签
	- 可以查看某个标签下的博客列表
	- 可以根据时间线查看博客列表
	- 可以快速查看最新的推荐博客
	- 可以用关键字全局搜索博客
	- 可以查看单个博客内容
	- 可以对博客内容进行评论
	- 可以赞赏博客
	- 可以扫码关注

2.3 功能图一览

这里偷个懒，我就直接放上人家做好的功能思维导图了。

三、前端页面开发

3.1 开发工具

- HbuildX
- Semantic UI 

Semantic官网地址

3.2 页面规划

- 前台展示页面：首页、详情页、分类、标签、归档、关于我
- 后台管理页面：模板页

3.3 首页开发

首先，我们放上一张图片，展示下成果的大体样子：

当然，由于页面大小原因，这里只能截图这么多，感兴趣的也可以去
MyBlog演示地址看看。

反正大体上也就是三块：导航、中间内容、底部

而基本上所有的代码实现都是嵌套在

	<div class="ui container">

这样一个div里面。

3.3.1 导航

导航也可以分成3个部分，即左侧logo、菜单、右侧的搜索
这里嵌套了三层div来做菜单，而搜索又套了一个div来实现。

<!-- 导航 -->
<!-- 使用UI组件，使用inverted反转默认颜色，attached去圆角，segment表明这是一个片段，自定义上下内边距 -->
<nav class="ui inverted attached segment m-padding-tb-mini">
	<div class="ui container">
		<!-- 为了适应移动端，这里需要加一个属性stackable,表示可堆叠 -->
		<div class="ui inverted secondary stackable menu">
			<!-- 添加logo，导航菜单 -->
			<h2 class="ui teal header item">Blog</h2>
			<a href="index.html" class=""><i class="home icon"></i>首页</a>
			<a href="types.html" class=""><i class="idea icon"></i>分类</a>
			<a href="tags.html" class=""><i class="tags icon"></i>标签</a>
			<a href="archives.html" class=""><i class="clone icon"></i>归档</a>
			<a href="about" class="e"><i class="info icon"></i>关于我</a>
			
			<div class="right menu-item item m-mobile-hide">
				<div class="ui icon input">
					<input type="text" placeholder="Search..."/>
					<i class="search link icon"></i>
				</div>
			</div>
		</div>
	</div>
	<!-- 设置手机端响应时显示个菜单图标 -->
	<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
		<i class="sidebar icon"></i>
	</a>
</nav>
	

3.3.2 中间内容

中间内容从大的方面来说，可以分为左右2个部分，在下面的代码中，“文章内容部分”就是
左侧，而右侧卡片区域则是右侧。

就左侧区域来说，又可以分成头（博客、共**篇）、中（文章列表）、下（上一页、下一页）

中间的文章列表又可以分成左侧的文章标题、内容、右侧的图片和底部的一些信息，如头像、
作者、时间、浏览次数、分类等等。

右侧卡片主要有四项：分类、标签、最新推荐、扫码关注
其中，前三个的框架是一样的，都可以分成上下2个部分。

<!-- 中间内容 -->
<div class="m-container m-padding-tb-big" id="waypoint">
	<div class="ui container">
		<div class="ui stackable grid">
			<!-- 文章内容部分 -->
			<div class="eleven wide column">
				<!-- 头部：使用attached让上下连到一起 -->
				<div class="ui top attached segment"></div>
				
				<!-- 文章列表：使用attached让上下连到一起 -->
				<div class="ui attached segment"></div>
				
				<!-- 底部：上一页、下一页 -->
				<div class="ui bottom attached segment"></div>
			</div>
			
			<!-- 右侧卡片 -->
			<div class="five wide column">
				<!-- 分类卡片 -->
				<div class="ui segments"></div>
				
				<!-- 标签卡片 -->
				<div class="ui segments m-margin-top-large"></div>
				
				<!-- 最新推荐卡片 -->
				<div class="ui segments m-margin-top-large"></div>
				
				<!-- 二维码 -->
				<h4 class="ui horizontal divider header m-margin-top-large">扫码关注我</h4>
				<!-- 设置居中格式centered，宽度为11em -->
				<div class="ui centered card" style="width: 11em;">
					<img src="./static/images/MyBlog.png" alt="" class="ui rounded image" >
				</div>
			</div>
		</div>
	</div>
</div>

3.3.3 底部栏

底部栏可以分成上下2块，上侧又分成4格（注：一个grid总共有16column，可根据情况自行选择大小）

<!-- 底部栏 -->
<footer class="ui inverted vertical segment m-padding-tb-massive">
	<div class="ui center aligned container">
		<div class="ui inverted divided stackable grid">
			<div class="three wide column"></div>
			<div class="three wide column"></div>
			<div class="three wide column"></div>
			<div class="seven wide column">
		</div>
		<div class="ui inverted section divider"></div>
		<p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright 2020 silence Designed by silence</p>
	</div>
</div>

四、代码地址

前端代码地址