根据老师文档和谷粒学院评论模块实现-附源码,思路,解决方案_谷粒学院评论功能_葡萄枸杞桂圆干的博客-CSDN博客完成对于评论模块
回看视频155级 首先完成nacos的注册
后serice_vod模块中调用service_ucenter模块中的方法完成熔断器
1.将生产者和消费者进行Nacos的注册
#nacos服务地址
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848
2.增加启动类注解
在生产者也就是接口提供者的启动类上增加注解 @EnableDiscoveryClient 服务发现
在消费中也就是接口的使用者的启动类上增加注解 @EnableFeignClients 服务调用
3.服务调用Feign
@FeignClient(name = "service-ucenter", fallback = UcenterClientImpl.class)
@Component
public interface VodComment {
@PostMapping("/educenter/ucenter/getInfoUc/{id}")
public UcenterMember getInfo(@PathVariable("id") String id);
@GetMapping("/educenter/ucenter/getMemberInfo")
public R getMemberInfo(HttpServletRequest request) ;
}
----------------------------------------------------------------------------
@Component
public class UcenterClientImpl implements VodComment {
@Override
public UcenterMember getInfo(String id) {
return null;
}
@Override
public R getMemberInfo(HttpServletRequest request) {
return null;
}
}注入Vomment可以调用service_ucenter模块中的方法完成对于用户信息获取
public class EduCommentController {
@Autowired
private EduCommentService commentService;
@Autowired
private VodComment vodComment;
//评论存储
@PostMapping("comment")
public R comment(@RequestBody EduComment comment, HttpServletRequest request) {
String memberId = JwtUtils.getMemberIdByJwtToken(request);
if (StringUtils.isEmpty(memberId)) {
return R.error().code(28004).message("请登录");
}
comment.setMemberId(memberId);
UcenterMember ucenterInfo = vodComment.getInfo(memberId);
comment.setNickname(ucenterInfo.getNickname());
comment.setAvatar(ucenterInfo.getAvatar());
commentService.save(comment);
return R.ok();
}
//对于评论的展示
@GetMapping("getCommentInfo/{page}/{limit}")
public R getCommentInfo(@PathVariable long page,@PathVariable long limit,String courseId){
Page<EduComment> commentPage = new Page<>(page,limit);
QueryWrapper<EduComment> wrapper = new QueryWrapper<>();
wrapper.orderByDesc("gmt_create");
wrapper.eq("course_id",courseId);
IPage<EduComment> iPage = commentService.page(commentPage, wrapper);
List<EduComment> records = iPage.getRecords();//当前页的记录
long total = iPage.getTotal();//总记录数字
Map map = new HashMap();
map.put("items",records);
map.put("total",total);
return R.ok().data(map);
}
comment.js
import request from '@/utils/request'
export default {
savecomment(comment) {
return request({
url: `/eduservice/educomment/comment`,
method: 'post',
data:comment
})
},
getCommontList(page,limit,courseId){
return request({
url:'/eduservice/educomment/getCommentInfo/'+page+"/"+limit,
method:'get',
params: {courseId}
})
}
}course 目录下的_id.vue
<template>
<div id="aCoursesList" class="bg-fa of">
<!-- /课程详情 开始 -->
<section class="container">
<section class="path-wrap txtOf hLh30">
<a href="#" title class="c-999 fsize14">首页</a>
\
<a href="#" title class="c-999 fsize14">{{
courseWebVo.subjectLevelOne
}}</a>
\
<span class="c-333 fsize14">{{ courseWebVo.subjectLevelTwo }}</span>
</section>
<div>
<article class="c-v-pic-wrap" style="height: 357px">
<section class="p-h-video-box" id="videoPlay">
<img
:src="courseWebVo.cover"
:alt="courseWebVo.title"
class="dis c-v-pic"
/>
</section>
</article>
<aside class="c-attr-wrap">
<section class="ml20 mr15">
<h2 class="hLh30 txtOf mt15">
<span class="c-fff fsize24">{{ courseWebVo.title }}</span>
</h2>
<section class="c-attr-jg">
<span class="c-fff">价格：</span>
<b class="c-yellow" style="font-size: 24px"
>￥{{ courseWebVo.price }}</b
>
</section>
<section class="c-attr-mt c-attr-undis">
<span class="c-fff fsize14"
>主讲： {{ courseWebVo.teacherName }} </span
>
</section>
<section class="c-attr-mt of">
<span class="ml10 vam">
<em class="icon18 scIcon"></em>
<a class="c-fff vam" title="收藏" href="#">收藏</a>
</span>
</section>
<section class="c-attr-mt">
<a href="#" title="立即观看" class="comm-btn c-btn-3">立即观看</a>
</section>
</section>
</aside>
<aside class="thr-attr-box">
<ol class="thr-attr-ol clearfix">
<li>
<p> </p>
<aside>
<span class="c-fff f-fM">购买数</span>
<br />
<h6 class="c-fff f-fM mt10">{{ courseWebVo.buyCount }}</h6>
</aside>
</li>
<li>
<p> </p>
<aside>
<span class="c-fff f-fM">课时数</span>
<br />
<h6 class="c-fff f-fM mt10">20</h6>
</aside>
</li>
<li>
<p> </p>
<aside>
<span class="c-fff f-fM">浏览数</span>
<br />
<h6 class="c-fff f-fM mt10">501</h6>
</aside>
</li>
</ol>
</aside>
<div class="clear"></div>
</div>
<!-- /课程封面介绍 -->
<div class="mt20 c-infor-box">
<article class="fl col-7">
<section class="mr30">
<div class="i-box">
<div>
<section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
<a name="c-i" class="current" title="课程详情">课程详情</a>
</section>
</div>
<article class="ml10 mr10 pt20">
<div>
<h6 class="c-i-content c-infor-title">
<span>课程介绍</span>
</h6>
<div class="course-txt-body-wrap">
<section class="course-txt-body">
<p v-html="courseWebVo.description">
{{ courseWebVo.description }}
</p>
</section>
</div>
</div>
<!-- /课程介绍 -->
<div class="mt50">
<h6 class="c-g-content c-infor-title">
<span>课程大纲</span>
</h6>
<section class="mt20">
<div class="lh-menu-wrap">
<menu id="lh-menu" class="lh-menu mt10 mr10">
<ul>
<!-- 文件目录 -->
<li
class="lh-menu-stair"
v-for="chapter in chapterVideoList"
:key="chapter.id"
>
<a
href="javascript: void(0)"
:title="chapter.title"
class="current-1"
>
<em class="lh-menu-i-1 icon18 mr10"></em
>{{ chapter.title }}
</a>
<ol class="lh-menu-ol" style="display: block">
<li
class="lh-menu-second ml30"
v-for="video in chapter.children"
:key="video.id"
>
<a
:href="'/player/' + video.videoSourceId"
target="_blank"
>
<span class="fr">
<i class="free-icon vam mr10">免费试听</i>
</span>
<em class="lh-menu-i-2 icon16 mr5"> </em
>{{ video.title }}
</a>
</li>
</ol>
</li>
</ul>
</menu>
</div>
</section>
</div>
<!-- /课程大纲 -->
</article>
</div>
</section>
</article>
<aside class="fl col-3">
<div class="i-box">
<div>
<section class="c-infor-tabTitle c-tab-title">
<a title href="javascript:void(0)">主讲讲师</a>
</section>
<section class="stud-act-list">
<ul style="height: auto">
<li>
<div class="u-face">
<a href="#">
<img
:src="courseWebVo.avatar"
width="50"
height="50"
alt
/>
</a>
</div>
<section class="hLh30 txtOf">
<a class="c-333 fsize16 fl" href="#">{{
courseWebVo.teacherName
}}</a>
</section>
<section class="hLh20 txtOf">
<span class="c-999">{{ courseWebVo.intro }}</span>
</section>
</li>
</ul>
</section>
</div>
</div>
</aside>
<div class="clear"></div>
</div>
</section>
<!-- /课程详情 结束 -->
<!--课程评论开始-->
<div class="mt50 commentHtml">
<div>
<h6 class="c-c-content c-infor-title" id="i-art-comment">
<span class="commentTitle">课程评论</span>
</h6>
<section class="lh-bj-list pr mt20 replyhtml">
<ul>
<li class="unBr">
<aside class="noter-pic">
<img
width="50"
height="50"
class="picImg"
src="~/assets/img/avatar-boy.gif"
/>
</aside>
<div class="of">
<section class="n-reply-wrap">
<fieldset>
<textarea
name=""
v-model="comment.content"
placeholder="输入您要评论的文字"
id="commentContent"
></textarea>
</fieldset>
<p class="of mt5 tar pl10 pr10">
<span class="fl"
><tt
class="c-red commentContentmeg"
style="display: none"
></tt
></span>
<input
type="button"
@click="addComment()"
value="回复"
class="lh-reply-btn"
/>
</p>
</section>
</div>
</li>
</ul>
</section>
<section class="">
<section class="question-list lh-bj-list pr">
<ul class="pr10">
<li v-for="(comment, index) in data.items" v-bind:key="index">
<aside class="noter-pic">
<img
width="50"
height="50"
class="picImg"
:src="comment.avatar"
/>
</aside>
<div class="of">
<span class="fl">
<font class="fsize12 c-blue"> {{ comment.nickname }}</font>
<font class="fsize12 c-999 ml5">评论：</font></span
>
</div>
<div class="noter-txt mt5">
<p>{{ comment.content }}</p>
</div>
<div class="of mt5">
<span class="fr"
><font class="fsize12 c-999 ml5">{{
comment.gmtCreate
}}</font></span
>
</div>
</li>
</ul>
</section>
</section>
<!-- 公共分页 开始 -->
<!-- 分页 使用element-ui疯转好的插件 -->
<el-pagination
:current-page="page"
:page-size="limit"
:total="total"
style="padding: 30px 0; text-align: center;"
layout="total, prev, pager, next, jumper"
@current-change="getCommon"
/>
<!-- 分页结束 -->
<!-- 公共分页 结束 -->
</div>
</div>
</div>
</template>
<script>
import courseApi from "@/api/course";
import cookie from 'js-cookie'
import commonApi from '@/api/comment'
export default {
asyncData({ params, error }) {
return courseApi.getCourseInfo(params.id).then((response) => {
return {
courseWebVo: response.data.data.courseWebVo,
chapterVideoList: response.data.data.chapterVideoList,
};
});
},
data() {
return{
courseWebVo:{},
chapterVideoList:{},
data:{},
comment:{
content:'',
courseId:''
},
courseId:'',
page:1,
limit:4,
total:0
}
},
created() {
this.courseId = this.$route.params.id
this.getCommon()
},
methods: {
getCommon(page=1){
this.page = page
console.log(page);
commonApi.getCommontList(this.page,this.limit,this.courseId)
.then(responce=>{
this.data = responce.data.data
this.total = responce.data.data.total
})
},
addComment(){
//1.先判断是否登录
var isLogin = cookie.get("guli_token")
if(!isLogin){
this.$message({
type:"info",
message:"请先登录"
})
this.$router.push({path:"/login"})
}
this.comment.courseId = this.$route.params.id
this.comment.teacherId = this.courseWebVo.teacherId
commonApi.savecomment(this.comment)
.then(responce=>{
if(responce.data.success){
this.$message({
message: "评论成功",
type: "success",
})
//清空
this.comment={}
//查询评论
this.getCommon()
}
})
}
},
};
</script>
3239
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
