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>

四、代码地址

前端代码地址

MyBlog前端开发相关推荐

MyBlog前端开发2
MyBlog个人博客前端开发(二) 作者:silence 编写日期:2020-06-20 分类:学习记录项目演示地址:MyBlog演示地址一.前言昨天我们介绍了个人博客开发的背景.系统叙述.功能 ...
day44前端开发1之html基础
web前端开发1 一.前端三剑客之html 1.为标记语言,是非编程语言 2.自身不具备逻辑,遇到负责重复操作只能全部手写(Ctrl+C > V) 3.组成:标签, 指令, 实体标签: ...
关于前端开发的相关资料及例子
1:前端HTML-CSS规范(http://www.cnblogs.com/whitewolf/p/4491707.html): 2:HTML实例(http://www.w3school.com.cn ...
gulp 配置自动化前端开发
有的人说,grunt已经廉颇老矣,尚能饭否.gulp已经成为了未来的趋势,或许将撼动grunt的地位. 那么就得看看gulp到底优势在哪里,在我最近的使用中发现,我的到了一个结论:"grun ...
读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
《初级前端开发人员经常容易忽视几个细节问题汇总》
<初级前端开发人员经常容易忽视几个细节问题汇总> 1.使用变量.toString()的时候记得对变量进行判空 2.使用字符串.indexOf()的时候记得对字符串变量进行判断是否为nu ...
前端开发中的性能那点事
前端开发中的性能那点事(一)巧用xdebug 前言: 在我们平时的php开发中,一个大的项目经过长时间的积累以后你会发现性能越来越慢,而性能到底消耗在了什么地方,常常是一个令人头疼的问题,funct ...
前端开发学习常用网站网址及介绍（都是免费的）
在开发的时候,想记住所有的单词基本是不可能的,所以就需要进入文档,只要理清需求能做出来,就很不差了!! 扫码加博主微信 1.百度,俗称度娘,有不懂的就问百度,有问必答,跳转 2.百度翻译,不懂的单词, ...
前端开发神器之ngrok
ngrok能做什么,为什么是前端开发神器? 内网穿透,映射本地开发环境到公网,模拟多终端线上环境. 结合一个很简单的PWA demo,举个简单的例子 1.克隆demo到本地 git clone htt ...

MyBlog前端开发