Msblog 项目就是完成一个完整的前后端分离的博客项目，包含服务端接口API，管理后台以及部署上线流程。这个项目主要介绍使用 SpringBoot2.6 开发一套完整的 RESTful 风格服务端接口 API 和使用 Vue2 开发管理后台。
-
前端线上展示地址：http://124.220.96.197:8091/#/home
- 登录页面
- 用户列表
- 用户新增
- 用户数据excel导出
- 角色列表
- 角色新增和编辑
- 菜单管理
- 博文管理-分类模块
- 博文管理-标签模块
- 设置模块
# 克隆项目代码
git clone [email protected]:programmer-xiaosa/msblog.git
msblog-springboot 后端代码
- msblog-springboot maven 父工程，统一管理依赖版本，聚合其他子模块
- ms-blog-pojo 子模块，存放实体类
- ms-blog-common 子模块，存放公共类，例如：工具类，常量类，异常类等
- ms-blog-server 子模块，存放管理后台和前端界面功能
├─ms-blog-common
│ └─src
│ └─main
│ └─java
│ └─com
│ └─arnasoft
│ ├─constant 常量类
│ ├─context 上下文
│ ├─enumeration 枚举
│ ├─exception 全局异常类
│ ├─json 序列化器和反序列化器
│ ├─properties 配置类
│ ├─result 返回值类
│ └─utils 工具类
├─ms-blog-pojo 实体类
│ └─src
│ └─main
│ └─java
│ └─com
│ └─arnasoft
│ ├─dto 数据传输对象
│ ├─entity 实体类
│ └─vo 将业务对象转换为 VO（值对象），用于展示给用户，实现前后端数据分离
└─ms-blog-server
└─src
├─main
│ ├─java
│ │ └─com
│ │ └─arnasoft
│ │ ├─annotation 自定义注解
│ │ ├─aspect 自定义切面，实现公共字段自动填充处理逻辑
│ │ ├─config 配置
│ │ │ └─sa_token Sa-Token 权限认证工具类
│ │ ├─controller 控制器
│ │ │ └─admin 后台控制模块
└─h5 微信H5网页控制模块（待开发）
└─App 移动端App控制模块（待开发）
└─miniProgram 小程序控制模块（待开发）
└─PC 前端网页控制模块（待开发）
│ │ ├─handler 全局异常处理器（处理项目中抛出的业务异常）
│ │ ├─interceptor 拦截器 (jwt令牌校验拦截器...)
│ │ ├─mapper mapper层（定义接口规则）
│ │ └─service 业务层
│ │ └─impl 实现类
│ └─resources 静态文件
│ ├─doc 数据库表文档
│ ├─mapper mapper层（定义数据库访问规则）
│ ├─SQL 数据库初始化文件
│ └─template 导入导出模板
└─test 测试
启动项目前一定要在创建好 msblog 数据库，如果你还没安装上数据库，请点击MySQL 下载，安装完请初始化 resources 目录下的 |——SQL 文件。以下是执行数据库命令：
# 登录数据库
mysql -uroot -p (回车然后输入你的本机数据库密码)
# 创建 msblog 数据库
CREATE DATABASE IF NOT EXISTS msblog DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
msblog-vue 前端工程
├─src
│ ├─api 接口
│ ├─assets 静态文件夹
│ ├─components 组件
│ ├─icons svg图标
│ ├─layout 公共组件
│ ├─router 路由模块
│ ├─store 状态管理
│ ├─styles 样式
│ ├─utils 工具
│ └─views
│ ├─blog 文章管理模块
│ │ ├─article 文章
│ │ ├─category 分类
│ │ ├─comments 评论（待开发）
│ │ └─tags 标签
│ ├─home 首页
│ ├─login 登录
│ ├─permission 权限模块
│ │ ├─admin 用户
│ │ ├─menus 菜单
│ │ └─roles 角色
│ └─setting 系统设置
└─tests 单元测试
以下是启动服务端项目的操作命令：
# 进入项目根目录
cd msblog-vue
# 安装依赖包
npm install
# 启动 msblog-vue 项目
npm run dev
API 端口默认是 9528，打开浏览器输入回车：http://localhost: 9528 可以看到浏览器返回数据
http://124.220.96.197:8090/doc.html
接口文档，在 postman 测试接口
Postman 下载地址：https://www.postman.com/downloads/
-
登录功能
-
用户列表
- 搜索用户
- 新增用户
- 编辑用户
- 删除用户
- 密码修改
- 用户导出（通过excel形式保存到本地）
-
角色列表
- 搜索角色
- 新增角色
- 编辑角色
- 删除角色（系统内置用户不可删）
-
菜单列表
- 新增菜单
- 编辑菜单
- 删除菜单
-
博文管理
- 分类管理
- 单条新增
- 编辑分类
- 批量导入（通过Excel模板批量新增）
- 删除分类
- 搜索分类
- 标签管理
- 单条新增
- 编辑标签
- 批量导入（通过Excel模板批量新增）
- 删除标签
- 搜索标签
- 文章管理
- 新增文章
- 编辑文章
- 删除文章
- 搜索文章
- 分类管理
-
博客设置
- 博客名称
- 作者名
- 文档库地址
- GitHub 主页访问地址
- Gitee 主页访问地址
- B站 主页访问地址
- 博客 LOGO
- 作者头像
- 介绍语
- PC端（展示博客）
- 小程序端（方向用户分享和使用）
- 微信H5网页（独立开发移动端，学习怎么获取用户code，access_token，用户信息，jssdk和微信支付，分享卡片制作）
- App（使用uniapp或者flutter开发多端APP，到时候根据实际情况选一个）
- 桌面端（采用Electron或者Flutter开发桌面端应用）
小伙伴们可以使用传统方式部署也可以使用 docker jenkins 自动化部署，推荐使用 docker
- 没有yarn环境，npm 可以吗？
答：可以的，建议使用 yarn，yarn 比 npm 速度快，主要是安装版本统一。
- npm 下载依赖包失败，卡住？
答：本项目采用的事vue-admin-template模板，建议使用 node版本是 v14.16.0，小伙伴们可以使用
n或者nvm来切换电脑上的node版本，这样可以使用多个版本的系统，不会冲突。
答：最近学习犬小哈老师的图文教程做出了一个完美的博客管理系统，如小伙伴们喜欢可以在issue留言，我给大家分享源码，在这里尊重犬小哈老师的开源项目我就不分享代码了 个人博客
MIT, by programmer-xiaosa
喜欢或对你有帮助的话，请你点一个星星 star 鼓励我，或者您有更好的建议和意见，请提出来告知我，可以留言 Issues。希望能够帮助到你学习！Thanks