uniapp 微信小程序仿抖音评论区功能,支持展开收起

最近需要写一个评论区功能,所以打算仿照抖音做一个评论功能,支持展开和收起,

首先我们需要对功能做一个拆解,评论区功能,两个模块,一个是发表评论模块,一个是评论展示区。接下来对这两个模块进行详细描述。

使用到的技术 uniapp  uview2.0   文章最后我会贴上全部源码

一、发表评论模块

这个模块使用uview的两个组件来完成分别是u-popup弹出层和u-input输入框

下面是代码和展示图:

<u-popup :show="talkShow" mode="bottom" :customStyle="{'width':'100%','border-radius':'8rpx'}" @close="popclosed" @open="keyboard=true" :safeAreaInsetBottom="true"><view class="flex justify-between align-center" style="padding: 32rpx;"><div class="cirbOX padding-left padding-right-sm"><u--form labelPosition="left" :model="talkData" :rules="Rules" ref="Form" :borderBottom="false"><u-form-item label=" " prop="txt" :borderBottom="false" ref="item1" labelWidth='0'><u--input :focus="keyboard" v-model="talkData.txt" cursorSpacing="30" maxlength="100" :placeholder="pinglunHolder" border="none" clearable></u--input></u-form-item></u--form></div><div class="submitpinglun" @click="submit">发布</div></view></u-popup>

这部分需要注意两点

1.input组件的focus属性的设置:

在弹出层弹出的时候 在open事件中对input的focus属性布尔值设置为true,close时候设置focus为false。这样做的目的是在弹出输入评论的弹窗时会拉起小键盘,这个交互方式是模仿的微信朋友圈发布评论的形式。

2.input的cursorSpacing属性(输入框聚焦时底部与键盘的距离)设置:

当键盘拉起时候整个输入框因为设置了cursorSpacing="30",故整体页面会被小键盘托起。 当收起小键盘时候,输入框有回归到手机底部,因为我们popup设置的是底部的弹出层。这样是和微信朋友圈发布评论是对标的。

二、展示评论区的功能

这一部分我封装成了组件,因为需求的要求需要下拉加载评论故在组件外部循环一级评论,组件内部展示一级评论和二级评论,其中二级评论是在组件内部去循环,

循环一级评论的时候需要注意,因为后续要获取pinglun组件的实例,所以在ref的设置上面起初我按照for循环提供的index来拼的字符串,这也导致后续bug的出现埋下伏笔,所以我后续调整了,选择了id这个唯一值作为组件实例的ref名字,这个很关键!

<div v-for="(item,index) in onePagePinglunList" :key="item.id" class="margin-bottom"><pinglun :ref="`pinglun-${item.levelOneCommentVo.id}`" :caseIdData="caseId" :data="item" :indexxx="index" @comment="goComment" @noLogin="sonNoLogin"></pinglun></div>

组件代码:

<template><div><!-- 一级评论 --><div class="flex justify-start align-start margin-bottom-sm"><div class="margin-right-xs"><d-image :dSrc="onePageList.levelOneCommentVo.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx"></d-image></div><div class="flex-sub"><div class="flex justify-start align-center"><div class="name margin-right-sm">{{onePageList.levelOneCommentVo.userName}}</div><div class="zuozhe flex justify-center align-center" v-if="onePageList.levelOneCommentVo.belongAuthor===1">作者</div></div><div class="flex justify-between align-center" @click="goPinglun(1,onePageList.levelOneCommentVo.id,onePageList.levelOneCommentVo.userName,onePageList.levelOneCommentVo.id)"><div class="content flex-sub">{{onePageList.levelOneCommentVo.content}}</div><div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(1,'',onePageList.levelOneCommentVo.id)"><div class="margin-bottom-xs"><div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===0"><u-icon name="heart" color="#667286" size="34rpx"></u-icon></div><div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===1"><u-icon name="heart-fill" color="red" size="34rpx"></u-icon></div></div><div class="likeNum">{{onePageList.levelOneCommentVo.likeCount}}</div></div></div><div class="time">{{ $u.timeFrom(new Date(onePageList.levelOneCommentVo.createTime).getTime())}}</div></div></div><!-- 二级评论 --><div class="erpinglunBox" :style="{'height':`${pingjiaBoxMaxHeight}px`,'opacity':pinglunOpcity,}"><div class="pinglunDom"><div v-for="(item,index) in onePageList.twoLevelpinglun" :key="item.id" class="margin-bottom-sm"><div class="flex justify-start align-start"><div class="margin-right-xs"><d-image :dSrc="item.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx"></d-image></div><div class="flex-sub"><div class="flex justify-start align-center"><div class="name margin-right-sm">{{item.userName}}</div><div class="zuozhe flex justify-center align-center margin-right-sm" v-if="item.belongAuthor===1">作者</div><div class="name" v-if="item.isReplayTwoComment===1">回复 {{item.replayLevelTwoCommentUser.userName}}</div></div><div class="flex justify-between align-center" @click="goPinglun(2,item.id,item.userName,onePageList.levelOneCommentVo.id)"><div class="content flex-sub">{{item.content}}</div><div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(2,index,item.id)"><div class="margin-bottom-xs"><div v-show="item.isCurrentUserLike===0"><u-icon name="heart" color="#667286" size="34rpx"></u-icon></div><div v-show="item.isCurrentUserLike===1"><u-icon name="heart-fill" color="red" size="34rpx"></u-icon></div></div><div class="likeNum">{{item.likeCount}}</div></div></div><div class="time">{{ $u.timeFrom(new Date(item.createTime).getTime())}}</div></div></div></div></div></div><!-- 展开和收起按钮 --><div class="flex justify-start align-center" style="padding-left: 84rpx;"><div class="seeMore padding-top-sm padding-bottom flex align-center" v-if="onePageList.levelTwoCommentCount > 0&&params.current <= totalPage" @click="$u.throttle(getTwoLevelPinglun, 1000,true)"><div class="margin-right-xs">查看更多回复</div><u-icon name="arrow-down" color="#00875A" size="28rpx" :bold="true"></u-icon></div><div class="seeMore retract padding-top-sm padding-bottom margin-left flex justify-center align-center" v-if="params.current > 1" @click="$u.throttle(retract, 1000,true)"><div class="margin-right-xs">收起</div><u-icon name="arrow-up" color="#00875A" size="28rpx" :bold="true"></u-icon></div></div></div>
</template>

感觉唯一的难点在于因为展开收缩使用的过渡动画,大家应该都知道,想使用这个过渡必须设置有效值,也就是说比如我给高度写过渡动画,从一个高度到一个高度,都需要是具体的值,atuo这种被内容撑开的高度是不作数的。

这里拿高度,需要注意的是需要等待渲染完毕再去获取高度,不然拿到的值就是不准确的。

下面是我写的获取高度的函数。如果一个nexttick也获取不到准确高度,那么就再加个延时器,就差不多可以获取到准确高度了。

	updatHeight() {let that = thisthis.$nextTick(() => {// this.timer = setTimeout(() => {this.createSelectorQuery().select(".pinglunDom").boundingClientRect(function(rect) {// console.log(rect);that.pingjiaBoxMaxHeight = rect.heightthat.pinglunOpcity = 1}).exec();// }, 0)})},

还有一个需要注意的点,就是在一级评论发布之后,需要拿到所有pinglu组件的实例去调用这个方法,重置所有二级评论的高度。调用这个方法的前提也必须是一级评论的渲染完毕,不然还是不起作用

以下是代码:

this.$forceUpdate();this.$nextTick(() => {for (let i = 0; i < this.onePagePinglunList.length; i++) {this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].updatHeight() if (this.onePagePinglunList[i].twoLevelpinglun.length === 0) {this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].params.current = 1}}}) 

至此应该就没什么需要注意的地方了

可能也是第一次写这个功能,还有很多可以优化的地方。希望对各位有所帮助,接下来我把评论功能所有源码贴在下面。

因为我的评论功能是在案例详情里面的,所以有两个文件,一个是案例详情,一个就是封装的评论组件 

案例详情:

<template><div :style="{'padding-bottom':`${(safeAreaBottom*2)+144}`+'rpx'}"><div style="padding: 32rpx 32rpx 50rpx;"><div class="margin-bottom-sm txt-1">成功蜕变历程</div><div class="toplicheng flex justify-center align-center margin-bottom-sm"><div class="flex flex-direction align-center"><div class="flex align-center"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/caseDetailIcON2.png" dMode="aspectFit" dWidth="32rpx" dHeight="32rpx"></d-image><div class="toptxt1 margin-left-xs">体重</div></div><div class="toptxt2 margin-top-xs">{{topweightcha||0}}kg</div></div><div class="midBox flex flex-direction align-center"><div class="xmonth flex justify-center align-center margin-bottom-xs">逆糖3个月</div><div class="topshuxian"></div></div><div class="flex flex-direction align-center"><div class="flex align-center"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/caseDetailIcON1.png" dMode="aspectFit" dWidth="32rpx" dHeight="32rpx"></d-image><div class="toptxt1 margin-left-xs">空腹血糖</div></div><div class="toptxt2 margin-top-xs">{{topxuetangcha||0}}mmol/L</div></div></div><!-- 案例信息 --><div class="caseBox"><div class="case-head-box flex justify-between align-center"><div class="head-left-box flex"><div class="avatarBox"><u-avatar :src="detailData.userInfoVo.userAvatar || 'https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/healthy.png'" size="72rpx" mode="aspectFill"></u-avatar></div><div><div class="txt-1 margin-bottom-xs">{{detailData.userInfoVo.userName||'暂无昵称'}}</div><div class="txt-2">{{detailData.isExistServicePack?detailData.servicePackVo.servicePackName:'暂无服务包'}}</div></div></div><div class=" flex justify-center align-center" style="width: 80rpx;height: 80rpx;"><u-icon name="share-square" color="" size="34rpx"></u-icon></div></div><div class="caseBoxContentBox"><u-row justify="space-start"><u-col span="4"><view class="txt-4 margin-bottom">项目</view></u-col><u-col span="4"><view class="txt-4 margin-bottom">管理前</view></u-col><u-col span="4"><view class="txt-4 margin-bottom">管理后</view></u-col></u-row><u-row justify="space-start"><u-col span="4"><view><div class="txt-3">服务时间</div></view></u-col><u-col span="4"><view><div class="startTime">{{detailData.managementInfoVo.managementStartTime||'--'}}</div></view></u-col><u-col span="4"><view><div class="endTime">{{detailData.managementInfoVo.managementEndTime||'--'}}</div></view></u-col></u-row><div class="line"></div><u-row justify="space-start"><u-col span="4"><view><div class="txt-3">体重</div><div class="txt-7">kg</div></view></u-col><u-col span="4"><view><div class="yellow-box flex justify-center align-center" style="position: relative;">{{detailData.managementInfoVo.beforeManagementWeight||'--'}}<div class="jiantou" v-if="detailData.managementInfoVo.beforeManagementFastingSugarBloodTrend===3"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/redUp.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx"></d-image></div><div class="jiantou" v-else-if="detailData.managementInfoVo.beforeManagementFastingSugarBloodTrend===1"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/greenDown.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx"></d-image></div></div></view></u-col><u-col span="4"><view><div class="green-box flex justify-center align-center">{{detailData.managementInfoVo.afterManagementWeight||'--'}}</div></view></u-col></u-row><div class="line"></div><u-row justify="space-start"><u-col span="4"><view><div class="txt-3">空腹血糖</div><div class="txt-7">mmol/L</div></view></u-col><u-col span="4"><view><div class="yellow-box flex justify-center align-center" style="position: relative;">{{detailData.managementInfoVo.beforeManagementFastingSugarBlood||'--'}}<div class="jiantou"v-if="detailData.managementInfoVo.beforeManagementWeightTrend===3||detailData.managementInfoVo.beforeManagementWeightTrend===4||detailData.managementInfoVo.beforeManagementWeightTrend===5"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/redUp.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx"></d-image></div><div class="jiantou" v-else-if="detailData.managementInfoVo.beforeManagementWeightTrend===1"><d-image dSrc="https://tj-data.oss-cn-hangzhou.aliyuncs.com/uploadFiles/wx/mzkHomeland/greenDown.png" dMode="aspectFit" dWidth="24rpx" dHeight="24rpx"></d-image></div></div></view></u-col><u-col span="4"><view><div class="green-box flex justify-center align-center">{{detailData.managementInfoVo.afterManagementFastingSugarBlood||'--'}}</div></view></u-col></u-row><div class="line"></div><u-row justify="space-start"><u-col span="4"><view><div class="txt-3">用药数量</div></view></u-col><u-col span="4"><view><div class="yellow-box flex justify-center align-center">{{detailData.managementInfoVo.beforeManagementMedicationCount||'0'}}</div></view></u-col><u-col span="4"><view><div class="green-box flex justify-center align-center">{{detailData.managementInfoVo.afterManagementMedicationCount||'0'}}</div></view></u-col></u-row><div class="line"></div><u-row justify="space-start"><u-col span="4"><view><div class="txt-3">对比照片</div></view></u-col><u-col span="4"><view><div class="margin-bottom-sm"><div><div v-if="detailData.managementInfoVo.beforeManagementImagePhoto===''" class="noPicBox flex justify-center align-center">暂无</div><div v-else><d-image :dSrc="detailData.managementInfoVo.beforeManagementImagePhoto" dMode="aspectFit" dWidth="140rpx" dHeight="140rpx"></d-image></div></div></div></view></u-col><u-col span="4"><view><div class="margin-bottom-sm"><div><div v-if="detailData.managementInfoVo.afterManagementImagePhoto===''" class="noPicBox flex justify-center align-center">暂无</div><div v-else><d-image :dSrc="detailData.managementInfoVo.afterManagementImagePhoto" dMode="aspectFit" dWidth="140rpx" dHeight="140rpx"></d-image></div></div></div></view></u-col></u-row></div></div><!-- 评价 --><div class="evaluateBox margin-top-sm margin-bottom-sm"><div class="margin-bottom-sm txt-1">健康评价</div><div class="margin-top-sm flex flex-wrap pingjiaBox"><view class="pingjiaDom"><div v-for="(item,index) in defaultPingjia" :key="item.id" class="flex "><div class="tag margin-right-sm flex align-center margin-bottom-sm" :style="{'background':item.styleBg}"><div style="height: 100%; " class="flex align-start margin-right-sm"><d-image :dSrc="item.styleIcon" dMode="aspectFit" dWidth="26rpx" dHeight="26rpx"></d-image></div><text :style="{'max-width': '544rpx','word-break': 'break-all','color':item.styleColor}">{{item.content}}</text></div></div></view></div></div><!-- echart --><!-- 	<div class="margin-bottom-sm" style="position: relative;overflow: hidden;" v-for="(item,index) in echartList" :key="index"><detailChart :echarType="item"></detailChart></div> --></div><!-- 评论 --><div style="padding: 0 32rpx 56rpx;background: #FFFFFF;"><div class="flex justify-between align-center"><div class="pingluntitle">{{detailData.interActionVo.commentCount||'0'}} 评论</div><div></div></div><div v-for="(item,index) in onePagePinglunList" :key="item.id" class="margin-bottom"><pinglun :ref="`pinglun-${item.levelOneCommentVo.id}`" :caseIdData="caseId" :data="item" :indexxx="index" @comment="goComment" @noLogin="sonNoLogin" @shouqi="shouqiTwoPinglun"></pinglun></div></div><div class="contentB">- 让每个人都能从知识中获得健康 -</div><!-- 底部评价评论点赞收藏 --><div class="pingjialikeBox flex justify-between align-center" :style="{'bottom':`${(safeAreaBottom*2)}`+'rpx'}"><div class="talksomething flex justify-center align-center" @click="openPinglun">说点什么吧</div><div class="flex justify-around" style="width: 428rpx;"><div class="flex align-center btn" @click="$u.throttle(clickLike, 500,true)"><div v-show="detailData.interActionVo.isCurrentUserLike===0"><u-icon name="heart" color="" size="34rpx"></u-icon></div><div v-show="detailData.interActionVo.isCurrentUserLike===1"><u-icon name="heart-fill" color="red" size="34rpx"></u-icon></div><text class="margin-left-xs">{{detailData.interActionVo.likeCount||'0'}}</text></div><div class="flex align-center btn" @click="$u.throttle(clickCollect, 500,true)"><div v-show="detailData.interActionVo.isCurrentUserCollection===0"><u-icon name="star" color="" size="34rpx"></u-icon></div><div v-show="detailData.interActionVo.isCurrentUserCollection===1"><u-icon name="star-fill" color="#ff991f" size="34rpx"></u-icon></div><text class="margin-left-xs">{{detailData.interActionVo.collectionCount||'0'}}</text></div><div class=" flex align-center btn"><u-icon name="chat" color="" size="34rpx"></u-icon><text class="margin-left-xs">{{detailData.interActionVo.commentCount||'0'}}</text></div></div></div><u-popup :show="talkShow" mode="bottom" :customStyle="{'width':'100%','border-radius':'8rpx'}" @close="popclosed" @open="keyboard=true" :safeAreaInsetBottom="true"><view class="flex justify-between align-center" style="padding: 32rpx;"><div class="cirbOX padding-left padding-right-sm"><u--form labelPosition="left" :model="talkData" :rules="Rules" ref="Form" :borderBottom="false"><u-form-item label=" " prop="txt" :borderBottom="false" ref="item1" labelWidth='0'><u--input :focus="keyboard" v-model="talkData.txt" cursorSpacing="30" maxlength="100" :placeholder="pinglunHolder" border="none" clearable></u--input></u-form-item></u--form></div><div class="submitpinglun" @click="submit">发布</div></view></u-popup><u-modal title="确认登录" :show="show1" width="608rpx" content="为了您的良好体验,建议您先确认登录 ~" :closeOnClickOverlay="true" @close="show1=false"><u-button slot="confirmButton" text="确定" shape="circle" color="#00875A" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" :customStyle="{'width':'264rpx','height':'68rpx'}"></u-button></u-modal><u-toast ref="uToast"></u-toast></div>
</template><script>import { mapState } from 'vuex';import detailChart from "./detailEchart.vue"import pinglun from "./pinglun.vue"import { sub } from '@/utils/tool.js'import { getDetail, getCurveModule, collection, like, savecomment, getLevelOnePage } from '@/api/case/case.js'export default {data() {return {show1: false,keyboard: false,pinglunHolder: '说点什么吧',Rules: {'txt': [{required: true,type: 'any',message: '评论不能为空',trigger: ['blur', 'change']},{validator: (rule, value, callback) => {return value.length < 100;},message: '您评论的字数超过100,请调整您的字数~',trigger: ['blur', 'change']}],},talkShow: false,talkData: { //弹框form值 评论txt: ""},caseId: null,echartList: [],detailData: {},defaultPingjia: [],topweightcha: null,topxuetangcha: null,pinglunForm: { //接口参数caseId: null,caseLevelOneCommentId: '', //对一级评论进行回复时不可为空caseLevelTwoCommentId: '', //对二级评论进行回复时不可为空content: null,userId: null,},params: {current: 1,limit: 5,likeSort: 2, //点赞数排序 1:升序 2:降序timeSort: 2, //创建时间排序 1:升序 2:降序},totalPage: 1,onePagePinglunList: [],pinglunType: null, //判断用户评论的类型是案例评论(3)还是一级评论(1)还是二级评论(2)erpinglunIndex: 0, //暂存二级评论发送给父级组件给的一级评论的index}},components: { detailChart, pinglun },computed: {...mapState(["hasLogin", "safeAreaBottom", "userInfo", ])},// 发送给朋友onShareAppMessage(res) {return {title: '妙智健康案例',path: `/pages-caseStory/caseDetail/index?caseId=${this.caseId}&title=${this.detailData.userInfoVo.userName}`}},//分享到朋友圈onShareTimeline(res) {return {title: '妙智健康案例',query: `caseId=${this.caseId}&title=${this.detailData.userInfoVo.userName}`,path: `/pages-caseStory/caseDetail/index` //自定义路径拼参数会导致接收参数会失败}},onReady() {},onLoad(option) {this.$refs.Form.setRules(this.Rules)this.caseId = option?.caseIduni.setNavigationBarTitle({title: `${option.title||''}案例`});this.getdetailData()this.getLevelOnePageData()},onUnload() {// this.$store.commit('set_caseShareEchartPicList', [])},onShow() {},methods: {sub,async getPhoneNumber(e) {// console.log("获取手机号code", e) //获取手机号已经不需要先进行wx.login(最新文档)if (!e.detail.code) {uni.showToast({title: '登录需要获取您的手机号',icon: 'none',duration: 2500})return}let resss = await this.$store.dispatch("loginFn", e) //能同步拿到vux中mutaion的resolve,然后给fourDataNum赋值(登录后数据更新)console.log(resss);if (resss.state === 1) { //登录成功this.show1 = false}},async getdetailData() {uni.showLoading({title: '加载中...'})try {let res = await getDetail({caseId: this.caseId,userId: this.hasLogin ? this.userInfo?.userId : ''})let echarRes = await getCurveModule({caseId: this.caseId,})if (res.state === 1) {this.detailData = res.contentthis.defaultPingjia = res.content.personnelEvaluationVoListthis.topweightcha = this.sub(this.detailData.managementInfoVo.afterManagementWeight, this.detailData.managementInfoVo.beforeManagementWeight)this.topxuetangcha = this.sub(this.detailData.managementInfoVo.afterManagementFastingSugarBlood, this.detailData.managementInfoVo.beforeManagementFastingSugarBlood)}if (echarRes.state === 1) {this.echartList = echarRes.content.map(item => {let obj = {title: item.caseCurveType === 1 ? '硅基' : (item.caseCurveType === 2 ? "微策" : "体重"),defaultTime: item.caseCurveType === 1 ? item.curveStartDate : [item.curveStartDate, item.curveEndDate],userId: res.content.userInfoVo.userId}return obj})}uni.hideLoading();} catch (e) {uni.hideLoading();uni.$u.toast(e)}},async clickLike(item, index) {if (!this.hasLogin) {this.show1 = truereturn}try {let res = await like({userId: this.userInfo?.userId,caseId: this.caseId,})if (res.state === 1) {if (this.detailData.interActionVo.isCurrentUserLike === 1) {this.detailData.interActionVo.isCurrentUserLike = 0this.detailData.interActionVo.likeCount--} else if (this.detailData.interActionVo.isCurrentUserLike === 0) {this.detailData.interActionVo.isCurrentUserLike = 1this.detailData.interActionVo.likeCount++}}} catch (e) {uni.$u.toast(e)}},async clickCollect(item) {if (!this.hasLogin) {this.show1 = truereturn}try {let res = await collection({userId: this.userInfo?.userId,caseId: this.caseId,})if (res.state === 1) {if (this.detailData.interActionVo.isCurrentUserCollection === 1) {this.detailData.interActionVo.isCurrentUserCollection = 0this.detailData.interActionVo.collectionCount--} else if (this.detailData.interActionVo.isCurrentUserCollection === 0) {this.detailData.interActionVo.isCurrentUserCollection = 1this.detailData.interActionVo.collectionCount++}}} catch (e) {uni.$u.toast(e)}},popclosed() {this.talkData.txt = ''this.keyboard = falsethis.talkShow = falseconsole.log(this.keyboard);},async getLevelOnePageData() {uni.showLoading({title: '加载中...'})try {let res = await getLevelOnePage({ userId: this.hasLogin ? this.userInfo?.userId : '', caseId: Number(this.caseId), ...this.params })if (res.state === 1) {for (let i = 0; i < res.content.records.length; i++) {res.content.records[i].twoLevelpinglun = []if (this.onePagePinglunList.some(item => item.levelOneCommentVo.id === res.content.records[i].levelOneCommentVo.id)) { //删除重复项res.content.records.splice(i, 1)}}this.onePagePinglunList = [...this.onePagePinglunList, ...res.content.records]this.totalPage = Math.ceil(res.content.total / this.params.limit) //总页数=总数量/每页数量}uni.hideLoading();} catch (e) {uni.hideLoading();uni.$u.toast(e)}},openPinglun() {if (!this.hasLogin) {this.show1 = truereturn}this.pinglunType = 3 //案例评论this.pinglunHolder = '说点什么吧'this.pinglunForm.caseLevelOneCommentId = '' //不回复一二级评论时候置空该字段this.pinglunForm.caseLevelTwoCommentId = '' //不回复一二级评论时候置空该字段this.talkShow = true// this.keyboard = true},goComment(e) { //处理回复一级二级评论  案例的顶级评论在openPinglun()函数中console.log(e);this.pinglunType = e.type //评论类型console.log('this.pinglunType', this.pinglunType);if (e.type === 1) { //一级评论this.pinglunForm.caseLevelOneCommentId = e.idthis.erpinglunIndex = e.indexthis.pinglunHolder = `回复 @${e.replyName}`} else if (e.type === 2) { //二级评论this.pinglunForm.caseLevelTwoCommentId = e.idthis.erpinglunIndex = e.indexthis.pinglunHolder = `回复 @${e.replyName}`}console.log("点击的item", this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList);this.talkShow = true// this.keyboard = trueconsole.log(this.keyboard);},async submit() {this.pinglunForm.userId = this.userInfo.userIdthis.pinglunForm.content = this.talkData.txtthis.pinglunForm.caseId = this.caseId// let form = {// 	caseId: this.caseId,// 	caseLevelOneCommentId: '', //对一级评论进行回复时不可为空// 	caseLevelTwoCommentId: '', //对二级评论进行回复时不可为空// 	content: this.talkData.txt,// 	userId: this.userInfo.userId,// }try {let res = await savecomment(this.pinglunForm)if (res.state === 1) {if (this.pinglunType === 3) { //案例评论this.onePagePinglunList.unshift({twoLevelpinglun: [],...res.content.caseCommentHomeVo})this.$forceUpdate();this.$nextTick(() => {for (let i = 0; i < this.onePagePinglunList.length; i++) {this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].updatHeight() //重置子组件内部height 不管新增一级还是二级都需要全部重置高度不然会出现bugif (this.onePagePinglunList[i].twoLevelpinglun.length === 0) {this.$refs[`pinglun-${this.onePagePinglunList[i].levelOneCommentVo.id}`][0].params.current = 1}}console.log(this.$refs[`pinglun-${127}`][0].onePageList);})this.$forceUpdate();} else if (this.pinglunType === 1 || this.pinglunType === 2) { //回复一级评论或二级评论  push完需要注意的是在获取分页数据时候去重,因为这个push操作是模拟更新数据,后端并不知晓所以后端未做去重console.log(this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglun);this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglun.push({...res.content.caseLevelTwoCommentVo})console.log(this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglun);let indxx;for (let i = 0; i < this.onePagePinglunList.length; i++) {if (this.onePagePinglunList[i].levelOneCommentVo.id === this.erpinglunIndex) {indxx = ibreak}}// 目的是防止发表一级评论之后父级向下重新注入数据,会触发pinglun组件内部的watch,导致会重置组件内部的twoLevelpinglun为[],this.onePagePinglunList[indxx].twoLevelpinglun = this.$refs[`pinglun-${this.erpinglunIndex}`][0].onePageList.twoLevelpinglunthis.onePagePinglunList[indxx].levelTwoCommentCount++this.$refs[`pinglun-${this.erpinglunIndex}`][0].updatHeight() //重置子组件内部height}this.talkData.txt = '' //重置评论this.keyboard = false //自动聚焦设为falsethis.talkShow = false //关闭弹窗this.updatePinglunNum() //更新评论数量console.log(this.keyboard);this.$refs.uToast.show({type: 'success',message: "已发送评论~",duration: 1200,})}} catch (e) {uni.$u.toast(e)}},sonNoLogin(e) {console.log(e);if (!this.hasLogin) {this.show1 = truereturn}},async updatePinglunNum() {try {let res = await getDetail({caseId: this.caseId,userId: this.hasLogin ? this.userInfo?.userId : ''})if (res.state === 1) {this.detailData = res.content}} catch (e) {uni.$u.toast(e)}},//因为每次发表二级评论都会往父级的twoLevelpinglun添加属性,也就是submit函数里面的565行代码,会导致一个bug 就是发布二级评论后,// 因为同时给父级也赋值了,故收起二级评论后,再发表一级评论,重置了了渲染,会将父级被赋值的twoLevelpinglun同步到二级评论的twoLevelpinglun,相当于之前收起操作白重置了twoLevelpinglunshouqiTwoPinglun(index) {let indxx;for (let i = 0; i < this.onePagePinglunList.length; i++) {if (this.onePagePinglunList[i].levelOneCommentVo.id === index) {indxx = ibreak}}this.onePagePinglunList[indxx].twoLevelpinglun = []},},// 上拉加载async onReachBottom() {if (this.params.current > this.totalPage) {this.$refs.uToast.show({type: 'warning',message: "已经到底啦~",duration: 1200,})return}this.params.current += 1await this.getLevelOnePageData()uni.stopPullDownRefresh() //停止上拉加载},// 下拉刷新触发async onPullDownRefresh() {this.params.current = 1 //重置页码this.onePagePinglunList = []await this.getLevelOnePageData()this.$refs.uToast.show({type: 'success',message: "刷新成功",duration: 1200,})uni.stopPullDownRefresh() //停止下拉刷新},}
</script><style lang="scss" scoped>@import '@/pages-caseStory/style/caseCommon.scss';.pingluntitle {font-size: 28rpx;font-family: PingFangSC;color: #1F3253;height: 90rpx;line-height: 90rpx;}.contentB {margin: 42rpx 0;font-size: 24rpx;font-weight: 400;color: #667286;text-align: center;}.pingjialikeBox {padding: 32rpx;width: 100%;height: 144rpx;background: #FFFFFF;position: fixed;left: 0;.btn {height: 70rpx;width: 78rpx;}}.toplicheng {height: 160rpx;background: linear-gradient(47deg, rgba(23, 144, 109, 0.84) 0%, #5DC063 100%);border-radius: 12rpx;}.topshuxian {width: 1rpx;height: 80rpx;opacity: 0.5;border: 2rpx solid #FFFFFF;}.xmonth {width: 156rpx;height: 47rpx;background: #FFFFFF;border-radius: 0rpx 0rpx 14rpx 14rpx;opacity: 0.8;font-size: 24rpx;font-weight: 400;color: #00875A;}.toptxt1 {font-size: 28rpx;font-weight: 400;color: #FFFFFF;}.toptxt2 {font-size: 36rpx;font-weight: bold;color: #E2FFF5;}.midBox {width: 156rpx;height: 160rpx;margin-left: 70rpx;margin-right: 23rpx;}.noPicBox {width: 140rpx;height: 140rpx;background: #E7EFF6;}.jiantou {position: absolute;top: 0;right: 0;}.evaluateBox {background: #FFFFFF;border-radius: 12rpx;padding: 40rpx 32rpx 78rpx;.tag {background: #FFF6E9;border-radius: 30rpx;padding: 20rpx 30rpx 20rpx 20rpx;vertical-align: center;}}.talksomething {width: 248rpx;height: 80rpx;background: #F4F5F7;border-radius: 40rpx;font-size: 28rpx;font-weight: 400;color: #697588;}.cirbOX {width: 600rpx;height: 80rpx;background: #F4F5F7;border-radius: 40rpx;}.submitpinglun {height: 80rpx;width: 64rpx;font-size: 32rpx;font-weight: 500;color: #00875A;line-height: 80rpx;}
</style>

pinglun组件:

<template><div><!-- 一级评论 --><div class="flex justify-start align-start margin-bottom-sm"><div class="margin-right-xs"><d-image :dSrc="onePageList.levelOneCommentVo.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx"></d-image></div><div class="flex-sub"><div class="flex justify-start align-center"><div class="name margin-right-sm">{{onePageList.levelOneCommentVo.userName}}</div><div class="zuozhe flex justify-center align-center" v-if="onePageList.levelOneCommentVo.belongAuthor===1">作者</div></div><div class="flex justify-between align-center" @click="goPinglun(1,onePageList.levelOneCommentVo.id,onePageList.levelOneCommentVo.userName,onePageList.levelOneCommentVo.id)"><div class="content flex-sub">{{onePageList.levelOneCommentVo.content}}</div><div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(1,'',onePageList.levelOneCommentVo.id)"><div class="margin-bottom-xs"><div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===0"><u-icon name="heart" color="#667286" size="34rpx"></u-icon></div><div v-show="onePageList.levelOneCommentVo.isCurrentUserLike===1"><u-icon name="heart-fill" color="red" size="34rpx"></u-icon></div></div><div class="likeNum">{{onePageList.levelOneCommentVo.likeCount}}</div></div></div><div class="time">{{ $u.timeFrom(new Date(onePageList.levelOneCommentVo.createTime).getTime())}}</div></div></div><!-- 二级评论 --><div class="erpinglunBox" :style="{'height':`${pingjiaBoxMaxHeight}px`,'opacity':pinglunOpcity,}"><div class="pinglunDom"><div v-for="(item,index) in onePageList.twoLevelpinglun" :key="item.id" class="margin-bottom-sm"><div class="flex justify-start align-start"><div class="margin-right-xs"><d-image :dSrc="item.userAvatar" dMode="aspectFit" dWidth="72rpx" dHeight="72rpx"></d-image></div><div class="flex-sub"><div class="flex justify-start align-center"><div class="name margin-right-sm">{{item.userName}}</div><div class="zuozhe flex justify-center align-center margin-right-sm" v-if="item.belongAuthor===1">作者</div><div class="name" v-if="item.isReplayTwoComment===1">回复 {{item.replayLevelTwoCommentUser.userName}}</div></div><div class="flex justify-between align-center" @click="goPinglun(2,item.id,item.userName,onePageList.levelOneCommentVo.id)"><div class="content flex-sub">{{item.content}}</div><div class="flex flex-direction align-center" style="width: 68rpx;" @click.stop="likepinglun(2,index,item.id)"><div class="margin-bottom-xs"><div v-show="item.isCurrentUserLike===0"><u-icon name="heart" color="#667286" size="34rpx"></u-icon></div><div v-show="item.isCurrentUserLike===1"><u-icon name="heart-fill" color="red" size="34rpx"></u-icon></div></div><div class="likeNum">{{item.likeCount}}</div></div></div><div class="time">{{ $u.timeFrom(new Date(item.createTime).getTime())}}</div></div></div></div></div></div><!-- 展开和收起按钮 --><div class="flex justify-start align-center" style="padding-left: 84rpx;"><div class="seeMore padding-top-sm padding-bottom flex align-center" v-if="onePageList.levelTwoCommentCount > 0&&params.current <= totalPage" @click="$u.throttle(getTwoLevelPinglun, 1000,true)"><div class="margin-right-xs">查看更多回复</div><u-icon name="arrow-down" color="#00875A" size="28rpx" :bold="true"></u-icon></div><div class="seeMore retract padding-top-sm padding-bottom margin-left flex justify-center align-center" v-if="params.current > 1" @click="$u.throttle(retract, 1000,true)"><div class="margin-right-xs">收起</div><u-icon name="arrow-up" color="#00875A" size="28rpx" :bold="true"></u-icon></div></div></div>
</template><script>import { mapState } from 'vuex';import { commentlike, getLevelOnePage, getLevelTwoPage } from '@/api/case/case.js'export default {data() {return {caseId: null,indexxxx: null, //一级评论的indexparams: {current: 1,limit: 5,timeSort: 1, //创建时间排序 1:升序 2:降序},totalPage: 1,onePageList: {},pingjiaBoxMaxHeight: 0,pinglunOpcity: 0,timer: null,timer1: null,}},props: {caseIdData: {type: Number,// 定义是否必须传required: true,// 定义默认值default: 0},data: {type: Object,// 定义是否必须传required: true,// 定义默认值default: {}},indexxx: {type: Number,// 定义是否必须传required: true,// 定义默认值default: 0}},watch: {caseIdData: {immediate: true,handler(val) {this.caseId = val;}},data: {immediate: true,handler(val) {this.onePageList = val;}},indexxx: {immediate: true,handler(val) {this.indexxxx = val;}}},components: {},computed: {...mapState(["hasLogin", "userInfo"])},mounted() {},beforeDestroy() {clearTimeout(this.timer)clearTimeout(this.timer1)},methods: {async likepinglun(type, index, id) {if (!this.hasLogin) {this.$emit('noLogin', '一二级评论点赞未登录')return}let form = {};if (type === 1) {form.caseLevelOneCommentId = id} else if (type === 2) {form.caseLevelTwoCommentId = id}try {let res = await commentlike({ ...form, userId: this.userInfo?.userId })if (res.state === 1) { //如果接口回调成功if (type === 1) { //如果点击的是一级评论的点赞if (this.onePageList.levelOneCommentVo.isCurrentUserLike === 0) { //判断点赞之前是0还是1 然后取反  并且对应点赞数量同步加减this.onePageList.levelOneCommentVo.isCurrentUserLike = 1this.onePageList.levelOneCommentVo.likeCount++} else if (this.onePageList.levelOneCommentVo.isCurrentUserLike === 1) {this.onePageList.levelOneCommentVo.isCurrentUserLike = 0this.onePageList.levelOneCommentVo.likeCount--}} else if (type === 2) { //如果点击的是二级评论的点赞if (this.onePageList.twoLevelpinglun[index].isCurrentUserLike === 0) {this.onePageList.twoLevelpinglun[index].isCurrentUserLike = 1this.onePageList.twoLevelpinglun[index].likeCount++} else if (this.onePageList.twoLevelpinglun[index].isCurrentUserLike === 1) {this.onePageList.twoLevelpinglun[index].isCurrentUserLike = 0this.onePageList.twoLevelpinglun[index].likeCount--}}}} catch (e) {uni.$u.toast(e)}},goPinglun(e, id, name, indexx) {if (e === 1) { //一级评论this.$emit('comment', {type: e,id: id,// index: this.indexxxx,index: indexx,replyName: name, //点击的谁的评论进行回复,用于在输入框的placeholder回显})} else if (e === 2) { //二级评论this.$emit('comment', {type: e,id: id,// index: this.indexxxx,index: indexx,replyName: name, //点击的谁的评论进行回复,用于在输入框的placeholder回显})}},async getTwoLevelPinglun() {try {let res = await getLevelTwoPage({ userId: this.hasLogin ? this.userInfo?.userId : '', caseLevelOneCommentId: this.onePageList.levelOneCommentVo.id, ...this.params })if (res.state === 1) {for (let i = 0; i < res.content.records.length; i++) {res.content.records[i].twoLevelpinglun = []if (this.onePageList.twoLevelpinglun.some(item => item.id === res.content.records[i].id)) { //删除重复项res.content.records.splice(i, 1)console.log("发现重复项,删除他!!!");}}this.onePageList.twoLevelpinglun = [...this.onePageList.twoLevelpinglun, ...res.content.records]this.totalPage = Math.ceil(res.content.total / this.params.limit) //总页数=总数量/每页数量this.params.current += 1this.updatHeight()}} catch (e) {uni.$u.toast(e)}},retract() {this.pingjiaBoxMaxHeight = 0this.pinglunOpcity = 0this.params.current = 1this.onePageList.twoLevelpinglun = []this.timer1 = setTimeout(() => { //因为展开动画需要1s 故 在收起的时候延迟置空数组,console.log(this.onePageList);this.$emit('shouqi', this.onePageList.levelOneCommentVo.id)}, 800)},updatHeight() {let that = thisthis.$nextTick(() => {// this.timer = setTimeout(() => {this.createSelectorQuery().select(".pinglunDom").boundingClientRect(function(rect) {// console.log(rect);that.pingjiaBoxMaxHeight = rect.heightthat.pinglunOpcity = 1}).exec();// }, 0)})},}}
</script><style lang="scss" scoped>.name {font-size: 24rpx;font-weight: 400;color: #667286;}.content {font-size: 28rpx;font-weight: 400;color: #1F3253;}.time {font-size: 20rpx;font-weight: 400;color: #AFAFAF;}.likeNum {font-size: 20rpx;font-weight: 400;color: #667286;}.zuozhe {width: 60rpx;height: 28rpx;background: #FFFFFF;border-radius: 18rpx;border: 1rpx solid #00875A;font-size: 20rpx;font-weight: 400;color: #00875A;}.seeMore {font-size: 24rpx;font-weight: 400;color: #00875A;}.retract {width: 150rpx;text-align: center;}.erpinglunBox {padding-left: 84rpx;transition: height 1s, opacity 2s;overflow: hidden;}
</style>

案例详情引入的scss文件:

	.font-20 {font-size: 20rpx;font-weight: 400;}.font-24 {font-size: 24rpx;font-weight: 400;}.txt-1 {font-size: 28rpx;font-weight: 500;color: #0F2C50;}.txt-2 {@extend .font-20;color: #667286;}.txt-3 {@extend .font-24;color: #667286;}.txt-4 {font-size: 24rpx;font-weight: 500;color: #667286;}.txt-5 {font-size: 36rpx;font-weight: bold;}.txt-6 {@extend .font-24;color: #9CADC6;}.txt-7 {@extend .font-20;color: #B7BCC3;}.txt-8 {@extend .font-24;color: #fff;}.txt-9 {@extend .font-24;color: #0F2C50;}.txt-10 {font-size: 28rpx;font-weight: 400;color: #667286;}.yell-green-base {width: 140rpx;height: 52rpx;border-radius: 2rpx;font-size: 36rpx;font-weight: bold;}.yellow-box {@extend .yell-green-base;background-color: #FFF4CD;color: #FF991F;}.green-box {@extend .yell-green-base;background: #E2FFEE;color: #00875A;}.timeFont{font-size: 32rpx;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;}.startTime{@extend .timeFont;color: #FF991F;}.endTime{@extend .timeFont;color: #00875A;}.line {height: 1rpx;border: 1rpx solid #E6E6E6;margin: 16rpx 0;}
.caseBox {background: #FFFFFF;border-radius: 12rpx;margin-top: 20rpx;padding: 0 32rpx;.case-head-box {height: 140rpx;}.avatarBox {width: 72rpx;height: 72rpx;margin-right: 16rpx;}.caseDetailBtn {width: 100rpx;height: 44rpx;background: #00875A;border-radius: 22rpx;}.rateBox {height: 80rpx;}.mar-80 {margin-right: 80rpx;}}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一探究竟:为什么需要 JVM?它处在什么位置?

小熊学Java全能学习面试指南&#xff1a;https://www.javaxiaobear.cn/ JVM我们并不陌生&#xff0c;现在我们就正式进入 JVM 的学习&#xff0c;如果你是一名软件开发工程师&#xff0c;在日常工作中除了 Java 这个关键词外&#xff0c;还有一个名词也一定经常被提及&#xf…

开开心心带你学习MySQL数据库之第三篇上

学校的项目组有必要加入吗? 看你的初心. ~~如果初心是通过这个经历能够提高自己的技术水平 ~~是可以考虑的 ~~如果初心是通过这个经历提高自己找工作的概率 ~~这个是不靠谱的,啥用没有 ~~如果初心是通过这个体验更美好的大学生活 ~~靠谱的 秋招,应届生,找工作是非常容易的!!! …

Java切换到Kotlin,Crash率上升了?

前言 最近对一个Java写的老项目进行了部分重构&#xff0c;测试过程中波澜不惊&#xff0c;顺利上线后几天通过APM平台查看发现Crash率上升了&#xff0c;查看堆栈定位到NPE类型的Crash&#xff0c;大部分发生在Java调用Kotlin的函数里&#xff0c;本篇将会分析具体的场景以及…

【小作文】【信】

【邀请信】【22&#xff0c;1邀请教授参加比赛】 【投诉信】【12,2投诉产品质量问题】

【AWS实验】 配置中转网关及对等连接

文章目录 实验概览目标实验环境任务 1&#xff1a;查看网络拓扑并创建基准任务 2&#xff1a;创建中转网关任务 3&#xff1a;创建中转网关挂载任务 4&#xff1a;创建中转网关路由表任务 4.1&#xff1a;创建路由表关联任务 4.2&#xff1a;创建路由传播 任务 5&#xff1a;更…

SpringWeb(SpringMVC)

目录 SpringWeb介绍 搭建 SpringWeb SpringWeb介绍 Spring Web是一个基于 Servlet API 构建的原始 web 框架&#xff0c;用于构建基于MVC模式的Web应用程序。在 web 层框架历经 Strust1&#xff0c;WebWork&#xff0c;Strust2 等诸多产品的历代更选 之后&#xff0c;目前业界普…

fastadmin think-queue supervisor配置

起因是微信支付回调需要同时做发货处理&#xff0c;但是发货接口不能影响,需要队列进行异步处理1. 1.fastadmin 后台购买queue插件(基于think-queue消息队列) 2.代码 2.1 添加文件&#xff1a;application---->extra--->queue.php 内容&#xff1a;我这里用的数据库做…

Git的基本使用笔记——狂神说

版本控制 版本迭代&#xff0c; 版本控制( Revision control)是一种在开发的过程中用于管理我们对文件、目录或工程等内容的修改历史&#xff0c;方便查看更改历史记录&#xff0c;备份以便恢复以前的版本的软件工程技术。 实现跨区域多人协同开发 追踪和记载一个或者多个文件的…

合宙Air724UG LuatOS-Air LVGL API控件--日历 (Calendar)

日历 (Calendar) LVGL 提供了一个用来选择和显示当前日期的日历控件。 示例代码 – 高亮显示的日期 highlightDate lvgl.calendar_date_t() – 日历点击的回调函数 – 将点击日期设置高亮 function event_handler(obj, event) if event lvgl.EVENT_VALUE_CHANGED then da…

(15)线程的实例认识:同步,异步,并发,并发回调,事件,异步线程,UI线程

参看&#xff1a;https://www.bilibili.com/video/BV1xA411671D/?spm_id_from333.880.my_history.page.click&vd_source2a0404a7c8f40ef37a32eed32030aa18 下面是net framework版本 一、文件构成 1、界面如下。 (1)同步与异步有什么区别&#xff1f; …

单片机TVS/ESD二极管防护

TVS 瞬态电压抑制二极管Transient Voltage Suppressor ESD 静电释放二极管 Electro-Static discharge 这两种本质上都是二极管。都是利用了二极管正向导通、反向截止的特性。二极管在反向截止截止条件下&#xff0c;如果电压继续增大&#xff0c;将会引发雪崩&#xff0c;使得…

聚合多个电商API接口平台

API接口测试&#xff08;点击免费测试&#xff09; 随着数字化商业时代的到来&#xff0c;API接口已成为电商资源连接利器&#xff0c;也是全球传统互联网企业转型的基础。 2021年 Google Cloud 研究显示&#xff0c;全球互联网企业近3/4的企业持续投入数字化转型&#xff0c…

JVM类的加载过程

加载过程 JVM的类的加载过程分为五个阶段&#xff1a;加载、验证、准备、解析、初始化。 加载   加载阶段就是将编译好的的class文件通过字节流的方式从硬盘或者通过网络加载到JVM虚拟机当中来。&#xff08;我们平时在Idea中书写的代码就是放在磁盘中的&#xff0c;也可以通…

什么是RTC

参考&#xff1a; https://zhuanlan.zhihu.com/p/377100294 RTC&#xff08;Real time communication&#xff09;实时通信&#xff0c;是实时音视频的一个简称&#xff0c;我们常说的RTC技术一般指的是WebRTC技术&#xff0c;已经被 W3C 和 IETF 发布为正式标准。由于几乎所…

精品基于SpringCloud实现的电影院购票系统设计-微服务-分布式

《[含文档PPT源码等]精品基于SpringCloud实现的电影院购票系统设计的设计与实现-微服务-分布式》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;Java 框架&#xff1a;springcloud JDK版…

Docker 网络模式

文章目录 一、Docker 网络实现原理1.容器的端口映射 二、Docker的网络模式1.Host模式2.Container模式3.none模式4.bridge模式 三、自定义网络1、查看网络模式列表2、查看容器信息(包含配置、环境、网关、挂载、cmd等等信息&#xff09;3、指定分配容器IP地址 面试题 一、Docker…

shiro550漏洞分析

准备工作 启动该项目 可以看到没有登录时候&#xff0c;cookie中没有rememberme字段 登录时候 当账号密码输入正确时候 登录后存在该字段 shiro特征&#xff1a; 未登陆的情况下&#xff0c;请求包的cookie中没有rememberMe字段&#xff0c;返回包set-Cookie⾥也没有del…

美创科技一体化智能化公共数据平台数据安全建设实践

公共数据是当今政府数字化转型的关键要素和未来价值释放的核心锚点&#xff0c;也是“网络强国”、“数字中国”的战略性资源。 作为数字化改革先行省份&#xff0c;近年来&#xff0c;浙江省以一体化智能化公共数据平台作为数字化改革的支撑总平台&#xff0c;实现了全省公共数…

2022年12月 C/C++(六级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:区间合并 给定 n 个闭区间 [ai; bi],其中i=1,2,…,n。任意两个相邻或相交的闭区间可以合并为一个闭区间。例如,[1;2] 和 [2;3] 可以合并为 [1;3],[1;3] 和 [2;4] 可以合并为 [1;4],但是[1;2] 和 [3;4] 不可以合并。 我们的任务是…

数据结构(Java实现)-反射、枚举以及lambda表达式

Java的反射&#xff08;reflection&#xff09;机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c;都能够调用它的任意方法和属性&#xff0c;既然能拿到那么&#xff0c;我们就可以修改部分…