评论功能

后端

  • controller，实现新增评论和分页查询评论，此时需要保存用户的id，可以通过JWT将token转化为id，在进行远程调用，查询用户的信息进行保存 

    1. @RestController
    2. @RequestMapping("/eduservice/edu-comment")
    3. @CrossOrigin
    4. public class EduCommentController {
    6.  @Autowired
    7.  private EduCommentService eduCommentService;
    9.  @Autowired
    10.  private CommentClient commentClient;
    12.  // 分页查询评论
    13.  @GetMapping("getPageComment/{currentPage}/{limit}/{courseId}")
    14.  public ResultEntity getPageEduComment(
    15.          @PathVariable long currentPage,
    16.          @PathVariable long limit,
    17.          @PathVariable(required = false) String courseId) {
    18.      Map<String, Object> map = eduCommentService.getPageComment(currentPage, limit, courseId);
    19.      return ResultEntity.ok().data(map);
    20.  }
    22.  // 保存评论
    23.  @PostMapping("saveComment")
    24.  public ResultEntity saveComment(@RequestBody EduComment eduComment, HttpServletRequest request) {
    25.      // 获取用户id
    26.      String memberId = JwtUtils.getMemberIdByJwtToken(request);
    27.      if (StringUtils.isEmpty(memberId)) {
    28.          return ResultEntity.error().message("请登录！");
    29.      }
    31.      // 调用ucenter的方法查询登录用户的信息
    32.      LoginInfoDO loginInfoDO = commentClient.getLoginInfoById(memberId);
    34.      BeanUtils.copyProperties(loginInfoDO, eduComment);
    35.      eduComment.setMemberId(memberId);
    37.      eduCommentService.save(eduComment);
    38.      return ResultEntity.ok();
    39.  }
    40. }

  • impl实现分页查询数据，注意封装分页显示的对象 

    1. public class EduCommentServiceImpl extends ServiceImpl<EduCommentMapper, EduComment> implements EduCommentService {
    3.  @Override
    4.  public Map<String, Object> getPageComment(long currentPage, long limit, String courseId) {
    5.      Page<EduComment> eduCommentPage = new Page<>(currentPage, limit);
    7.      QueryWrapper<EduComment> eduCommentQueryWrapper = new QueryWrapper<>();
    8.      eduCommentQueryWrapper.eq("course_id", courseId);
    9.      eduCommentQueryWrapper.orderByDesc("gmt_create");
    11.      baseMapper.selectPage(eduCommentPage, eduCommentQueryWrapper);
    13.      List<EduComment> eduCommentList = eduCommentPage.getRecords();
    15.      Map<String, Object> map = new HashMap<>();
    16.      map.put("items", eduCommentList);
    17.      map.put("current", eduCommentPage.getCurrent());
    18.      map.put("pages", eduCommentPage.getPages());
    19.      map.put("size", eduCommentPage.getSize());
    20.      map.put("total", eduCommentPage.getTotal());
    21.      map.put("hasNext", eduCommentPage.hasNext());
    22.      map.put("hasPrevious", eduCommentPage.hasPrevious());
    23.      return map;
    24.  }

  • 调用ucenter模块的代理接口，进行用户信息查询
    ```java @FeignClient(name = “service-ucenter”, fallback = com.atguigu.eduservice.client.CommentDegradeFeignClient.class) // 代理的微服务名 @Component public interface CommentClient {

    // 调用ucenter查询登录信息，注意全路径 @PostMapping(“/ucenterservice/ucenter-member/getLoginInfoById/{memberId}”) public LoginInfoDO getLoginInfoById(@PathVariable(“memberId”) String memberId);

}

  2. -  ucenter中的controller  
  3. ```java
  4. // 用户id获取用户信息
  5. @GetMapping("getLoginInfoById/{memberId}")
  6. public LoginInfoDO getLoginInfoById(@PathVariable String memberId) {
  7.     UcenterMember ucenterMember = ucenterMemberService.getById(memberId);
  8.     LoginInfoDO loginInfoDO = new LoginInfoDO();
  9.     BeanUtils.copyProperties(ucenterMember, loginInfoDO);
  10.     return loginInfoDO;
  11. }

  • 此时需要在common工程创建LoginInfo类，接口进行返回数据，可以使用ResultEntity，但取值不方便 

    1. @Data
    2. @ApiModel(value = "LoginInfo信息对象用于订单和评论", description = "传输LoginInfo信息")
    3. public class LoginInfoDO {
    4.  @ApiModelProperty(value = "手机号")
    5.  private String mobile;
    7.  @ApiModelProperty(value = "昵称")
    8.  private String nickname;
    10.  @ApiModelProperty(value = "性别 1 女，2 男")
    11.  private Integer sex;
    13.  @ApiModelProperty(value = "年龄")
    14.  private Integer age;
    16.  @ApiModelProperty(value = "用户头像")
    17.  private String avatar;
    18. }

前端

  • api中定义接口地址 

    1. import request from '@/utils/request'
    2. export default {
    3.  getPageComment(currentPage, limit, courseId) {
    4.      return request({
    5.          url: `/eduservice/edu-comment/getPageComment/${currentPage}/${limit}/${courseId}`,
    6.          method: 'get'
    7.      })
    8.  },
    9.  saveComment(comment) {
    10.      return request({
    11.          url: `/eduservice/edu-comment/saveComment`,
    12.          method: 'post',
    13.          data: comment
    14.      })
    15.  }
    16. }

  • data定义对象 

    1. comment: {
    2.      id: "",
    3.      content: "",
    4.      courseId: "",
    5.      teacherId: "",
    6.    },

  • 显示课程信息时将值赋值进去 

    1. // 显示课程信息
    2.  initCourse() {
    3.    courseApi.getFrontBaseCourse(this.courseId).then((response) => {
    4.      (this.course = response.data.data.courseVO),
    5.        (this.chapterList = response.data.data.chapterList),
    6.        (this.comment.teacherId = response.data.data.courseVO.teacherId);
    7.      this.comment.courseId = response.data.data.courseVO.id;
    8.    });

  • js调用方法 

    1. // 分页查询评论
    2.  initComment() {
    3.    commentApi
    4.      .getPageComment(this.page, this.limit, this.courseId)
    5.      .then((response) => {
    6.        this.data = response.data.data;
    7.      });
    8.  },
    9.  // 添加评论
    10.  addComment() {
    11.    commentApi
    12.      .saveComment(this.comment)
    13.      .then((response) => {
    14.        if (response.data.success) {
    15.          // 评论置空，防止下次没清空
    16.          this.comment.content = "";
    17.          this.initComment();
    18.        }
    19.      })
    20.      .catch((error) => {
    21.        this.$message({
    22.          type: "error",
    23.          message: "评论失败！",
    24.        });
    25.      });
    26.  },

  • 页面显示 

    1. <div class="mt50 commentHtml">
    2.    <div>
    3.      <h6 class="c-c-content c-infor-title" id="i-art-comment">
    4.        <span class="commentTitle">课程评论</span>
    5.      </h6>
    6.      <section class="lh-bj-list pr mt20 replyhtml">
    7.        <ul>
    8.          <li class="unBr">
    9.            <aside class="noter-pic">
    10.              <img
    11.                width="50"
    12.                height="50"
    13.                class="picImg"
    14.                src="~/assets/img/avatar-boy.gif"
    15.              />
    16.            </aside>
    17.            <div class="of">
    18.              <section class="n-reply-wrap">
    19.                <fieldset>
    20.                  <textarea
    21.                    name=""
    22.                    v-model="comment.content"
    23.                    placeholder="输入您要评论的文字"
    24.                    id="commentContent"
    25.                  ></textarea>
    26.                </fieldset>
    27.                <p class="of mt5 tar pl10 pr10">
    28.                  <span class="fl"
    29.                    ><tt
    30.                      class="c-red commentContentmeg"
    31.                      style="display: none"
    32.                    ></tt
    33.                  ></span>
    34.                  <input
    35.                    type="button"
    36.                    @click="addComment()"
    37.                    value="回复"
    38.                    class="lh-reply-btn"
    39.                  />
    40.                </p>
    41.              </section>
    42.            </div>
    43.          </li>
    44.        </ul>
    45.      </section>
    46.      <section class="">
    47.        <section class="question-list lh-bj-list pr">
    48.          <ul class="pr10">
    49.            <li v-for="(comment, index) in data.items" v-bind:key="index">
    50.              <aside class="noter-pic">
    51.                <img
    52.                  width="50"
    53.                  height="50"
    54.                  class="picImg"
    55.                  :src="comment.avatar"
    56.                />
    57.              </aside>
    58.              <div class="of">
    59.                <span class="fl">
    60.                  <font class="fsize12 c-blue"> {{ comment.nickname }}</font>
    61.                  <font class="fsize12 c-999 ml5">评论：</font></span
    62.                >
    63.              </div>
    64.              <div class="noter-txt mt5">
    65.                <p>{{ comment.content }}</p>
    66.              </div>
    67.              <div class="of mt5">
    68.                <span class="fr"
    69.                  ><font class="fsize12 c-999 ml5">{{
    70.                    comment.gmtCreate
    71.                  }}</font></span
    72.                >
    73.              </div>
    74.            </li>
    75.          </ul>
    76.        </section>
    77.      </section>
    79.      <!-- 公共分页 开始 -->
    80.      <div class="paging">
    81.        <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
    82.        <a
    83.          :class="{ undisable: !data.hasPrevious }"
    84.          href="#"
    85.          title="首页"
    86.          @click.prevent="gotoPage(1)"
    87.          >首</a
    88.        >
    89.        <a
    90.          :class="{ undisable: !data.hasPrevious }"
    91.          href="#"
    92.          title="前一页"
    93.          @click.prevent="gotoPage(data.current - 1)"
    94.          >&lt;</a
    95.        >
    96.        <a
    97.          v-for="page in data.pages"
    98.          :key="page"
    99.          :class="{
    100.            current: data.current == page,
    101.            undisable: data.current == page,
    102.          }"
    103.          :title="'第' + page + '页'"
    104.          href="#"
    105.          @click.prevent="gotoPage(page)"
    106.          >{{ page }}</a
    107.        >
    108.        <a
    109.          :class="{ undisable: !data.hasNext }"
    110.          href="#"
    111.          title="后一页"
    112.          @click.prevent="gotoPage(data.current + 1)"
    113.          >&gt;</a
    114.        >
    115.        <a
    116.          :class="{ undisable: !data.hasNext }"
    117.          href="#"
    118.          title="末页"
    119.          @click.prevent="gotoPage(data.pages)"
    120.          >末</a
    121.        >
    122.        <div class="clear" />
    123.      </div>
    124.      <!-- 公共分页 结束 -->