SpringBoot整合Mybatis-plus实现评论自带IP功能-CFANZ编程社区

1. 前言

在开发Web应用的过程中，我们经常需要记录用户请求的IP地址。一种常见的用途是在用户发表评论时记录评论内容以及评论所处的省份，从而实现精准的地域分析，以及对恶意评论的过滤等功能。本篇博文将介绍如何使用SpringBoot和Mybatis-plus实现评论自带IP功能，并采用Vue作为前端框架。

2. 技术栈

SpringBoot
Mybatis-plus
Vue

3. 开发流程

3.1 数据库设计

首先我们需要设计数据库表结构来保存评论和IP地址数据。假设我们的应用将支持全国31个省份的用户，我们可以设计一个名为comment的表，该表的字段如下：

CREATE TABLE `comment` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `user_id` int(11) NOT NULL COMMENT '评论者id',
  `content` varchar(255) NOT NULL COMMENT '评论内容',
  `province_code` varchar(32) NOT NULL COMMENT '省份编码',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '评论时间',
  PRIMARY KEY (`id`),
  KEY `user_id` (`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='用户评论表';

其中，user_id字段是评论者的ID，content字段是评论内容，province_code字段是省份编码，create_time字段是评论时间。

为了保存省份编码和省份名称的对应关系，我们可以设计一个名为province的表，该表的字段如下：

CREATE TABLE `province` (
  `province_id` int(11) NOT NULL AUTO_INCREMENT,
  `province_name` varchar(32) NOT NULL COMMENT '省份名称',
  `province_code` varchar(32) NOT NULL COMMENT '省份编码',
  PRIMARY KEY (`province_id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='省份表';

3.2 SpringBoot后端开发

3.2.1 数据库连接配置

在application.properties文件中配置数据库连接信息：

spring.datasource.url=jdbc:mysql://localhost:3306/test?useSSL=false&characterEncoding=utf8mb4&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

3.2.2 引入Mybatis-plus依赖

在pom.xml文件中添加如下依赖：

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.2</version>
</dependency>

3.2.3 实体类设计

为了方便操作数据库表，我们需要设计一个名为Comment的实体类，并使用注解@TableName标记表名，如下所示：

@Data
@TableName("comment")
public class Comment {
    private Long id;

    @TableField("user_id")
    private Long userId;

    @TableField("content")
    private String content;

    @TableField("province_code")
    private String provinceCode;

    @TableField("create_time")
    private LocalDateTime createTime;
}

同时，我们还需要设计一个名为Province的实体类，用于封装省份编码和名称的对应关系，如下所示：

@Data
@TableName("province")
public class Province {
    @TableId(type = IdType.AUTO)
    private Long provinceId;

    @TableField("province_name")
    private String provinceName;

    @TableField("province_code")
    private String provinceCode;
}

3.2.4 Mybatis-plus配置

在application.properties文件中添加Mybatis-plus配置：

# Mybatis-plus配置
mybatis-plus.mapper-locations=classpath*:mapper/*Mapper.xml
mybatis-plus.global-config.db-config.logic-not-delete-value=0
mybatis-plus.global-config.db-config.logic-delete-value=1
mybatis-plus.global-config.db-config.logic-delete-value=0
mybatis-plus.global-config.db-config.id-type=auto
mybatis-plus.global-config.db-config.field-strategy=ignore
mybatis-plus.global-config.db-config.table-prefix=tb_
mybatis-plus.global-config.db-config.refresh-mapper=true

3.2.5 Mapper接口编写

编写CommentMapper和ProvinceMapper接口，分别继承BaseMapper接口，如下所示：

public interface CommentMapper extends BaseMapper<Comment> {
}

public interface ProvinceMapper extends BaseMapper<Province> {
}

3.2.6 服务层和控制层编写

编写CommentService和ProvinceService服务类，分别注入CommentMapper和ProvinceMapper，以实现对数据库表的CRUD操作。

编写CommentController控制器，定义RESTful风格API接口，如下所示：

@RestController
@RequestMapping("/comment")
public class CommentController {

    @Autowired
    private CommentService commentService;

    @GetMapping("/list")
    public JsonResult<List<Comment>> list() {
        List<Comment> comments = commentService.list();
        return JsonResult.success(comments);
    }

    @PostMapping("/add")
    public JsonResult add(@RequestBody Comment comment) {
        commentService.save(comment);
        return JsonResult.success("添加成功");
    }
}

3.3 前端开发

3.3.1 引入Vue框架

在HTML文件中添加引用：

<html>
<head>
  <title>评论列表</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

3.3.2 创建Vue组件

创建一个Vue组件CommentList，用于显示评论列表，如下所示：

<template>
  <div>
    <h1>评论列表</h1>
    <table>
      <thead>
        <tr>
          <th width="20%">用户名</th>
          <th width="50%">评论内容</th>
          <th width="30%">IP地址</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="comment in comments" :key="comment.id">
          <td>{{ comment.userId }}</td>
          <td>{{ comment.content }}</td>
          <td>{{ comment.provinceCode }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'CommentList',
    data() {
      return {
        comments: []
      }
    },
    created() {
      this.loadComments()
    },
    methods: {
      loadComments() {
        // 发起获取评论列表的API请求
        fetch('/comment/list')
          .then(res => res.json())
          .then(result => {
            this.comments = result.data
          })
      }
    }
  }
</script>

3.3.3 创建Vue实例

在HTML文件中创建Vue实例，挂载组件，并渲染UI界面，如下所示：

<html>
<head>
  <title>评论列表</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    import CommentList from './CommentList.vue'

    new Vue({
      el: '#app',
      render: h => h(CommentList)
    })
  </script>
</body>
</html>

至此，前端页面的开发工作已经完成。

4. 总结

本篇博文介绍了如何使用SpringBoot和Mybatis-plus实现评论自带IP功能，并采用Vue作为前端框架。通过本篇博文的学习，读者可以了解到开发中使用到的技术栈，以及具体的开发流程和实现方式。
同时，本篇博文还提供了数据库表结构设计、实体类设计、Mapper接口编写、服务层和控制层的编写、前端页面的开发等详细的步骤和代码示例。希望本篇博文可以对读者在后端和前端开发方面提供一些参考和帮助。