本篇文章是 Spring Boot 实践之十三 9 Spring Boot综合项目实战——个人
博客系统管理模块 的续篇，本次将介绍如何实现个人
博客系统的拓展模块。
在实际开发中，我们常常需要对系统进行扩展，添加一些新的功能模块。为了不影响原有代码的结构和功能，我们可以将这些新功能模块独立成为一个子模块，然后通过配置文件等方式将其与原有系统进行整合。
本文将以一个个人
博客系统为例，介绍如何实现
博客的拓展模块，具体包括以下几个方面：
1. 拓展模块的设计和实现
2. 拓展模块的集成和配置
3. 拓展模块的使用示例
## 1. 拓展模块的设计和实现
在本例中，我们将实现一个
博客系统的拓展模块，该模块主要提供以下两个功能：
1. 统计
博客文章的阅读量并显示
2. 在
博客页面添加底部的版权声明
### 1.1 统计
博客文章的阅读量并显示
首先，我们需要在数据库中添加一个字段来存储
博客文章的阅读量。在本例中，我们在 `blog` 表中添加 `read_count` 字段来存储阅读量。
```sql
ALTER TABLE `blog`
ADD COLUMN `read_count` INT NOT NULL DEFAULT 0 COMMENT '阅读量' AFTER `update_time`;
```
接下来，在
博客文章页面中添加一个阅读量的显示。我们可以在
博客文章详情页面的右侧添加一个阅读量的区域，显示该文章的阅读量。具体的实现方式为：
1. 在
博客文章详情页面中添加一个阅读量的区域。
2. 在加载
博客文章详情页面时，通过 AJAX 请求统计该文章的阅读量，并更新阅读量区域的显示。
具体的代码实现如下：
在
博客文章详情页面中添加一个阅读量的区域：
```html
<div class="blog-sidebar-item">
<div class="blog-sidebar-title">阅读量</div>
<div class="blog-sidebar-content">
<span id="read-count">0</span>
</div>
</div>
```
在加载
博客文章详情页面时，通过 AJAX 请求统计该文章的阅读量，并更新阅读量区域的显示。具体的实现方式为：
```javascript
$(function () {
// 统计阅读量
var blogId = $("#blogId").val();
$.ajax({
url: "/blog/read/" + blogId,
type: "POST",
success: function (result) {
if (result && result.success) {
$("#read-count").text(result.data);
} else {
$("#read-count").text(0);
}
}
});
});
```
在服务器端，我们需要实现一个接口来统计
博客文章的阅读量，并将其保存到数据库中。具体的实现方式为：
```java
@RestController
@RequestMapping("/blog")
public class BlogController {
...
/**
* 统计
博客文章的阅读量
*
* @param blogId
博客文章ID
* @return 统计结果
*/
@PostMapping("/read/{blogId}")
public Result<Integer> readBlog(@PathVariable("blogId") Long blogId) {
int readCount = blogService.readBlog(blogId);
return Result.success(readCount);
}
...
}
```
在 `BlogService` 中实现 `readBlog` 方法：
```java
@Service
public class BlogServiceImpl implements BlogService {
...
/**
* 统计
博客文章的阅读量
*
* @param blogId
博客文章ID
* @return 统计结果
*/
@Override
public int readBlog(Long blogId) {
Blog blog = blogMapper.selectByPrimaryKey(blogId);
if (blog != null) {
int readCount = blog.getReadCount() + 1;
blog.setReadCount(readCount);
blogMapper.updateByPrimaryKeySelective(blog);
return readCount;
}
return 0;
}
...
}
```
### 1.2 在
博客页面添加底部的版权声明
接下来，我们将在
博客页面底部添加一个版权声明。具体的实现方式为：
1. 在
博客页面底部添加一个版权声明的区域。
2. 在加载
博客页面时，通过 AJAX 请求获取版权声明的内容，并更新版权声明区域的显示。
具体的代码实现如下：
在
博客页面底部添加一个版权声明的区域：
```html
<div class="blog-footer">
<div><span id="copyright">
版权声明：本
博客所有文章均为作者原创或转载，未经授权禁止转载。
</span></div>
</div>
```
在加载
博客页面时，通过 AJAX 请求获取版权声明的内容，并更新版权声明区域的显示。具体的实现方式为：
```javascript
$(function () {
// 加载版权声明
$.ajax({
url: "/blog/copyright",
type: "GET",
success: function (result) {
if (result && result.success) {
$("#copyright")
.html("版权声明：" + result.data);
}
}
});
});
```
在服务器端，我们需要实现一个接口来获取版权声明的内容。具体的实现方式为：
```java
@RestController
@RequestMapping("/blog")
public class BlogController {
...
/**
* 获取版权声明的内容
*
* @return 版权声明的内容
*/
@GetMapping("/copyright")
public Result<String> getCopyright() {
String content = "本
博客所有文章均为作者原创或转载，未经授权禁止转载。";
return Result.success(content);
}
...
}
```
## 2. 拓展模块的集成和配置
在上一篇文章中，我们已经将
博客系统的所有模块都整合到了一个工程中，因此我们可以通过添加一个 Maven 模块来实现拓展模块的开发，并将其整合到原有工程中。
具体的步骤如下：
1. 在项目根目录下创建一个新的 Maven 模块，命名为 `blog-ext`，并将其添加到工程中。
2. 在 `blog-ext` 模块中添加 `pom.xml` 文件，并添加依赖关系。
3. 在 `blog-ext` 模块中添加 Spring Boot 的配置文件 `application.yml`，并添加相关配置。
4. 在 `blog-ext` 模块中添加拓展模块的代码和资源文件。
### 2.1 添加 Maven 模块
在项目根目录下创建一个新的 Maven 模块，命名为 `blog-ext`，并将其添加到工程中。具体的步骤如下：
1. 在项目根目录下创建一个新的 Maven 模块，命名为 `blog-ext`。
```bash
$ cd ~/workspace/springboot-blog
$ mvn archetype:generate -DgroupId=com.waylau.spring.boot.blog \
-DartifactId=blog-ext -DarchetypeArtifactId=maven-archetype-quickstart \
-DinteractiveMode=false
```
2. 将 `blog-ext` 模块添加到工程中。
```xml
<modules>
<module>blog-api</module>
<module>blog-service</module>
<module>blog-web</module>
<module>blog-ext</module>
</modules>
```
### 2.2 添加依赖关系
在 `blog-ext` 模块中添加 `pom.xml` 文件，并添加依赖关系。具体的依赖关系如下：
```xml
<dependencies>
<dependency>
<groupId>com.waylau.spring.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<
version>${spring.boot.
version}</
version>
<type>pom</type>
<scope>import</scope>
</dependency>
<!-- 添加 Spring Web MVC 的依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 添加 MyBatis 的依赖 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<
version>${mybatis.boot.
version}</
version>
</dependency>
</dependencies>
```
### 2.3 添加配置文件
在 `blog-ext` 模块中添加 Spring Boot 的配置文件 `application.yml`，并添加相关配置。具体的配置如下：
```yaml
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/blog?useSSL=false&useUnicode=true&characterEncoding=utf8
username: root
password: root
mvc:
view:
prefix: /templates/
suffix: .html
resources:
static-locations: classpath:/static/
```
### 2.4 添加拓展模块的代码和资源文件
在 `blog-ext` 模块中添加拓展模块的代码和资源文件。具体的步骤如下：
1. 在 `blog-ext` 模块中添加 `com.waylau.spring.boot.blog.ext` 包，并在该包下添加 `BlogExtApplication` 类。
```java
@SpringBootApplication(scanBasePackages = "com.waylau.spring.boot.blog.ext")
public class BlogExtApplication {
public static void main(String[] args) {
SpringApplication.run(BlogExtApplication.class, args);
}
}
```
2. 在 `blog-ext` 模块中添加 `resources` 目录，并在该目录下添加 `templates` 和 `static` 目录。
3. 在 `templates` 目录中添加 `read-count.html` 和 `copyright.html`。
```html
<!-- read-count.html -->
<div class="blog-sidebar-item">
<div class="blog-sidebar-title">阅读量</div>
<div class="blog-sidebar-content">
<span id="read-count">0</span>
</div>
</div>
```
```html
<!-- copyright.html -->
<div class="blog-footer">
<div><span id="copyright">
版权声明：本
博客所有文章均为作者原创或转载，未经授权禁止转载。
</span></div>
</div>
```
4. 在 `static` 目录中添加 `js` 目录，并在该目录下添加 `read-count.js` 和 `copyright.js`。
```javascript
// read-count.js
$(function () {
// 统计阅读量
var blogId = $("#blogId").val();
$.ajax({
url: "/blog/read/" + blogId,
type: "POST",
success: function (result) {
if (result && result.success) {
$("#read-count").text(result.data);
} else {
$("#read-count").text(0);
}
}
});
});
```
```javascript
// copyright.js
$(function () {
// 加载版权声明
$.ajax({
url: "/blog/copyright",
type: "GET",
success: function (result) {
if (result && result.success) {
$("#copyright")
.html("版权声明：" + result.data);
}
}
});
});
```
## 3. 拓展模块的使用示例
在完成了拓展模块的开发和配置之后，我们需要将其与原有系统进行整合。具体的步骤如下：
1. 在原有系统中添加对拓展模块的依赖关系。
在 `blog-web` 模块的 `pom.xml` 文件中添加对 `blog-ext` 模块的依赖关系：
```xml
<dependencies>
...
<!-- 添加 blog-ext 的依赖 -->
<dependency>
<groupId>com.waylau.spring.boot.blog</groupId>
<artifactId>blog-ext</artifactId>
<
version>${project.
version}</
version>
</dependency>
</dependencies>
```
2. 在原有系统中添加拓展模块的使用示例。
在
博客文章详情页面中添加一个阅读量的区域：
```html
<!-- 添加阅读量的区域 -->
<div th:replace="blog-ext :: read-count"></div>
```
在
博客页面底部添加一个版权声明的区域：
```html
<!-- 添加版权声明的区域 -->
<div th:replace="blog-ext :: copyright"></div>
```
经过以上的步骤，我们就已经成功地将
博客系统的拓展模块整合到了原有系统中。
## 总结
本文介绍了如何实现 Spring Boot 的拓展模块，并将其与原有系统进行整合。在实际开发中，我们可以根据具体的需求来实现不同的拓展模块，并通过配置文件等方式将其整合到原有系统中。这种方式既提高了代码的可维护性，又方便了模块的扩展和升级。
1702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
