SpringBoot整合Mybatis实现商品评分

前言

当今的电商平台越来越依赖于用户评分，以确定一个商品在市场中的竞争力和口碑，而SpringBoot整合Mybatis-plus是非常适用于这一功能的框架。本文将介绍在SpringBoot应用中整合Mybatis-plus框架，实现对商品进行评分功能的实现过程。同时，本文也会详细讲述如何在前端使用Vue框架实现对接口的调用，使得整个功能能够完整地呈现在用户的前端页面。

功能实现流程

1. 初始化项目

首先需要新建一个SpringBoot项目，以及相关依赖。在本例中，我们需要在pom.xml引入Mybatis-plus的相关依赖, 代码如下所示:

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus</artifactId>
    <version>3.0.7.1</version>
</dependency>

2. 配置数据源

在SpringBoot项目的application.properties文件中进行数据库配置，如下所示:

# 配置数据源
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/testdb?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT
spring.datasource.username=root
spring.datasource.password=123456

3. 定义实体类与Mapper接口

根据需要操作的数据，我们需要定义一个简单的实体类以及对应的Mapper接口。在本例中，我们需要一个商品评分的实体类以及操作该实体类的Mapper接口。实体类的定义如下:

@Data
public class ProductRatingEntity {

    private Long id;

    private Long productId;

    private int rating;

    // getter 和 setter 省略
}

对应的Mapper接口的定义如下:

@Mapper
public interface ProductRatingMapper {

    List<ProductRatingEntity> selectByProductId(Long productId);

    void insert(ProductRatingEntity productRating);

}

4. 实现Service层和Controller层的代码

接下来，我们需要在Service层中实现相关的操作逻辑，例如查询已有的评分列表、计算平均分数、新增评分等功能。代码如下所示:

@Service
public class ProductRatingService {

    @Autowired
    private ProductRatingMapper productRatingMapper;

    public List<ProductRatingEntity> getProductRatings(Long productId) {
        return productRatingMapper.selectByProductId(productId);
    }

    public int getAverageRating(Long productId) {
        List<ProductRatingEntity> ratings = getProductRatings(productId);
        int total = 0;
        for (ProductRatingEntity rating : ratings) {
            total += rating.getRating();
        }
        if (ratings.size() == 0) {
            return 0;
        }
        return total / ratings.size();
    }

    public void addProductRating(ProductRatingEntity productRating) {
        productRatingMapper.insert(productRating);
    }

}

在控制器层，我们需要对前端请求进行响应，根据前端提供的商品id，查询已有的商品评分以及计算平均分。在前端进行评分时，我们也需要将前端传递过来的评分数据进行持久化操作。代码如下所示:

@RestController
@RequestMapping("/product-rating")
public class ProductRatingController {

    @Autowired
    private ProductRatingService productRatingService;

    /**
     * 获取商品的评分列表
     */
    @GetMapping("/{productId}")
    public List<ProductRatingEntity> getProductRatings(@PathVariable Long productId) {
        return productRatingService.getProductRatings(productId);
    }

    /**
     * 获取商品的平均分
     */
    @GetMapping("/average-rating/{productId}")
    public int getAverageRating(@PathVariable Long productId) {
        return productRatingService.getAverageRating(productId);
    }

    /**
     * 新增商品评分
     */
    @PostMapping("/")
    public void addProductRating(@RequestBody ProductRatingEntity productRating) {
        productRatingService.addProductRating(productRating);
    }

}

5. 前端代码

在前端页面中，我们需要使用Vue框架进行接口调用，实现商品评分的添加和获取操作。在前端界面中，我们需要实现一个“打分星级”的组件，以方便用户为商品进行评分。代码如下:

<template>
  <div>
    <span v-for="i in 5" :key="i" @click="rate(i)">{{ i <= this.rating ? '★' : '☆' }}</span>
  </div>
</template>

<script>
export default {
  name: 'StarRating',
  props: {
    rating: {
      type: Number,
      default: 0
    },
    productId: {
      type: Number,
      required: true
    }
  },
  methods: {
    rate(rating) {
      axios.post('/product-rating', { productId: this.productId, rating })
        .then(() => {
          this.$emit('rated', rating);
        });
    }
  }
}
</script>

在前端页面的其他部分，我们需要实现一个获取商品评分的函数以及一个显示商品平均分的区域。代码如下所示:

<template>
  <div>
    <h1>商品详情页</h1>
    <p>该商品的平均评分: {{averageRating}}</p>
    <p>
      商品评分:
      <star-rating :productId="productId" :rating="userRating" @rated="onRated" />
    </p>
  </div>
</template>

<script>
import axios from 'axios';
import StarRating from './components/StarRating.vue';

export default {
  name: 'ProductDetail',
  components: {
    StarRating,
  },
  data() {
    return {
      averageRating: 0,
      userRating: 0,
      productId: 1,
    }
  },
  mounted() {
    this.getAverageRating();
  },
  methods: {
    onRated(rating) {
      this.userRating = rating;
      this.getAverageRating();
    },
    getAverageRating() {
      axios.get(`/product-rating/average-rating/${this.productId}`)
        .then(response => {
          this.averageRating = response.data;
        });
    }
  }
}
</script>

通过以上这些代码，我们便完成了SpringBoot整合Mybatis-plus实现对商品评分的功能。在前端页面中，我们实现了Vue框架的接口调用以及评分星级组件的实现，方便用户对商品进行评分，完成数据和用户界面的全面展示。

补充说明一些需要注意的细节和问题。

1. 考虑并发情况

在评分功能的实现中，如果没有考虑并发情况，可能会出现数据不一致或数据丢失等问题。在新增评分的操作中，我们需要使用数据库的事务机制，以保证在多个评分请求同时到达时，只有一个请求能够成功地增加评分记录，其他请求则会失败。这样，就能够保证数据库中的数据是正确完整的，并且防止同时修改同一记录的问题。

2. 数据库设计

在设计评分系统的数据表时，需要考虑到多个商品，可能存在多个用户对其评分的情况。因此，我们需要根据实际情况来设计数据库的表结构，建立商品评分表，用户表等相关表，并在这些表之间建立适当的关联关系，确保评分记录的存储和查询都能够顺畅地进行。

3. 数据库索引

在进行查询操作时，可能需要对评分记录进行查询和排序，此时可以考虑使用数据库索引来提高查询效率。例如，我们可以在商品评分表的产品id字段上建立一个索引，以便快速地查询某个产品的所有评分记录。

4. 前端用户体验

对于用户界面方面，我们需要考虑到用户对于评分功能的直观体验和操作便捷性。例如，在本文实现的前端界面中，我们使用了一个简单的星级评分组件，为用户提供极大的操作便捷性。对于这类的用户体验方面，我们可以通过调研用户的需求和使用情况，来设计出符合用户特点的界面操作方式，进一步提高用户满意度。

总结

本文介绍了SpringBoot整合Mybatis-plus框架实现对商品评分的功能实现流程和前端接口实现过程，同时，也对这些代码实现的一些问题和细节进行了详细的说明。在实际项目开发中，我们需要注意细节问题，遵循规范，保证代码的可扩展性和可维护性，从而更好地完成项目需求。