关于前端:基于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. 制作不易，一键三连再走吧，您的反对永远是我最大的能源！