基于Dockerfile的博客管理系统的容器化部署

目录

1. 任务描述 3
   1.1课题的基本内容 3
   1.2 项目整体技术架构 3
   1.3主要技术栈： 3
   1.4 模块划分 4
   1.5 容器集群化部署的任务内容 5
   1.6 项目容器化部署的目的 6
2. 总体结构 7
   2.1 容器角色和功能 7
   2.2 容器之间的关联关系 8
   2.3 数据流动示例 8
   3.详细设计 9
   3.1 设计思路 9
   3.2Java后端接口开发 11
   1、前言 11
   2、新建Springboot项目 12
   3、整合mybatis plus 13
   4、整合shiro+jwt，并会话共享 18
   5、异常处理 29
   6、实体校验 31
   7、跨域问题 32
   8、登录接口开发 33
   9、博客接口开发 35
   3.3前端代码展示与部分后端代码展示 37
   3.3.1.前言 37
   3.3.2.项目演示 37
   3.3.4 源码展示 39
   4.实现与测试 42
   4.1构建镜像 42
   4.2启动服务 43
   4.2.1启动docker-compose 43
   4.2.2 启动vue容器及其其他服务 43
   4.3 成功进入前端页面 44
   4.4 Mysql数据库连接成功 45
   4.5文章管理界面 46
   5.结束语 46
   6.参考文献 47

1.任务描述
1.1课题的基本内容
一个基于SpringBoot + Vue开发的前后端分离博客项目，后端涵盖新建项目、整合 Mybatis Plus、Shiro + JWT 等技术，还包括异常处理、实体校验等。前端涉及环境准备、组件安装、页面路由、登录页面等开发，如安装 element-ui、axios 等，还实现了博客列表、编辑、详情等页面及路由权限拦截。

1.2 项目整体技术架构
该博客管理系统的技术架构遵循现代分布式系统设计原则，采用了前后端分离的开发模式。前端使用 Vue.js 来开发单页面应用，后端则使用 Spring Boot 框架，结合 Mybatis Plus 和其他技术栈实现完整的博客管理系统。
整体架构如下图所示：
[前端 Vue.js (页面展示, 路由控制)] ←→ [后端 Spring Boot (API接口, 业务逻辑)]
↓
[数据库 MySQL]
↓
[缓存 Redis]

1.3主要技术栈：
前端：
Vue.js：负责构建博客的用户界面，使用 Vue Router 管理页面路由，Vuex 进行状态管理。
Element UI：作为 Vue.js 的 UI 组件库，提供丰富的 UI 组件，方便开发快速构建前端界面。
Axios：用于前端和后端之间的 HTTP 通信，执行数据请求。
后端：
Spring Boot：作为主框架，快速搭建 Web 应用。
Mybatis Plus：基于 Mybatis 的增强工具，简化了数据库操作，减少了开发人员的工作量。
Shiro + JWT：使用 Shiro 实现安全框架进行身份认证，结合 JWT 进行用户的 Token 验证。
Redis：用于缓存、会话存储等操作，提升系统的性能。
Hibernate Validator：实现后台的实体校验，确保数据输入的有效性。
Lombok：简化 Java 类的编写，减少 boilerplate 代码。
1.4 模块划分
本项目可以划分为以下几个模块：
1.前端模块：
首页模块：展示博客文章列表，分页展示。
博客详情模块：查看单篇博客的详情内容。
博客编辑模块：管理员可以编辑、删除博客文章。
用户模块：用户注册、登录、权限控制等。
路由管理模块：管理前端页面的路由，处理权限拦截。
2.后端模块：
用户管理模块：包括用户的注册、登录、权限校验、JWT 生成和解析。
博客管理模块：包括博客的创建、更新、删除、查询等操作。
权限模块：通过 Shiro 实现角色和权限控制，配合 JWT 实现 Token 身份认证。
数据缓存模块：使用 Redis 缓存博客数据、用户信息等，减少数据库访问频率。
异常处理模块：全局异常处理类，返回统一格式的错误信息。
输入校验模块：使用 Hibernate Validator 实现用户输入的校验，确保数据合法。
3.数据库模块：
MySQL：存储博客文章数据、用户信息、角色权限等。
Redis：缓存热点数据，如用户会话、博客列表等，提高系统响应速度。
1.5 容器集群化部署的任务内容
容器集群化部署任务内容主要涉及以下几个方面：
1.Docker 容器化部署：
通过 Dockerfile 构建前后端服务的镜像。
配置 Docker Compose 实现多容器管理（前端、后端、数据库等）。
构建和部署到 Docker 容器中，实现容器化部署。
2.容器集群化管理：
使用 Docker Swarm 或 Kubernetes 来管理容器集群，实现负载均衡、服务发现等。
配置 Nginx 作为反向代理，将请求路由到后端 API。
配置 Redis 和 MySQL 为容器服务，实现高可用部署。
3.日志和监控：
配置容器内日志输出，结合 ELK（Elasticsearch, Logstash, Kibana）或 Prometheus + Grafana 实现日志管理和监控。
配置容器的健康检查，确保系统的高可用性。
4.CI/CD 集成：
使用 Jenkins 或 GitLab CI 实现自动化构建和部署，确保每次代码提交后可以自动构建 Docker 镜像并推送到容器集群中。
1.6 项目容器化部署的目的
容器化部署的目的包括以下几点：
1.简化部署过程：
通过 Docker 容器将应用打包，减少部署时环境配置的差异问题。
在任何环境中（本地开发、测试、生产）都能保持一致的运行效果。
2.提高资源利用率：
使用 Docker 容器技术，多个容器可以共享同一台物理主机的资源，从而提高资源的利用率。
容器能够在不同环境中快速启动，节省时间和资源。
3.易于扩展：
容器化的应用可以方便地进行水平扩展，容器集群能够应对更高的流量需求。
通过集群管理工具（如 Kubernetes）实现自动伸缩，满足业务需求。
4.提升系统的可维护性和高可用性：
容器化部署使得每个模块都在独立的容器中运行，提高了系统的稳定性。
容器可以在失败时快速重启，保证系统的高可用性。
2. 总体结构
本项目的总体结构分为前端、后端、数据库、缓存和容器化部署几个部分。具体来说：
前端 Vue.js 应用：展示用户界面，接收用户请求，发送 API 请求至后端。
后端 Spring Boot 应用：处理前端请求，执行业务逻辑，访问数据库，返回数据。
数据库 MySQL：存储用户、博客、评论等数据。
缓存 Redis：缓存热点数据，减少数据库压力。
容器化部署：前端、后端、数据库等都被部署在 Docker 容器中，Docker Compose 管理这些服务的启动、停止和扩展。
2.1 容器角色和功能
1.前端容器：
负责启动 Vue.js 应用，提供浏览器访问接口。
与后端容器进行通信，显示动态内容。
2.后端容器：
启动 Spring Boot 应用，提供 RESTful API 接口。
处理用户请求，进行权限验证，访问数据库。
3.数据库容器：
存储 MySQL 数据库，提供数据持久化。
数据库容器与后端容器之间通过网络连接，进行数据存储和读取操作。
4.缓存容器：
启动 Redis 容器，提供缓存服务。
后端容器使用 Redis 存储会话数据、博客列表等高频数据。
2.2 容器之间的关联关系
前端容器与后端容器：前端通过 HTTP 请求与后端容器进行通信。前端容器通过配置 Docker 网络访问后端 API，后端容器暴露端口供前端调用。
后端容器与数据库容器：后端通过 JDBC 连接数据库容器。数据库容器内部运行 MySQL 服务，后端通过容器内网络访问数据库。
后端容器与缓存容器：后端容器通过 Redis 客户端（如 Jedis 或 Lettuce）与 Redis 容器进行通信，缓存热点数据，减少数据库访问。
容器网络：所有容器都运行在同一个 Docker 网络内，确保容器之间可以通过服务名称进行互相访问。Docker Compose 会根据服务名称自动管理容器之间的网络连接。
2.3 数据流动示例
在本系统中，数据流动贯穿前端、后端、数据库和缓存之间，以下是一个具体的数据流动示例：假设用户访问博客列表页面，系统的处理过程如下：
1.前端请求：
1.用户访问博客列表页面，前端 Vue.js 应用通过 Axios 向后端 API 发起 GET 请求，获取博客文章列表。
2.请求路径类似：GET /api/blogs/list
2.后端接收请求：
1.Spring Boot 后端接收到请求后，首先会通过 Shiro + JWT 进行用户身份验证，确保请求合法。
2.如果验证通过，后端会查询缓存 Redis 中是否已存有博客列表数据（用于优化性能，减少数据库查询次数）。
3.如果缓存中有数据，则直接从 Redis 中获取，返回给前端。
3.数据库查询：
1.如果 Redis 中没有缓存数据，后端会通过 Mybatis Plus 访问 MySQL 数据库，查询所有博客文章列表。
2.数据库返回包含博客信息的列表。
4.缓存更新：
1.后端会将从数据库中查询到的数据缓存到 Redis 中，以便下次访问时直接从缓存获取，减少数据库负载。
5.响应前端：
1.后端将博客列表数据返回给前端，格式为 JSON。
2.前端 Vue.js 应用接收到数据后，通过 Vuex 或组件直接渲染博客列表页面。
6.前端显示：
1.用户可以在博客列表页面上查看所有博客文章的标题、摘要、发布时间等基本信息。
2.用户可以点击某篇文章的标题，进入博客详情页面。

3.详细设计
3.1 设计思路
本项目的设计思路是基于前后端分离、微服务架构和容器化部署，确保系统的灵活性、可扩展性和高可用性。详细设计考虑到系统的各个功能模块，优化了数据流动、接口设计和权限管理等方面。
以下是主要模块的设计思路：
1.前端设计：
1.前端使用 Vue.js 构建，确保用户交互流畅。
2.使用 Vue Router 管理路由，支持多页面导航，确保不同功能页面的独立性。
3.在路由控制中，前端实现了权限拦截，确保只有登录用户能访问某些页面。
2.后端设计：
1.后端采用 Spring Boot 架构，通过 RESTful API 提供服务。所有请求返回 JSON 格式的数据，方便前端处理。
2.权限控制：通过 Shiro 实现身份认证和权限管理，结合 JWT 生成 Token，保证用户的安全性。
3.异常处理：使用全局异常处理，统一返回错误信息，保证 API 的健壮性。
4.数据校验：后端使用 Hibernate Validator 进行数据校验，确保数据合法。
5.Mybatis Plus：通过 Mybatis Plus 实现对数据库的高效操作，减少 SQL 编写量。
3.数据库设计：
1.数据库采用 MySQL 存储博客文章、用户信息、评论等数据。每个表都设计了必要的索引，提高查询效率。
2.用户表设计了角色字段，支持不同角色的权限区分（如管理员、普通用户等）。
4.缓存设计：
1.使用 Redis 进行数据缓存，缓存博客列表、热门文章、用户会话等数据，提高访问速度，减少数据库压力。
5.容器化设计：
1.使用 Docker 进行项目容器化，前端、后端、数据库、