乐趣区

关于前端:基于SpringBootVue实现的小白博客开源了牛逼

✨ 简介

小白博客是 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. 制作不易,一键三连再走吧,您的反对永远是我最大的能源!

退出移动版