✨ 简介
小白博客是 2022 年 12 月份疫情期间自己居家时设计开发的一款社区博客零碎,过后二心只想着开发一款本人的零碎,历时 3 个月左右,零零散散,总算是将小白博客开发进去,尽管有些性能尚未欠缺,但也是小白的心血,现将此零碎开源,供有须要的小伙伴交流学习。
✨ 性能
- 文章采纳了比拟火的 Markdown 编辑器。
- 系统集成了邮件发送性能。
- 零碎能够自定义友情链接。
- 零碎主页举荐文章 / 热门文章 (展现最近 n 天用户访问量最多的 10 篇文章)。
- 集成了百度 IP 定位 API,记录用户的登陆地址及 IP 归属地展现。
- 用户公布博客附带文件实现了目录文件构造的树形展现。
- 零碎注册新用户履行邮箱绑定制、单个邮箱注册账号不得超过 3 个。
- 零碎履行积分制,下载资源须要扣除相应积分,同样被下载资源的用户会失去肯定积分的处分。
- 用户能够通过每日签到获取收费积分,单日签到次数不超过 1 次。
- 集成了支付宝领取性能,零碎曾经实现了支付宝沙箱环境的对接。
- 零碎尽可能实现可配置,前台信息管理端可自定义配置。
- 零碎实现了对博客的点赞、珍藏、评论等性能,也可对本人心仪的博主进行打赏。
- 零碎实现了匿名预览性能,匿名账号领有零碎最高查看权限 (除 DMML 操作,该账号止咳查看、无奈进行增删改操作、不会对系统造成影响)
- 前后端通过 token 进行交互,token30 分钟内继续操作无感知续时 (只有用户在操作,永不过期)
✨ 运行环境及技术介绍
开发工具:Idea2020.3、WebStorm2020.3
数据库:MySQL5.7、Redis
构建工具:Maven3.6.0
前端运行环境:nodejs14.21.3
- 服务端采纳 SpringBoot 框架搭建,Mybatis—Plus 做为长久层框架,SpringSecurity 技术进行认证权限管制
- 数据库采纳 MySQL
- 前端采纳了 Vue2.x、Element-UI、axios、echarts 等技术、管理系统采纳 vue-element-admin
✨ 成绩展现
零碎截图简略放几个,全副放太多了
前台零碎
前台首页
登录页
零碎能够匿名拜访,包含浏览文章、给博主打赏等,匿名状态下进行下载文件、点赞、评论、珍藏等操作时,会自动弹出登录页面,如下图
留神:服务端做了环境配置,开发环境验证码不做验证,轻易输出即可
文章详情页
用户点击文章列表进入文章详情页,能够进行点赞、珍藏、打赏 (前提是博主已开明并上传打赏收款二维码)、下载 (前提是该文章附带文件材料)
举报文章
用户可对其余用户公布的文章进行举报,为避免歹意举报,单个用户每日下限举报 3 次
文章发布页
用户登录后可公布文章、如未编写结束,可临时保留草稿,下次可间接编辑
公布后由管理员审核并设置资源下载所需积分
留神:公布胜利后会有 <5 分钟的提早,首页缓存,影响不大,能够通过搜寻获取到文章
集体核心 -> 个人资料
用户可在此处查看并批改集体的用户信息
集体核心 - 个性化设置
用户可在此处进行积分余额是否展现、告诉、博文打赏的配置 (未配置不可被打赏)
管理员登录页
管理员首页
用户治理
权限:超级管理员能够设置单个用户的权限、包含用户的文件上传权限、发言评论权限、打赏性能权限、文章公布权限、申请友链权限、用户反馈权限、用户举报权限等
受权:超级管理员可对用户进行角色受权
禁用:禁止用户登陆零碎
重置:充值用户登录明码
删除:删除用户
定时工作治理
配置我的项目中用到的一些的定时工作,也能够查看定时工作的执行日志
对于本站
管理员可设置零碎的题目、Logo、零碎简介等配置项
首页治理
次要配置首页的链接、标签、技术分类、导航链接等配置
博客审核
如果博客带有材料文件,能够设置下载积分,如果没有,则不能设置
举报治理
解决用户的举报,有以下几种惩办措施
对于博客
1、举报不实、不做解决
2、删除该帖子
3、删除该帖子,禁止该用户公布文章权限
4、禁止用户上传文件权限
禁止权限可设置对应时长,单位分钟,能够设置是否邮件揭示用户
日志治理
查看管理员的操作日志
交易类型治理
配置前台用户通过购买获取积分的配置
其余性能不做演示、可查看演示视频
✨ 待优化我的项目
此零碎还有一些待优化的中央
- 用户注册时会验证邮箱的正确性,集体核心批改邮箱时也可退出邮箱验证。
- 用户登录时可退出邮箱登陆的形式。
- 用户在浏览文章时,可退出博主的集体核心页面展现性能。
- ……
✨ 部署教程
1、拉取我的项目
我应用 idea 拉取的我的项目,多了.idea 目录与 *.iml 文件
2、进入 sys-client 目录
别离进入两个目录,关上 cmd 执行如下命令,期待依赖下载完
npm install
3、连贯数据库
顺次执行 config 目录下的两个 SQL 文件,先执行 init.sql,在执行 cxs_currency_sys.sql
4、在 sys-controller 模块下找到 application-dev.yml 配置文件,批改以下几处中央,自行依据行号批改
1) 文件上传地位配置,批改为箭头指向的全门路
2) 批改数据库连贯信息
3) 配置邮件发送
邮箱自行申请配置,小白应用的是 163 邮箱
4) 批改 redis 连贯配置
5) 进入百度地图开放平台申请定位 AK 并配置:百度地图开放平台
6) 如需调试付款购买积分,自行配置支付宝沙箱环境,配置 app-id、私钥、公钥
无服务器本地可应用内网穿透技术测试
7) 在你的 hosts 文件增加一行配置
127.0.0.1 www.blob.com
5、启动 redis 服务端
6、启动服务端我的项目
7、启动前端我的项目
进入 sys-client\cxs-currency-sys-client 目录关上 cmd,执行如下命令
npm run serve
进入 sys-client\cxs-currency-sys-client-admin 目录关上 cmd,执行如下命令
npm run dev
前台零碎拜访:http://www.blob.com:3000/index
管理系统拜访:http://www.blob.com:9527/
留神要应用域名拜访,如应用 IP 或者 localhost 会有图片防盗链问题
前台页面
管理系统
功败垂成
8、如需部署到服务器、请批改 application-prod.yml 配置
除 7 之外,批改一下日志的存储地位,可将级别批改为 error
如需部署到服务器,还须要批改服务端我的项目的域名,申请完域名后,批改如下地位
此处域名有如下作用:
1、图片资源为服务端治理,做防盗链管制,小伙伴们能够自行应用 Nginx 搭建文件服务器调整
2、获取用户 token 程序是先从 cookie,再从 header 获取
✨ 提供账号
超级管理员:admin/123456
用户:user/1234567890!
✨ 源码获取
获取形式,Q 群:167895940,找群治理获取
✨ 账号地址及其他阐明
1. 地址阐明
见部署教程 7
2. 账号阐明
见提供账号
3. 以上零碎源码通过小白整顿与调试,确保能失常运行, 获取形式,Q 群:167895940,找群治理获取
4. 制作不易,一键三连再走吧,您的反对永远是我最大的能源!