【畅购商城】详情页模块之评论

news2025/11/4 14:44:24

目录

接口

分析

后端实现：JavaBean

后端实现

前端实现

接口

GET http://localhost:10010/web-service/comments/spu/2?current=1&size=2

{

  "code": 20000,

  "message": "查询成功",

  "data": {

    "impressions": [

      {

        "id": 1,

        "title": "口感不错",

        "count": 15326,

        "spu_id": 2,

        "sku_id": 2600242

      }

    ],

    "ratio": {

      "common": "33.33",

      "bad": "33.33",

      "goods": "33.33"

    },

    "comment_count": 3,

    "comments": [

      {

        "id": 3,

        "userId": 1,

        "user": {

          "face": "images/user3.jpg",

        },

        "spuId": 2,

        "skuId": 2600248,

        "ratio": "2",

        "content": "差",

      }

    ]

  },

  "other": {}

}

分析

后端实现：JavaBean

步骤一：创建 Impression ，用于封装印象表中的数据

package com.czxy.changgou4.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.Data;

/** 印象
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
@TableName("tb_impression")
@Data
public class Impression {

    @TableId(type = IdType.AUTO)
    private Integer id;

    private String title;
    private Integer count;

    @TableField("spu_id")
    @JsonProperty("spu_id")
    private Integer spuId;

    @TableField("sku_id")
    @JsonProperty("sku_id")
    private Integer skuId;

}

步骤二：创建 CommentResult，用于封装评论相关的信息

package com.czxy.changgou4.pojo;

import lombok.Data;

import java.util.List;
import java.util.Map;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
@Data
public class CommentResult {
    private List<Impression> impressions;       //印象
    private Map<String,Object> ratio;           //好评度
    private Integer comment_count;              //评论数
    private List<SkuComment> comments;          //评论

}

后端实现

步骤一：创建 ImpressionMapper，完成 “查询指定SpuId的所有印象”

package com.czxy.changgou4.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.czxy.changgou4.pojo.Impression;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
@Mapper
public interface ImpressionMapper extends BaseMapper<Impression> {

    /**
     * 查询指定SpuId的所有印象
     * @param spuid
     * @return
     */
    @Select("select * from tb_impression where spu_id = #{spuid}")
    public List<Impression> findImpressionsBySpuid(@Param("spuid") Integer spuid);

}

步骤二：修改 SkuCommentMapper，完成“查询指定好评度的评论数”

/**
 * 查询指定好评度的评论数
 * @param spuid
 * @param ratio  0好评、1中评、2差评
 * @return
 */
@Select("select count(*) from tb_sku_comment where spu_id = #{spuid} and ratio = #{ratio}")
public Integer findCommentCountByRatio(@Param("spuid")Integer spuid,@Param("ratio")Integer ratio);

步骤三：修改 SkuCommentMapper，完成“查询SpuId的评论数”

/**
 * 查询SpuId的评论数
 * @param spuid
 * @return
 */
@Select("select count(*) from tb_sku_comment where spu_id = #{spuid}")
public Integer findTotalCommentBySpuid(@Param("spuid") Integer spuid);

 步骤四：修改 skuCommentMapper，完成“查询指定spu的所有评论”

/**
 * 查询指定spu的所有评论
 * @param spuid
 * @return
 */
@Select("select * from tb_sku_comment where spu_id = #{spuid} limit #{startIndex},#{size}")
@Results({
        @Result(property = "createdAt" , column = "created_at"),
        @Result(property = "updatedAt" , column = "updated_at"),
        @Result(property = "userId" , column = "user_id"),
        @Result(property = "skuId" , column = "sku_id"),
        @Result(property = "specList" , column = "spec_list"),
        @Result(property = "user" , one = @One(select = "com.czxy.changgou4.mapper.UserMapper.selectById"), column = "user_id"),
})
public List<SkuComment> findCommentsBySpuid(@Param("spuid") Integer spuid, @Param("startIndex") Integer startIndex, @Param("size") Integer size);

步骤五：创建 SkuCommentService接口，定义“查询指定spu的所有评论”方法

package com.czxy.changgou4.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.czxy.changgou4.pojo.SkuComment;
import com.czxy.changgou4.vo.CommentResult;
import com.czxy.changgou4.vo.PageRequest;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
public interface SkuCommentService extends IService<SkuComment> {
    /**
     *
     * @param spuid
     * @param pageRequest
     * @return
     */
    public CommentResult findComments(Integer spuid, PageRequest pageRequest);
}

步骤六：创建 SkuCommentServiceImpl实现类

package com.czxy.changgou4.service.impl;

import com.baomidou.mybatisplus.extension.service.IService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.czxy.changgou4.mapper.ImpressionMapper;
import com.czxy.changgou4.mapper.SkuCommentMapper;
import com.czxy.changgou4.mapper.SkuMapper;
import com.czxy.changgou4.pojo.Impression;
import com.czxy.changgou4.pojo.SkuComment;
import com.czxy.changgou4.service.SkuCommentService;
import com.czxy.changgou4.vo.CommentResult;
import com.czxy.changgou4.vo.PageRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
@Service
@Transactional
public class SkuCommentServiceImpl extends ServiceImpl<SkuCommentMapper, SkuComment> implements SkuCommentService {

    @Resource
    private ImpressionMapper impressionMapper;

    public CommentResult findComments(Integer spuid, PageRequest pageRequest){

        CommentResult commentResult = new CommentResult();

        //查询所有印象
        List<Impression> impressionList = impressionMapper.findImpressionsBySpuid(spuid);
        commentResult.setImpressions(impressionList);

        //好评度
        Integer goodCount = baseMapper.findCommentCountByRatio(spuid,0);// 好评
        Integer commonCount = baseMapper.findCommentCountByRatio(spuid,1);// 中评
        Integer badCount = baseMapper.findCommentCountByRatio(spuid,2);// 差评
        Integer totalCount = baseMapper.findTotalCommentBySpuid(spuid);//

        Map<String,Object> ratio = new HashMap<>();
        ratio.put("goods", String.format("%.2f" , goodCount * 100.0 / totalCount ));
        ratio.put("common",String.format("%.2f" , commonCount * 100.0 / totalCount ));
        ratio.put("bad",String.format("%.2f" , badCount * 100.0 / totalCount ));
        commentResult.setRatio( ratio );

        //总评论数
        Integer comment_count = baseMapper.findNumBySpuId(spuid);
        commentResult.setComment_count(comment_count);


        //查询所有
        int startIndex = (pageRequest.getCurrent() - 1) * pageRequest.getSize();
        List<SkuComment> comments = baseMapper.findCommentsBySpuid(spuid, startIndex ,pageRequest.getSize());
        commentResult.setComments(comments);


        return commentResult;
    }

}

步骤七：创建 SkuCommentController，完成“查询指定spu的所有评论”

package com.czxy.changgou4.controller;

import com.czxy.changgou4.service.SkuCommentService;
import com.czxy.changgou4.vo.BaseResult;
import com.czxy.changgou4.vo.CommentResult;
import com.czxy.changgou4.vo.PageRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
@RestController
@RequestMapping("/comments")

public class SkuCommentController {

    @Resource
    private SkuCommentService skuCommentService;


    @GetMapping("/spu/{spuid}")
    public BaseResult findCommentsByPage(@PathVariable("spuid") Integer spuid, PageRequest pageRequest){
        CommentResult comments = skuCommentService.findComments(spuid, pageRequest);
        return BaseResult.ok("查询成功", comments);
    }

}

前端实现

步骤一：修改 apiclient.js，添加 getComments 函数，完成查询评论操作

 //评论
  getComments : (spuid , size, current) => {
    return axios.get(`/web-service/comments/spu/${spuid}`,{
      params: {
        size: size,
        current: current
      }
    })
  },

步骤二：修改 Goods.vue ，编写查询评论函数，用于支持分页

 data() {
    return {
      commentVo: {
        size: 2,
        current: 1,
      },
      commentResult: {
        ratio: {}
      }
    }
  },
 async pageChanged (num) {
      this.commentVo.current = num
      // ajax 查询
      let { data } = await this.$request.getComments( this.goodsInfo.spuid, this.commentVo.current, this.commentVo.size)
      // 处理结果
      this.commentResult = data.data
    }

步骤三：修改 Goods.vue ，页面加载成功后，查询评论（第一页）

//评论
     this.pageChanged(1)

步骤四：修改 Goods.vue ，展示“好评度”

  <div class="rate fl">
         <strong><em>{{ commentResult.ratio.goods}}</em>%</strong> <br />
         <span>好评度</span>
    </div>
    <div class="percent fl">
        <dl>
             <dt>好评（{{ commentResult.ratio.goods}}%）</dt>
             <dd><div :style="{'width': comments.ratio.goods + 'px'}"></div></dd>
         </dl>
         <dl>
             <dt>中评（{{ commentResult.ratio.common}}%）</dt>
             <dd><div :style="{'width':comments.ratio.common + 'px'}"></div></dd>
         </dl>
         <dl>
             <dt>差评（{{ commentResult.ratio.bad}}%）</dt>
             <dd><div :style="{'width': commentResult.ratio.bad + 'px'}" ></div></dd>
         </dl>
   </div>

 步骤五：修改 Goods.vue ，展示“买家印象”

<dl>
     <dt>买家印象：</dt>
     <dd v-for="(ci,cii) in commentResult.impressions" :key="cii">
		<span>{{ci.title}}</span><em>({{ci.count}})</em>
	</dd>
</dl>

步骤六：修改 Goods.vue ，展示“评论”

<!-- 评论开始 -->
              <div v-for="(cc,cci) in commentResult.comments" :key="cci" class="comment_items mt10">
                <div class="user_pic">
                  <dl>
                    <dt><a href=""><img :src="cc.user.face" alt="" /></a></dt>
                    <dd><a href="">{{cc.user.name}}</a></dd>
                  </dl>
                </div>
                <div class="item">
                  <div class="title">
                    <span>{{cc.created_at}}</span>
                    <strong class="star" :class="'star' + cc.star"></strong> <!-- star5表示5星级 start4表示4星级，以此类推 -->
                  </div>
                  <div class="comment_content">
                    {{cc.content}}
                  </div>
                  <div class="btns">
                    <a href="" class="reply">回复(0)</a>
                    <a href="" class="useful">有用(0)</a>
                  </div>
                </div>
                <div class="cornor"></div>
              </div>
              <!-- 评论结束 -->

步骤七：修改 Goods.vue ，展示“分页条”

import Pagination from '../components/Pagination'

 

<!-- 分页信息 start -->
              <pagination :total="commentResult.comment_count"
                    :page_size="commentVo.size"
                    @page_changed="pageChanged" ></pagination>
              <!-- 分页信息 end -->

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2268124.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

04.HTTPS的实现原理-HTTPS的混合加密流程

04.HTTPS的实现原理-HTTPS的混合加密流程

04.HTTPS的实现原理-HTTPS的混合加密流程 简介1. 非对称加密与对称加密2. 非对称加密的工作流程3. 对称加密的工作流程4. HTTPS的加密流程总结 简介 主要讲述了HTTPS的加密流程&#xff0c;包括非对称加密和对称加密两个阶段。首先&#xff0c;客户端向服务器发送请求&#xf…
阅读更多...
【每日学点鸿蒙知识】数据迁移、大量图片存放、原生自定义键盘调用、APP包安装到测试机、photoPicker顶部高度

【每日学点鸿蒙知识】数据迁移、大量图片存放、原生自定义键盘调用、APP包安装到测试机、photoPicker顶部高度

1、迁移&#xff08;克隆&#xff09;手机中经过 ArkData &#xff08;方舟数据管理&#xff09;服务持久化后的数据&#xff1f; 在用户手动迁移&#xff08;克隆&#xff09;手机数据至另一台设备后&#xff0c;使用 ArkData &#xff08;方舟数据管理&#xff09;服务持久化…
阅读更多...
Centos 7.6 安装mysql 5.7

Centos 7.6 安装mysql 5.7

卸载mysql 之前服务器上一直是mysql8&#xff0c;因为不经常使用&#xff0c;而且8的内存占用还挺高的&#xff0c;所以想降低到5.7&#xff0c;腾出点运行内存 停止服务 # 查询服务的状态 systemctl status mysqld # 停止服务 systemctl stop mysqld随后再次查询状态 查询…
阅读更多...
大数据学习之Redis 缓存数据库二，Scala分布式语言一

大数据学习之Redis 缓存数据库二，Scala分布式语言一

一.Redis 缓存数据库二 26.Redis数据安全_AOF持久化机制 27.Redis数据安全_企业中该如何选择持久化机制 28.Redis集群_主从复制概念 29.Redis集群_主从复制搭建 30.Redis集群_主从复制原理剖析 31.Redis集群_哨兵监控概述 32.Redis集群_配置哨兵监控 33.Redis集群_哨兵监控原理…
阅读更多...
Elasticsearch：使用 Ollama 和 Go 开发 RAG 应用程序

Elasticsearch：使用 Ollama 和 Go 开发 RAG 应用程序

作者&#xff1a;来自 Elastic Gustavo Llermaly 使用 Ollama 通过 Go 创建 RAG 应用程序来利用本地模型。 关于各种开放模型&#xff0c;有很多话要说。其中一些被称为 Mixtral 系列&#xff0c;各种规模都有&#xff0c;而一种可能不太为人所知的是 openbiollm&#xff0c;这…
阅读更多...
【日常开发】Git Stash使用技巧

【日常开发】Git Stash使用技巧

文章目录 引言一、git stash 基础命令&#xff08;一&#xff09;存储当前工作区的修改&#xff08;二&#xff09;查看存储列表 二、查看存储的内容&#xff08;一&#xff09;查看特定存储的详细内容&#xff08;二&#xff09;查看特定存储修改的文件列表 三、恢复存储的修改…
阅读更多...
GXUOJ-算法-第三次作业

GXUOJ-算法-第三次作业

1.基础练习 Huffman树 问题描述 GXUOJ | 基础练习 Huffman树 代码解析 #include<bits/stdc.h> using namespace std; int main(){int n;cin>>n;priority_queue<int,vector <int>,greater<int> >pq;for(int i0;i<n;i){int value;cin>>…
阅读更多...
04-微服务02

04-微服务02

我们将黑马商城拆分为5个微服务&#xff1a; 用户服务 商品服务 购物车服务 交易服务 支付服务 由于每个微服务都有不同的地址或端口&#xff0c;相信大家在与前端联调的时候发现了一些问题&#xff1a; 请求不同数据时要访问不同的入口&#xff0c;需要维护多个入口地址…
阅读更多...
vue导入导出excel、设置单元格文字颜色、背景色、合并单元格（使用xlsx-js-style库）

vue导入导出excel、设置单元格文字颜色、背景色、合并单元格（使用xlsx-js-style库）

npm i xlsx-js-style <template><button click"download">下载 Excel 表格</button><el-table :data"tableData" style"width: 100%"><el-table-column prop"date" label"日期" width"180…
阅读更多...
AI文献阅读ChatDOC 、ChatPDF 哪个好？

AI文献阅读ChatDOC 、ChatPDF 哪个好？

作为AI产品的深度使用者&#xff0c;基本每天都在使用AI。AI诞生后仿佛给所有的产品打开了新世界大门。当然AI在文献阅读方面自然也不会缺席。 先来简单对比一下ChatDOC vs ChatPDF 从表格里可以看到ChatDOC与ChatPDF都是基于GPT的产品&#xff0c;但在功能上ChatDOC还是比Chat…
阅读更多...
小程序基础 —— 10 如何调试小程序代码

小程序基础 —— 10 如何调试小程序代码

如何调试小程序代码 在进行项目开发的时候&#xff0c;不可避免需要进行调试&#xff0c;那么如何调试小程序呢&#xff1f; 打开微信开发者工具后&#xff0c;有一个模拟器&#xff0c;通过模拟器能够实时预览自己写的页面&#xff0c;如下&#xff1a; 在上部工具栏中有一个…
阅读更多...
vue+echarts实现疫情折线图

vue+echarts实现疫情折线图

效果&#xff1a; 代码&#xff1a; <<template><div><div id"left1" style "height:800px;width:100%"></div></div> </template><script> //疫情数据//export default {data() {return {data:{//疫情数据…
阅读更多...
使用arduino从零做一辆ROS2Jazzy的阿克曼小车---电机驱动篇

使用arduino从零做一辆ROS2Jazzy的阿克曼小车---电机驱动篇

本项目采用 Arduino Mega2560 Pro 作为主控开发板&#xff0c;电机驱动器选用 TB6612FNG&#xff0c;并配备了 12V 电源、两个直流减速电机和一个舵机。未来计划通过嘉立创将各模块集成到一个 PCB 板上&#xff0c;提升系统的集成度和稳定性。 本文将聚焦于电机驱动部分&#x…
阅读更多...
基于源码剖析：深度解读JVM底层运行机制

基于源码剖析：深度解读JVM底层运行机制

每日禅语 佛说&#xff0c;给你修路的&#xff0c;是你自己&#xff1b;埋葬你的&#xff0c;也是你自己&#xff1b;帮助你的&#xff0c;是你自己&#xff1b;毁灭你的&#xff0c;也是你自己&#xff1b;成就你的&#xff0c;自然还是你自己。所以佛说&#xff1a;自作自受&…
阅读更多...
算法进阶：贪心算法

算法进阶：贪心算法

贪心算法是一种简单而直观的算法思想&#xff0c;它在每一步选择中都采取在当前状态下最优的选择&#xff0c;以期望最终得到全局最优解。贪心算法通常适用于一些具有最优子结构的问题&#xff0c;即问题的最优解可以通过一系列局部最优解的选择得到。 贪心算法的基本思路是&a…
阅读更多...
Hive刷分区MSCK

Hive刷分区MSCK

一、MSCK刷分区 我们平时通常是通过alter table add partition方式增加Hive的分区的&#xff0c;但有时候会通过HDFS put/cp命令或flink、flum程序往表目录下拷贝分区目录&#xff0c;如果目录多&#xff0c;需要执行多条alter语句&#xff0c;非常麻烦。Hive提供了一个"…
阅读更多...
Windows API Set：那些“只存在但不被使用“的DLL

Windows API Set：那些“只存在但不被使用“的DLL

API Set 是什么&#xff1f; 想象一下&#xff0c;Windows就像一个大型图书馆&#xff0c;而API Set就是这个图书馆的索引系统。但这个索引系统非常特别&#xff1a;它是直接内置在Windows加载器中的"虚拟目录"。 // 一个典型的API Set映射示例 api-ms-win-core-mem…
阅读更多...
【Java 数据结构】合并两个有序链表

【Java 数据结构】合并两个有序链表

&#x1f525;博客主页&#x1f525;&#xff1a;【 坊钰_CSDN博客 】 欢迎各位点赞&#x1f44d;评论✍收藏⭐ 目录 1. 题目 2. 解析 3. 代码实现 4. 小结 1. 题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示…
阅读更多...
图像处理-Ch6-彩色图像处理

图像处理-Ch6-彩色图像处理

Ch6 彩色图像处理 无广告更易阅读&#xff0c;个人博客点此进入<– 文章目录 Ch6 彩色图像处理彩色基础彩色模型(Color models)RGB(red, green, blue)CMY & CMYK(cyan, magenta, yellow/and black)HSI(hue, saturation, intensity)HSV(hue, saturation, value) 颜色空…
阅读更多...
03.HTTPS的实现原理-HTTPS的工作流程

03.HTTPS的实现原理-HTTPS的工作流程

03.HTTPS的实现原理-HTTPS的工作流程 简介1. HTTPS的工作流程1.1. TCP的工作流程1.1.1. 三次握手的详细步骤1.1.2. 三次握手的作用 1.2. HTTPS的工作流程1.2.1. HTTPS与TCP的关系1.2.2. HTTPS的工作流程 2. 公钥和私钥的作用3. 对称密钥的生成和交换4. 对称加密和非对称加密的区…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023