就是评论区里面还可以继续评论
前后端约定的json长度未知，因为不知道回复套回复会多深。
数据库
评论表(id,昵称,内容,上级ID)，一颗类似的树，
前后端约定的大概json
举个栗子，套娃无限套的
[
{
"_id": "3",
"content": "手机流量超了咋 办？",
"publishtime": null,
"userid": "1013",
"nickname": "凯撒",
"visits": 111,
"thumbup": null,
"share": null,
"comment": null,
"state": null,
"parentid": "2",
"list": [
{
"_id": "1328590768385953792",
"content": "JOJO真好看",
"publishtime": null,
"userid": "1015",
"nickname": "jojo",
"visits": 66,
"thumbup": 1,
"share": null,
"comment": null,
"state": null,
"parentid": "3",
"list": [
{
"_id": "1358720252812333056",
"content": "test",
"publishtime": "2021-02-08T10:12:06.729+00:00",
"userid": "",
"nickname": null,
"visits": 0,
"thumbup": 0,
"share": 0,
"comment": 0,
"state": "1",
"parentid": "1328590768385953792",
"list": []
}
]
},
{
"_id": "1328595291036848128",
"content": "JOJO真好看",
"publishtime": null,
"userid": "1015",
"nickname": "jojo",
"visits": 66,
"thumbup": 6,
"share": null,
"comment": null,
"state": null,
"parentid": "3",
"list": []
}
]
},
{
"_id": "4",
"content": "hahahahah",
"publishtime": null,
"userid": "1015",
"nickname": "jojo",
"visits": 66,
"thumbup": null,
"share": null,
"comment": null,
"state": null,
"parentid": "2",
"list": [
{
"_id": "1328737516274192384",
"content": "这是一段吐槽",
"publishtime": "2020-11-17T16:31:25.286+00:00",
"userid": "123",
"nickname": "广科第一靓仔",
"visits": 0,
"thumbup": 0,
"share": 0,
"comment": 0,
"state": "1",
"parentid": "4",
"list": []
}
]
}
]
后端
使用jpa的方式，实体层是spit，还有一个实体层是存放前后端约定json的SpitPojo
Spit.java
@Data
public class Spit implements Serializable {
@Id
private String _id;
private String content;
private Date publishtime;
private String userid;
private String nickname;
private Integer visits;
private Integer thumbup;
private Integer share;
private Integer comment;
private String state;
private String parentid;
}
SpitPojo.java，其就是每一个层的东西，类似1L，但是1L里面又会被人评论，评论又评论，所以用的时候一般是List<SpitPojo>来存放所有的评论，就是前后端json
/**
* @description：每一个回复的楼层
*/
@Data
public class SpitPojo implements Serializable {
private String _id;
private String content;
private Date publishtime;
private String userid;
private String nickname;
private Integer visits;
private Integer thumbup;
private Integer share;
private Integer comment;
private String state;
private String parentid;
private List<SpitPojo> list;//这里自己套自己，自己.list是一个楼层的回复，然后还可以继续套娃
}
注意
注意这里spit是连接数据库的，但是给前端的又是另外一个格式，所以Spit给SpitPojo需要一个转换
dao
public List<Spit> findByParentid(String parentid);
service
/**
* 给一个吐槽的父节点，查看其子类
* @param id 查询该ID下的评论
* @param spitPojoList 相当于全局变量
* @return java.util.List<com.tensquare.spit.pojo.SpitPojo>
*/
public List<SpitPojo> findChildren(String id ,List<SpitPojo> spitPojoList){
//where parentid = id
List<Spit> spitList = spitDao.findByParentid(id);
//如果不是空的话，做准备工作就递归
if (spitList!=null){
//转化为给前端的json（spitpojo），并且给全局spitPojoList添加值
for (int i = 0 ; i < spitList.size();i++){
Spit tempSpit = spitList.get(i);
SpitPojo tempSpitPojo = new SpitPojo();
transformToPojo(tempSpit,tempSpitPojo);
spitPojoList.add(tempSpitPojo);
}
//到这里，数据库不为空，深度遍历
for (int j = 0; j < spitList.size();j++){
//递归，id = 数据库中查询到的每一列的id，spitPojo也向下深入一层。如果没有就返回了；如果有，就会继续深入挖掘
findChildren(spitList.get(j).get_id(),spitPojoList.get(j).getList());
}
}
return spitPojoList;
}
//转换函数
public void transformToPojo(Spit tempSpit,SpitPojo tempSpitPojo){
//开始转换
tempSpitPojo.set_id(tempSpit.get_id());
tempSpitPojo.setContent(tempSpit.getContent());
tempSpitPojo.setPublishtime(tempSpit.getPublishtime());
tempSpitPojo.setUserid(tempSpit.getUserid());
tempSpitPojo.setNickname(tempSpit.getNickname());
tempSpitPojo.setVisits(tempSpit.getVisits());
tempSpitPojo.setThumbup(tempSpit.getThumbup());
tempSpitPojo.setShare(tempSpit.getShare());
tempSpitPojo.setComment(tempSpit.getComment());
tempSpitPojo.setState(tempSpit.getState());
tempSpitPojo.setParentid(tempSpit.getParentid());
tempSpitPojo.setList(new ArrayList<>());
}
controller
控制层就给ID和一个空的List<SpitPojo>就好了
前端
前端我不太会，不会像后端一样写函数，也不知道这个函数怎么写，老子就做假了。
自定义8层，最多评论套评论8层，要是真有人这么套我也服了，等需求真的有的话，老子再复制粘贴做多几层
<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="font-size: 16px">
<router-link to="">{
{spitHeader.nickname}}</router-link> 于 {
{spitHeader.publishtime}} 发布
</span>
<div style="float: right; padding: 3px 0" type="text">
<i class="el-icon-view">浏览量：{
{spitHeader.visits}}</i>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-thumb" @click="test">{
{spitHeader.thumbup}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-link" type="primary">{
{spitHeader.share}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-chat-dot-round" type="primary">{
{spitHeader.comment}}</el-link>
</div>
</div>
<div class="text item">
{
{spitHeader.content}}
</div>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="font-size: 16px" class="el-icon-chat-dot-round">
评论
</span>
</div>
<div class="text item">
<!-- 接下来的这个套娃，老子自定义套了8层，我就不信有人这么无聊套超过8层-->
<el-card class="box-card2" shadow="hover" v-for="item in spit">
<div slot="header" class="clearfix">
<span style="font-size: 16px">
<router-link to="">{
{item.nickname}}</router-link> 于 {
{item.publishtime}} 回复
<div style="float: right; padding: 3px 0" type="text">
<el-link class="el-icon-thumb" @click="test">{
{item.thumbup}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-chat-dot-round" type="primary">{
{item.comment}}</el-link>
</div>
</span>
</div>
<div class="text item">
{
{item.content}}
</div>
<el-card class="box-card2" shadow="hover" v-for="item in item.list">
<div slot="header" class="clearfix">
<span style="font-size: 16px">
<router-link to="">{
{item.nickname}}</router-link> 于 {
{item.publishtime}} 回复
<div style="float: right; padding: 3px 0" type="text">
<el-link class="el-icon-thumb" @click="test">{
{item.thumbup}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-chat-dot-round" type="primary">{
{item.comment}}</el-link>
</div>
</span>
</div>
<div class="text item">
{
{item.content}}
</div>
<el-card class="box-card2" shadow="hover" v-for="item in item.list">
<div slot="header" class="clearfix">
<span style="font-size: 16px">
<router-link to="">{
{item.nickname}}</router-link> 于 {
{item.publishtime}} 回复
<div style="float: right; padding: 3px 0" type="text">
<el-link class="el-icon-thumb" @click="test">{
{item.thumbup}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-chat-dot-round" type="primary">{
{item.comment}}</el-link>
</div>
</span>
</div>
<div class="text item">
{
{item.content}}
</div>
<el-card class="box-card2" shadow="hover" v-for="item in item.list">
<div slot="header" class="clearfix">
<span style="font-size: 16px">
<router-link to="">{
{item.nickname}}</router-link> 于 {
{item.publishtime}} 回复
<div style="float: right; padding: 3px 0" type="text">
<el-link class="el-icon-thumb" @click="test">{
{item.thumbup}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-chat-dot-round" type="primary">{
{item.comment}}</el-link>
</div>
</span>
</div>
<div class="text item">
{
{item.content}}
</div>
<el-card class="box-card2" shadow="hover" v-for="item in item.list">
<div slot="header" class="clearfix">
<span style="font-size: 16px">
<router-link to="">{
{item.nickname}}</router-link> 于 {
{item.publishtime}} 回复
<div style="float: right; padding: 3px 0" type="text">
<el-link class="el-icon-thumb" @click="test">{
{item.thumbup}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-chat-dot-round" type="primary">{
{item.comment}}</el-link>
</div>
</span>
</div>
<div class="text item">
{
{item.content}}
</div>
<el-card class="box-card2" shadow="hover" v-for="item in item.list">
<div slot="header" class="clearfix">
<span style="font-size: 16px">
<router-link to="">{
{item.nickname}}</router-link> 于 {
{item.publishtime}} 回复
<div style="float: right; padding: 3px 0" type="text">
<el-link class="el-icon-thumb" @click="test">{
{item.thumbup}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-chat-dot-round" type="primary">{
{item.comment}}</el-link>
</div>
</span>
</div>
<div class="text item">
{
{item.content}}
</div>
<el-card class="box-card2" shadow="hover" v-for="item in item.list">
<div slot="header" class="clearfix">
<span style="font-size: 16px">
<router-link to="">{
{item.nickname}}</router-link> 于 {
{item.publishtime}} 回复
<div style="float: right; padding: 3px 0" type="text">
<el-link class="el-icon-thumb" @click="test">{
{item.thumbup}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-chat-dot-round" type="primary">{
{item.comment}}</el-link>
</div>
</span>
</div>
<div class="text item">
{
{item.content}}
</div>
<el-card class="box-card2" shadow="hover" v-for="item in item.list">
<div slot="header" class="clearfix">
<span style="font-size: 16px">
<router-link to="">{
{item.nickname}}</router-link> 于 {
{item.publishtime}} 回复
<div style="float: right; padding: 3px 0" type="text">
<el-link class="el-icon-thumb" @click="test">{
{item.thumbup}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-link class="el-icon-chat-dot-round" type="primary">{
{item.comment}}</el-link>
</div>
</span>
</div>
<div class="text item">
{
{item.content}}
</div>
</el-card>
</el-card>
</el-card>
</el-card>
</el-card>
</el-card>
</el-card>
</el-card>
</div>
</el-card>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
spitHeader: {
"_id": "",
"content": "我是标题",
"publishtime": 1,
"userid": "1013",
"nickname": "凯撒",
"visits": 111,
"thumbup": 1,
"share": 1,
"comment": 1,
"state": 1,
"parentid": "2",
},
spit: [{
"_id": "3",
"content": "手机流量超了咋 办？",
"publishtime": 1,
"userid": "1013",
"nickname": "凯撒",
"visits": 111,
"thumbup": 1,
"share": 1,
"comment": 1,
"state": 1,
"parentid": "2",
"list": [{
"_id": "1328590768385953792",
"content": "JOJO真好看",
"publishtime": '2017-7-23 12:02',
"userid": "1015",
"nickname": "jojo",
"visits": 66,
"thumbup": 1,
"share": 1,
"comment": 1,
"state": 1,
"parentid": "3",
"list": [{
"_id": "1358720252812333056",
"content": "test",
"publishtime": "2021-02-08T10:12:06.729+00:00",
"userid": "",
"nickname": 1,
"visits": 0,
"thumbup": 0,
"share": 0,
"comment": 0,
"state": "1",
"parentid": "1328590768385953792",
"list": []
}]
},
{
"_id": "1328595291036848128",
"content": "JOJO真好看",
"publishtime": 1,
"userid": "1015",
"nickname": "jojo",
"visits": 66,
"thumbup": 6,
"share": 1,
"comment": 1,
"state": 1,
"parentid": "3",
"list": []
}
]
},
{
"_id": "4",
"content": "hahahahah",
"publishtime": 1,
"userid": "1015",
"nickname": "jojo",
"visits": 66,
"thumbup": 1,
"share": 1,
"comment": 1,
"state": 1,
"parentid": "2",
"list": [{
"_id": "1328737516274192384",
"content": "这是一段吐槽",
"publishtime": "2020-11-17T16:31:25.286+00:00",
"userid": "123",
"nickname": "广科第一靓仔",
"visits": 0,
"thumbup": 0,
"share": 0,
"comment": 0,
"state": "1",
"parentid": "4",
"list": []
}]
}
]
}
},
methods: {
test() {
}
},
created() {
this.$data.spitHeader._id = this.$route.params.id
console.log(this.$route.params.id)
if (this.$data.spit[1].list[0].list.length == 0) {
console.log("是空" + this.$data.spit[1].list[0].list)
} else console.log("不是空")
var that = this
// axios.get('http://192.168.12.128:9002/recruit/' + that.$route.params.id).then(function(response) {
// console.log(response);
// // that.$data.list=response.data.data
// that.$data.recruit = response.data.data
// })
}
}
</script>
<style scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 100%;
margin-bottom: 0.625rem;
}
.box-card2 {
width: 100%;
/* margin: 0.3125rem; */
margin-bottom: 0.625rem;
}
</style>
假装做好了