一、HCC 个人博客系统源码概述

HCC 个人博客源码是基于 vue 全家桶开发的前后端分离式个人博客系统。这种架构使得前端和后端的开发可以独立进行，提高了开发效率和系统的可维护性。

二、前台开发详情

前台使用 vue 全家桶（vue - cli、router、vuex）进行开发。vue - cli 提供了快速搭建项目的能力，router 用于实现页面的路由功能，vuex 则方便进行状态管理。使用 axios 库来请求 API，确保数据的交互稳定。为了让代码在页面上更加美观易读，采用了 highlight.js 插件实现代码高亮显示。同时，借助 layui 框架快速构建页面，利用其栅格系统达到响应式布局的效果，并且将所有模块组件化，样式模仿技术胖个人博客，使得页面更加美观和易用。

三、后台开发详情

后台使用 Laravel5.7 框架开发，该框架具有丰富的功能和良好的扩展性。其中，web 路由用于提供后台管理功能，api 路由则提供 API 接口。采用 X - admin 后台模板，为后台管理提供了一个美观且实用的界面。图片存储使用 AliyunOss 对象存储，提高了图片存储的稳定性和效率。通过 redis 中的订阅者模式监听 key 失效事件，能够有效删除 AJAX 上传文件后未提交表单造成的大量无主文件。在文章编辑方面，使用 editor.md 富文本编辑器，支持以 markdown 语法编辑文章，并自动生成 html 代码。

四、前台功能

1. 首页：展示置顶文章、通知消息和推荐广告，让用户快速了解博客的重要信息和推广内容。

2. 分类：用户可以根据文章分类查找所需文章，方便快捷地获取特定类型的信息。

3. 归档：按月份查看文章列表，帮助用户回顾不同时间段的文章内容。

4. 标签：根据标签查看对应文章列表，为用户提供了另一种查找文章的方式。

5. 关于：显示关于本站的信息，让用户了解博客的背景和宗旨。

6. 友链：显示本站的友链，方便用户访问其他相关网站。

五、后台功能

1. 文章管理：可以显示文章列表、搜索文章、添加文章、修改文章和删除文章，实现对文章的全面管理。

2. 推荐管理：对推荐列表进行显示、添加、修改和删除操作，优化推荐内容。

3. banner 图管理：对 banner 图进行显示、添加、修改和删除，提升页面的视觉效果。

4. 标签管理：对标签进行显示、添加、修改和删除，方便对文章标签进行分类和管理。

5. 分类管理：对文章分类进行显示、添加、修改和删除，调整文章的分类结构。

6. 通知管理：对通知消息进行显示、添加、修改和删除，及时更新博客的通知内容。

7. 关于管理：对关于本站的信息进行显示和修改，保证信息的准确性。

8. 友链管理：对友链进行显示和修改，维护博客的友链关系。

六、安装方法

开发环境要求为 php7.2 + Nginx1.4 + mysql5.6。具体安装步骤如下：

1. 使用 git clone 下载源码，获取项目的源代码。

2. 修改.env 配置文件，配置项目的相关参数。

3. 导入 sql 文件，初始化数据库。

4. 前台安装

• 在 home 目录中运行 npm install 依赖包（需要 node 环境），安装项目所需的前端依赖。

• 运行 npm run dev 编译项目，将项目代码进行编译。

• 通过 http://localhost:3000 访问前台页面。

5. 后台安装

• 在 admin 目录中运行 composer install 安装依赖包（需要安装 composer），安装项目所需的后端依赖。

• 运行 php artisan key:generate 发布应用秘钥，确保应用的安全性。

• 修改.env 配置，配置后端的相关参数。

• 运行 php artisan serve 命令，打开 web 服务器。

• 修改 Redis 配置文件，搜索”notify - keyspace - events” 并修改为 notify - keyspace - events =”Ex“，以实现监听 key 失效事件。

• 运行 nohup php artisan image:clear >> image - clear.log 2>&1 & 监听失效的 key 删除无主文件。

七、更新说明

该源码的更新内容包括添加响应式布局，使页面在不同设备上都能完美显示；添加 loding 层，提升用户体验；分页改为流加载模式，让数据加载更加流畅；更换富文本编辑器为 editorm.md，支持以 markdown 语法编辑文章；添加 gighlight.JS 代码高亮插件，使代码显示更加美观；在.env 中添加 aliyun key 配置，用于阿里云 oss 上传。