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

# 配置數(shù)據(jù)源
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

@Data
public class ProductRatingEntity {

    private Long id;

    private Long productId;

    private int rating;

    // getter 和 setter 省略
}

@Mapper
public interface ProductRatingMapper {

    List<ProductRatingEntity> selectByProductId(Long productId);

    void insert(ProductRatingEntity productRating);

}

@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);
    }

}

@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);
    }

}

<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>