1 由来

博客在2021年的今天已经不是一个新鲜的词汇，如果用一句话概述，就是电子化信息留存，跟我们以前的日记、摘要、报纸有很多相似之处。其来来源已久，搭载着网络这片土壤，生根发芽，茁壮生长。从最早的文字到图片到音频再到视频，一直是博客的范畴。还有近期火起来的vblog,视频的盛行。作为一个自称是技术出身的人员，写博客是一个不错的习惯，制作一个个人的博客也一直以来是自己的一个愿想，现在成熟的博客平台为我们提供了个性化和易用的服务，简单到我们拿来即用。制作一个博客的成本和时间就显得有点不那么必要了。但是有的时候其实有没有必要、合不合算往往成我们想法由来的第一道墙，很多想法都因为这道墙而从梦中的执念回到现实。其实这种问题用一句话就可以劝勉自己：但行好事，莫问前程。

博客（英语：Blog）是一种在线日记型式的个人网站，借由张帖子章、图片或视频来记录生活、抒发情感或分享信息[1]。博客上的文章通常根据张贴时间，以倒序方式由新到旧排列。

许多博客作者专注评论特定的课题或新闻，其他则作为个人日记。一个典型的博客结合了文字、图像、其他博客或网站的超链接、及其它与主题相关的媒体。能够让读者以互动的方式留下意见，是许多博客的重要要素。大部分的博客内容以文字为主，也有一些博客专注艺术、摄影、视频、音乐、播客等各种主题。博客是社交媒体网络的一部分。

信息的碎片化和泛滥化对我们的专注力产生了很大的挑战。对博客的要求也从单纯的文字记载向多元化，多媒体进行了延伸，个人博客平台慢慢的变成了个人的信息控制台。其实更多的还是个人的心结，博客的制作是一个贯穿全过程的软件设计开发部署流程。可以作为对自己技术的一个总结和技术路上的一个记录旅程。
本篇以制作个人博客的过程记录。分为三个部分：

• 博客的设计
• 博客的编码
• 博客的部署

2 需求

用博客干什么？要解决的问题？
记录工作生活中信息

3 设计

设计包括功能设计、数据模型设计、版面设计。
设计工具说明

工具	设计
StarUML	功能设计-用例图
StarUML	功能设计-实体类图
StarUML	功能设计-实体关系图
Navicat	数据设计-库表设计
diagrams	版面设计-原型图设计

3.1 功能设计

3.1.1 用例图

系统最终是需要人来使用的，系统设计通过功能来满足使用人员的需要。功能设计中使用用例图表示系统的参与人员与系统功能之间的联系。
系统分为两个角色：用户可游客用户：登录系统、创建文章、编辑文章、删除文章、查看文章、发表评论、查看评论、退出游客：查看文章、发表评论确认了系统的参与人员和系统的功能模块，下面进一步到实现功能的实体类中。

3.1.2 实体类图

实体类图是系统中归纳出的实体与实体的关系，从系统中可以抽象出5个实体类：

实体类
Article	文章
Category	分类
Tag	标签
Comment	评论
User	用户

关系说明

关系	说明
User—Article	用户发布文章
User—Comment	用户发表评论
Article—Category	文章隶属于一个分类
Article—Tag	文章添加标签
Article—Comment	评论是针对文章

实体类图标识了各个实体类之间的宽泛的关系，接下来进一步明确设计实体之间的详细的关系，进入到实体关系图

3.1.3 实体关系图

实体关系图学名E-R图也称实体-联系图(Entity Relationship Diagram)，提供了表示实体类型、属性和联系的方法，用来描述现实世界的概念模型。 它是描述现实世界关系概念模型的有效方法。 是表示概念关系模型的一种方式。

关系说明

关联实体	被关联实体	关系	关联字段
用户	文章	1对多	user_id
用户	评论	1对多	user_id
文章	用户	1对1	user_id
文章	评论	1对多	comment_id
文章	分类	1对1	category_id
文章	标签	1对多	tag_id
评论	文章	1对1	comment_id
分类	文章	1对多	category_id
标签	文章	1对多	tag_id
评论	用户	1对1	user_id

说明：
关联实体用户对被关联实体文章：一个用户可以发布多篇文章。
关联实体文章对被关联实体用户：一篇文章对应一个用户。

3.2 数据设计

3.2.1 数据模型

1、文章数据模型

分类表

标签表

评论表

用户表

4 版面设计

页面设计又称版面设计，包括主页、详情页、列表页、
主页采用半屏式设计风格
超级头版风格最突出的特点就是博客首页的大banner，通常占据很大一块面积，甚至是全屏，比如现在的博客风格。关于这种类型的作品，在国外的一些博客主题设计中，是十分常见的，甚至一些商业化的展示网站都渐渐使用这种类型的设计。通常一个精心设计的头版，会瞬间吸引住浏览者的眼球。
关于超级头版的设计，还有很多变种。比如用全屏化的 Video 来展示，更能突出我们博客的特点。

4.1 首页版面

首页中包括导航栏、banner、列表页、翻页按钮、footer

项目	功能
导航栏	快速跳转页面
banner	美化页面，吸引眼球
列表页	展示文章
翻页按钮	翻页作用
footer	版权所属、工商局备案信息

4.2 详情页版面

详情页用来展示文章的详细信息，展示文章的标题、摘要、正文信息。
导航栏、footer跟首页复用。

以上为博客系统的设计部分，下一篇中进行博客的编码实现，在编码实现阶段涉及到开发环境的介绍、开发语言的选型、开发框架的选型、数据库选型、IDE的选型、以及软件架构模式选型。