HCC个人博客是一个基于vue全家桶开发的个人博客系统,实现了前后端分离的架构。

前台部分采用了vue全家桶(vue-cli、router、vuex)进行开发。使用axios库进行api请求,利用highlight.js插件实现代码的高亮显示。同时,采用layui框架快速构建页面,并通过栅格系统实现了响应式布局。所有模块均组件化,样式参考了技术胖个人博客的风格。

后台部分采用Laravel5.7框架进行开发,通过web路由提供后台管理功能,并通过api路由提供API接口。采用了X-admin后台模板。图片存储方面采用了AliyunOss对象存储,并通过redis的订阅者模式监听key失效事件,以删除由AJAX上传文件后未提交表单而造成的大量无主文件。 文章编辑方面采用了editor.md富文本编辑器,支持markdown语法编辑,并能自动生成html代码。

前台功能包括:

– 首页:置顶文章、通知消息、推荐广告
– 分类:根据分类查找文章
– 归档:按月份查看文章列表
– 标签:根据标签查看对应文章列表
– 关于:显示关于本站的信息
– 友链:显示本站的友链

后台功能包括:

– 文章管理:显示文章列表、搜索文章、添加文章、修改文章、删除文章
– 推荐管理:显示推荐列表、添加推荐、修改推荐、删除推荐
– banner图管理:显示、添加、修改、删除
– 标签管理:显示、添加、修改、删除
– 分类管理:显示、添加、修改、删除
– 通知管理:显示、添加、修改、删除
– 关于管理:显示、修改
– 友链管理:显示、修改

安装方法:

开发环境: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”
– 运行nohup php artisan image:clear >> image-clear.log 2>&1 & 监听失效的key并删除无主文件

更新说明:
– 添加响应式布局
– 添加loading层
– 将分页改为流加载模式
– 更换富文本编辑器为editor.md,支持markdown语法编辑文章
– 添加highlight.js代码高亮插件
– 在.env文件中添加aliyun key配置,用于阿里云oss上传。

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。