实现评论回复功能没思路？从数据库设计到java实现再到前端显示，手把手教你如何实现评论回复功能

最新推荐文章于 2024-03-12 14:25:39 发布
最新推荐文章于 2024-03-12 14:25:39 发布
阅读量6.2k 收藏 114
点赞数 19
分类专栏： Java基础 前端 文章标签： 评论回复 博客实现评论回复 评论回复的数据库设计 评论回复的java实现 评论回复数据回显到前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42937522/article/details/106332377
版权

背景

在开发博客系统的时候，遇到了一个技术难点，就是如何实现用户对博客的评论和回复功能？

尝试了很多套方案，最后还是采用了Java的链表结构来查询处理评论回复。

博客如何实现评论回复功能

数据库设计

这里主要展示有关评论和回复的核心数据库设计：

Blog（博客表）

在这里插入图片描述

User（用户表）

在这里插入图片描述

Observe评论表

在这里插入图片描述

数据库设计概要

  1. 博客表主要用于id和评论表的blog_id关联，用于表示这条评论是和哪篇博客相关联的。
  2. 用户表主要用于id和评论表的observer_id关联，用于表示这条评论和哪个用户相关联。
  3. 博客表和用户表不是关键性内容，只用了解其id和评论表有关联即可。
  4. 关键点在于评论表设计的last_id字段
  • 如果last_id为null，说明此条评论为一级评论（直接评论这篇博客）
  • 如果last_id不为null，其值代表回复哪条评论（上一级评论的id）
    依据这样的last_id设计，可完美实现一条链状的评论（多级评论回复）。通过last_id我们就能找到这条回复是回复的哪条评论。

java实现评论的查询

存储

对于存储结构，使用链表。通过链表，我们可以一步步找到最后一条评论。因为一条评论可能存在多人回复（同级评论或者回复有多条），所以我们采用List存储下一个对象（下一级评论回复）。

查询
  1. 先查询last_id为null的情况，即所有的一级评论集合。
  2. 然后查询last_id不为null的情况，即所有非一级评论集合（为评论的回复）。
  3. 通过last_id找到对应的评论、回复，添加到链表中。

具体实现

数据库查询主要用的是mybatis的通用mapper，如果不会，可参看我的另一篇博客：SSM项目中如何使用通用mapper(tk.mapper)?如何使用注解简化mybatis的开发(舍弃大量的xml文件)？注解处理一对一、一对多、多对多的关系？

主要演示查询的实现，增删改都比较简单，暂略。

评论的实体类
@Entity
@Data
@Table(name="observe")
public class Observe implements Serializable {

    /** 评论id */
    @Id
    @Column(name = "id")
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    @NotNull(groups = UpdateGroup.class,message = "修改评论信息，id不可以空")
    private Long id;

    /** 所属博客id */
    @Column(name="blog_id")
    @NotNull(message = "所属博客id不能为空")
    private Long blogId;

    /** 评论者id */
    @Column(name="observer_id")
    @NotNull(groups = UpdateGroup.class,message = "评论者id不能为空")
    private Long observerId;

    /** 评论内容 */
    @Column(name="observe_content")
    @NotBlank(message = "评论内容不能为空")
    private String observeContent;

    /** 评论上一级的id */
    @Column(name="last_id")
    private Long lastId;

    /** 是否删除 */
    @Column(name="is_delete")
    private Boolean delete;

    /** 创建时间（评论时间） */
    @Column(name="create_date")
    @JSONField(format="yyyy-MM-dd HH:mm:ss")
    private Timestamp createDate;

    /** 修改删除 */
    @Column(name="update_date")
    @JSONField(format="yyyy-MM-dd HH:mm:ss")
    private Timestamp updateDate;

    public interface UpdateGroup {
    }
}
评论的链表结构

继承评论的实体类

/**
 * 功能描述：封装博客评论的BO <br>
 * 采用链表结构实现
 **/
@EqualsAndHashCode(callSuper = true)
@Data
@NoArgsConstructor
public class ObserveNodeBO extends Observe {

    /**
     * 评论的用户信息
     */
    private User user;

    /**
     * 下一条回复
     */
    private List<ObserveNodeBO> nextNodes = new ArrayList<>();

    public ObserveNodeBO ( ObserveNodeBO observeNodeBo ) {
        super();
        setId(observeNodeBo.getId());
        setBlogId(observeNodeBo.getBlogId());
        setObserverId(observeNodeBo.getObserverId());
        setObserveContent(observeNodeBo.getObserveContent());
        setLastId(observeNodeBo.getLastId());
        setDelete(observeNodeBo.getDelete());
        setCreateDate(observeNodeBo.getCreateDate());
        setUpdateDate(observeNodeBo.getUpdateDate());
        this.user = observeNodeBo.getUser();
    }

}
评论的mapper（数据库操作）

评论与用户之间是一对一的关系，所以这里使用mybatis的注解实现一对一关联。

/**
 * 功能描述： 自定义的mapper
 * ‘@RegisterMapper’ 使自定义的mapper可以被扫描到
 **/
@RegisterMapper
public interface CommentMapper<T> extends Mapper<T>, IdListMapper<T, Long>, InsertListMapper<T> {

}

@Component
public interface ObserveMapper extends CommentMapper<Observe> {

    /**
     * 功能描述：根据博客id和lastId为空，查询所有的一级评论信息集合
     * @param blogId 博客id
     * @return 一级评论信息集合
     * @author RenShiWei
     * Date: 2020/4/16 10:37
     */
    @Select("SELECT * FROM observe o LEFT JOIN user u " +
            "ON o.observer_id=u.id " +
            "WHERE o.blog_id=#{blogId} AND o.last_id is null")
    @Results({
            @Result(id = true, column = "id", property = "id"),
            @Result(column = "blog_id", property = "blogId"),
            @Result(column = "observer_id", property = "observerId"),
            @Result(column = "observe_content", property = "observeContent"),
            @Result(column = "observer_id", property = "user",
                    one = @One(select = "com.blog.module.business.mapper.UserMapper.queryUserForObserve",
                            fetchType = FetchType.EAGER)),
            @Result(column = "last_id", property = "lastId"),
            @Result(column = "is_delete", property = "delete"),
            @Result(column = "create_date", property = "createDate"),
            @Result(column = "update_date", property = "updateDate")
    })
    List<ObserveNodeBO> queryFirstObserveList (@Param("blogId") Long blogId );


    /**
     * 功能描述：根据博客id和lastId不为空，查询所有的二级评论信息集合
     * @param blogId 博客id
     * @return 二级评论信息集合
     * @author RenShiWei
     * Date: 2020/4/16 10:37
     */
    @Select("SELECT * FROM observe o LEFT JOIN user u " +
            "ON o.observer_id=u.id " +
            "WHERE o.blog_id=#{blogId} AND o.last_id is not null")
    @Results({
            @Result(id = true, column = "id", property = "id"),
            @Result(column = "blog_id", property = "blogId"),
            @Result(column = "observer_id", property = "observerId"),
            @Result(column = "observe_content", property = "observeContent"),
            @Result(column = "observer_id", property = "user",
                    one = @One(select = "com.blog.module.business.mapper.UserMapper.queryUserForObserve",
                            fetchType = FetchType.EAGER)),
            @Result(column = "last_id", property = "lastId"),
            @Result(column = "is_delete", property = "delete"),
            @Result(column = "create_date", property = "createDate"),
            @Result(column = "update_date", property = "updateDate")
    })
    List<ObserveNodeBO> querySecondObserveList (@Param("blogId") Long blogId );


}

@Component
public interface UserMapper extends CommentMapper<User> {

    /**
     * 功能描述：根据主键id查询用户信息
     * （在observe中一对一关系使用）
     *
     * @param id 用户id
     * @return 用户信息
     * @author RenShiWei
     * Date: 2020/4/16 10:43
     */
    @Select("SELECT * FROM user WHERE id=#{id}")
    @Results({
            @Result(id = true, column = "id", property = "id"),
            @Result(column = "create_date", property = "createDate"),
            @Result(column = "last_id", property = "lastId"),
            @Result(column = "is_delete", property = "delete"),
            @Result(column = "update_date", property = "updateDate")
    })
    User queryUserForObserve (@Param("id") Long id );

}
评论的业务逻辑实现
public interface ObserveService {

	/**
     * 功能描述：根据博客id，查询此博客的所有评论信息
     * @param blogId 博客id
     * @return 博客的评论信息
     */
    List<ObserveNodeBO> queryObserveByBlogId( Long blogId);
    
    /**
     * 功能描述：根据评论id查询用户信息
     * @param observeId 评论id
     * @return 评论信息，携带用户信息
     */
    ObserveUserBo queryObserveUserById(Long observeId);
    
}

@Service
public class ObserveServiceImpl implements ObserveService {
	@Autowired
    private ObserveMapper observeMapper;

    @Autowired
    private UserMapper userMapper;

    @Autowired
    private BlogMapper blogMapper;

	/**
     * 功能描述：根据博客id，查询此博客的所有评论信息
     *
     * @param blogId 博客id
     * @return 博客的评论信息
     */
    @Override
    public List<ObserveNodeBO> queryObserveByBlogId ( Long blogId ) {
        //所有未处理的一级评论集合
        List<ObserveNodeBO> firstObserveList = observeMapper.queryFirstObserveList(blogId);
        //所有未处理的二级评论集合
        List<ObserveNodeBO> secondObserveList = observeMapper.querySecondObserveList(blogId);

        //将二级评论用链表的方式添加到一级评论
        List<ObserveNodeBO> list = addAllNode(firstObserveList, secondObserveList);

        //控制台打印评论回复
        show(list);

        //返回处理后的评论信息
        return list;
    }

    /**
     * 功能描述：根据评论id查询用户信息
     *
     * @param observeId 评论id
     * @return 评论信息，携带用户信息
     */
    @Override
    public ObserveUserBo queryObserveUserById ( Long observeId ) {
        Observe observe = observeMapper.selectByPrimaryKey(observeId);
        User user = userMapper.selectByPrimaryKey(observe.getObserverId());
        ObserveUserBo observeUserBo = new ObserveUserBo();
        observeUserBo.setObserve(observe);
        observeUserBo.setUser(user);
        return observeUserBo;
    }


    /**
     * 功能描述：将单个node添加到链表中
     *
     * @param firstList   第一层评论集合（链表）
     * @param observeNode 非第一层评论的回复信息
     * @return 是否添加
     */
    private boolean addNode ( List<ObserveNodeBO> firstList, ObserveNodeBO observeNode ) {
        //循环添加
        for (ObserveNodeBO node : firstList) {
            //判断留言的上一段是否是这条留言（判断这条回复，是否是当前评论的回复）
            if (node.getId().equals(observeNode.getLastId())) {
                //是，添加，返回true
                node.getNextNodes().add(observeNode);
                return true;
            } else {
                //否则递归继续判断
                if (node.getNextNodes().size() != 0) {
                    if (addNode(node.getNextNodes(), observeNode)) {
                        return true;
                    }
                }
            }
        }
        return false;
    }

    /**
     * 功能描述：将查出来的lastId不为null的回复都添加到第一层Node集合中
     *
     * @param firstList 第一层评论集合（链表）
     * @param thenList  非第一层评论集合（链表）
     * @return 所有评论集合（非第一层评论集合对应添加到第一层评论集合，返回）
     */
    private List<ObserveNodeBO> addAllNode ( List<ObserveNodeBO> firstList, List<ObserveNodeBO> thenList ) {
        while (thenList.size() != 0) {
            int size = thenList.size();
            for (int i = 0; i < size; i++) {
                if (addNode(firstList, new ObserveNodeBO(thenList.get(i)))) {
                    thenList.remove(i);
                    i--;
                    size--;
                }
            }
        }
        return firstList;
    }

    /**
     * 功能描述：打印评论的链表回复信息
     *
     * @param list 评论信息（链表集合）
     */
    private void show ( List<ObserveNodeBO> list ) {
        for (ObserveNodeBO node : list) {
            System.out.println(node.getObserverId() + " 用户回复了" + node.getLastId() + "：" + node.getObserveContent());
            //递归打印回复信息
            if (node.getNextNodes().size() != 0) {
                show(node.getNextNodes());
            }
        }
    }
}
评论的接口
@RestController
@RequestMapping("/api/observe")
public class ObserveController {

    @Autowired
    private ObserveService observeService;

	/**
     * 功能描述：根据博客id，查询此博客的所有评论信息（链表类型的数据）
     * @param blogId 博客id
     * @return 博客的评论信息
     */
    @GetMapping("/{blogId}")
    public ResponseEntity<List<ObserveNodeBO>> queryObserveByBlogId (
            @ApiParam(name = "blogId", value = "博客id", required = true) @PathVariable Long blogId
    ) {
        return ResponseEntity.ok(observeService.queryObserveByBlogId(blogId));
    }

	/**
     * 功能描述：根据评论id查询用户信息（评论信息，携带用户信息）
     * @param observeId 评论id
     * @return 评论信息，携带用户信息
     */
    @GetMapping("/user/{observeId}")
    public ResponseEntity<ObserveUserBo> queryObserveUserById (
            @ApiParam(name = "observeId", value = "评论id", required = true)@PathVariable Long observeId
    ) {
        return ResponseEntity.ok(observeService.queryObserveUserById(observeId));
    }
}

查询评论的实例

数据库数据

博客id为29的所有评论信息
在这里插入图片描述

查询后回显的数据
[
  {
    "id": 27,
    "blogId": 29,
    "observerId": 63,
    "observeContent": "你好",
    "lastId": null,
    "delete": false,
    "createDate": "2020-05-13 12:01:24",
    "updateDate": "2020-05-13 12:01:24",
    "user": {
      "id": 63,
      "nickname": "焦前进",
      "email": "123456789@qq.com",
      "picture": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      "identity": 0,
      "delete": false,
      "createDate": "2020-05-13 12:01:24",
      "updateDate": "2020-05-13 12:01:24",
      "account": null,
      "password": null
    },
    "nextNodes": []
  },
  {
    "id": 28,
    "blogId": 29,
    "observerId": 64,
    "observeContent": "你也好啊",
    "lastId": null,
    "delete": false,
    "createDate": "2020-05-13 12:19:16",
    "updateDate": "2020-05-13 12:19:16",
    "user": {
      "id": 64,
      "nickname": "末",
      "email": "1542890862@qq.com",
      "picture": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      "identity": 0,
      "delete": false,
      "createDate": "2020-05-13 12:19:16",
      "updateDate": "2020-05-13 12:19:16",
      "account": null,
      "password": null
    },
    "nextNodes": [
      {
        "id": 29,
        "blogId": 29,
        "observerId": 65,
        "observeContent": "大家好",
        "lastId": 28,
        "delete": false,
        "createDate": "2020-05-13 12:20:25",
        "updateDate": "2020-05-13 12:20:25",
        "user": {
          "id": 65,
          "nickname": "小黑",
          "email": "1542890862@qq.com",
          "picture": "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
          "identity": 0,
          "delete": false,
          "createDate": "2020-05-13 12:20:25",
          "updateDate": "2020-05-13 12:20:25",
          "account": null,
          "password": null
        },
        "nextNodes": [
          {
            "id": 30,
            "blogId": 29,
            "observerId": 66,
            "observeContent": "我喜欢小黑",
            "lastId": 29,
            "delete": false,
            "createDate": "2020-05-13 12:21:39",
            "updateDate": "2020-05-13 12:21:39",
            "user": {
              "id": 66,
              "nickname": "小白",
              "email": "1542890862@qq.com",
              "picture": "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
              "identity": 0,
              "delete": false,
              "createDate": "2020-05-13 12:21:39",
              "updateDate": "2020-05-13 12:21:39",
              "account": null,
              "password": null
            },
            "nextNodes": [
              {
                "id": 31,
                "blogId": 29,
                "observerId": 67,
                "observeContent": "ddd",
                "lastId": 30,
                "delete": false,
                "createDate": "2020-05-13 12:23:54",
                "updateDate": "2020-05-13 12:23:54",
                "user": {
                  "id": 67,
                  "nickname": "小黄",
                  "email": "1542890862@qq.com",
                  "picture": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                  "identity": 0,
                  "delete": false,
                  "createDate": "2020-05-13 12:23:54",
                  "updateDate": "2020-05-13 12:23:54",
                  "account": null,
                  "password": null
                },
                "nextNodes": []
              }
            ]
          }
        ]
      }
    ]
  }
]

Element UI树形控件实现评论信息的回显

这里使用的普通H5项目引入Element UI，如果是vue-cli项目更为方便，原理都是相通的。
引入依赖的目录结构（当然也可以使用CDN的方式引入）

关于Element UI引入，资源已经上传，可在文章顶部下载。
在这里插入图片描述

HTML（只保留关键部分）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客详情</title>
    <link rel="stylesheet" href="../plugins/element/element-ui-index.css"/>
    <link rel="stylesheet" href="../css/blog-detail.css"/>
    <script src="../plugins/jquery/jquery-3.5.0.min.js"></script>
    <script src="../plugins/jquery/jquery.cookie-1.4.1.min.js"></script>
    <script src="../plugins/vue/vue-2.6.11.js"></script>
    <script src="../plugins/element/element-ui-index.js"></script>
    <script src="../js/blog-detail.js"></script>
</head>
<div class="content">
    <!--正文-->
    <section>
        <div id="blog-detail">
        	<!--    展示已有评论    -->
                <div class="look-observe">
                    <el-tree
                            ref="tree"
                            :data="observes"
                            :props="defaultProps"
                    >
                        <div class="custom-tree-node" slot-scope="{ node, data }">
                            <div class="observe-top">
                                <img :src="data.user.picture" alt="头像" class="observe-header-img">
                                <span class="observe-nickname">{{data.user.nickname}}</span>
                                <span class="observe-user" v-text="data.lastId==null?'回复了博主':'回复了你'"></span>
                                <el-tag class="observe-tag" @click="getLastId(data)" round size="mini">回复</el-tag>
                                <span class="observe-date">{{data.createDate}}</span>
                            </div>
                            <p class="observe-content">{{data.observeContent}}</p>
                        </div>
                    </el-tree>
                </div>
            </div>
        </div>
    </section>
</div>

CSS

/*评论显示*/
.look-observe {
    padding: 2rem 2rem;
    background-color: #ffffff;
}

#observe-title {
    text-align: center;
    font-weight: bold;
}

#my-observe-user {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 1rem 0;
}

#clear-observe-tag {
    width: 10rem;
    height: 3rem;
    padding: 0.5rem;
    cursor: pointer;
    text-align: center;
    margin-left: 85%;
}

#my-observe-user-content {
    font-size: 1.4rem;
}

.custom-tree-node {
    width: 100%;
}

.el-tree-node__content {
    height: 8rem;
    padding: 1rem 2rem;
    border-radius: 1rem;
    border: 0.1rem solid #eee;
}

.observe-content {
    font-size: 1.4rem;
    margin: 1rem 0;
}

.observe-top {
    line-height: 3rem;
    height: 3rem;
}

.observe-top span {
    display: inline-block;
    vertical-align: middle;
}

.observe-header-img {
    display: inline-block;
    vertical-align: middle;
    height: 3rem;
    width: 3rem;
    border-radius: 3rem;
}

.observe-nickname {
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0 1rem;
}

.observe-user {
    margin: 0 1rem;
    font-size: 1.2rem;
}

.observe-date {
    float: right;
    margin-right: 2rem;
}

.observe-tag {
    float: right;
}

JS

$(document).ready(function () {
    //侧边栏的vue
    let blogDetail = new Vue({
        el: '#blog-detail',
        data: {
            blogId: '', //博客id
            lastId: '',  //评论的lastId
            observes: [], //已经评论的集合
            defaultProps: {
                children: 'nextNodes',
                label: 'observeContent',
                id: 'id',
            },
        },
        methods: {
            //查询此篇博客的所有评论信息
            getBlogObserve() {
                $.get(baseUrl + "/api/observe/" + this.blogId,
                    function (data, status, xhr) {
                        blogDetail.observes = data;
                    }, "json").fail(function (error) {
                    blogDetail.$message({
                        showClose: true,
                        message: "查询博客评论失败" + error.responseJSON.message,
                        type: 'error'
                    });
                });
            },
            //进入博客详情页，博客的浏览量+1
            increaseViewCount() {
                if ($.cookie("viewId") !== this.blogId) {
                    $.ajax({
                        url: baseUrl + "/api/blog/increase-view-number/" + this.blogId,
                        dataType: "text",
                        type: "put",
                        success: function (data, status, xhr) {
                            //设置过期时间为1h
                            let date = new Date();
                            date.setTime(date.getTime() + 60 * 60 * 60 * 1000);
                            $.cookie("viewId", blogDetail.blogId, {"path": "/",}, {expires: date});
                        },
                        error: function (error) {
                            blogDetail.$message({
                                showClose: true,
                                message: error.responseJSON.message,
                                type: 'error'
                            });
                        }
                    });
                }
            },
            //点击点赞，增加博客的点赞量
            increaseLikeCount() {
                if ($.cookie("likeId") !== this.blogId) {
                    $.ajax({
                        url: baseUrl + "/api/blog/increase-like-number/" + this.blogId,
                        dataType: "text",
                        type: "put",
                        success: function (data, status, xhr) {
                            //设置过期时间为1h
                            let date = new Date();
                            date.setTime(date.getTime() + 60 * 60 * 60 * 1000);
                            $.cookie("likeId", blogDetail.blogId, {"path": "/",}, {expires: date});
                        },
                        error: function (error) {   //请求失败后的回调方法
                            blogDetail.$message({
                                showClose: true,
                                message: error.responseJSON.message,
                                type: 'error'
                            });
                        }
                    });
                }else{
                    blogDetail.$message({
                        showClose: true,
                        message: "您已经点过赞啦！",
                        type: 'success'
                    });
                }
            },
        },
        mounted() {
            this.getBlogObserve();
        },
        created() {
        	//获取博客的id，利用的是导航栏拼接，这里可忽略
            this.blogId = window.location.search.substr(1);
        }
    });
});

博客的访问量和点赞量是利用cookie存储对应的博客id来实现的，如果有次cookie则不能增加浏览量和点赞量，当然也还存在很多的bug，这个访问量和点赞量只能在一定程度上解决问题，并不完善（浏览和点赞的后端实现暂略，不是重点）。

关键

利用Element UI实现评论回显的关键代码如下：

<el-tree
   ref="tree"
   :data="observes"
   :props="defaultProps"
>
   <div class="custom-tree-node" slot-scope="{ node, data }">
        <div class="observe-top">
             <img :src="data.user.picture" alt="头像" class="observe-header-img">
             <span class="observe-nickname">{{data.user.nickname}}</span>
             <span class="observe-user" v-text="data.lastId==null?'回复了博主':'回复了你'"></span>
             <el-tag class="observe-tag" @click="getLastId(data)" round size="mini">回复</el-tag>
             <span class="observe-date">{{data.createDate}}</span>
        </div>
        <p class="observe-content">{{data.observeContent}}</p>
   </div>
</el-tree>
  • :data="observes"是评论信息集合，及需要展示在属性控件的数据
  • :props="defaultProps"主要用于配置每个节点的选项
  • slot-scope是树形控件的插槽

详细的树形控件API可参看官网：https://element.eleme.cn/#/zh-CN/component/tree

回显数据实例展示

多级评论回复层级结构非常鲜明
在这里插入图片描述

Duktig丶
关注
  • 19
    点赞
  • 踩
  • 114
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
专栏目录
留言板回复功能实现_ant-design实现回复评论功能
weixin_42516051的博客
01-28 1705
最近开始写前端，这个评论回复功能自己写的，基本功能是可以实现，给需要的朋友们参考，也非常欢迎朋友们的指正。1、先上效果图：2、代码：QaRecordList.js render() { let actions = [ <Button type="link" size={"small"} icon="close" ...
多级评论回复功能（纯前端，未连数据库）
weixin_40758850的博客
06-03 7177
效果图： html结构（css我就不放了）： <div> <!--我的评论--> <div class="my-comment"> <textarea class="textarea" name="" id="" cols="30" rows="10" placeholder="快来说点什么吧~"></t...
java评论、回复功能设计和实现
热门推荐
Johnathan的博客
12-01 1万+
最近实现了评论和回复、点赞、@的功能。在这里分享一下我的设计思路（先分享评论和回复功能）。希望各位读者给出一些不一样的建议后期改进。 先看看效果 总共是两层回复 （回复评论、回复评论下的回复） 数据库设计分成评论表（TFW_Comments）和回复内容表（TFW_UserResponse）以及评论回复关系表（TFW_MsgRelation） 数据库设计思路： 注：各位读者自动忽略评论表的服务机构ID字段，这个字段相当于这条评论是在哪个帖子（文章下面） 1、根据文章ID或者是帖...
评论功能的设计与实现
m0_54187478的博客
01-20 1080
选择哪种评论系统取决于你的应用需求。如果你的平台鼓励快速、简短的交流，朋友圈式评论可能更合适。如果你的平台倾向于深入的讨论和话题探索，盖楼式评论将是更好的选择。在一些复杂的应用中，两种类型的评论系统甚至可以结合使用，以适应不同的交流需求。
基于Vue2.0 + ElementUI开发论坛评论与回复功能
zydemon的专栏
03-12 530
本文将介绍如何使用 Vue2.0 和 ElementUI 开发一个简单的论坛评论和回复功能。
毕设&课设&项目&实训-手把手教你学网页设计.zip
02-05
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
基于mybatis的collection标签实现帖子评论多级回复以及关联用户信息查询
04-30
支持mysl底过程查询,可以查询帖子评论的多级回复以及每个回复关联的用户信息.可以作为类似于帖子回复这种嵌套递归查询业务的模板,可移植性高.如果疑问之处可多多交流
发表评论及回复功能
weixin_47637137的博客
06-07 447
毕设常用功能 评论及回复
百万前端之JavaScript+jquery实现点赞、收藏、评论功能
qsadmjn的博客
08-05 2914
原生js+jquery实现简单的点赞收藏评论功能，解决在公司工作的小问题
微信小程序 内容评论-回复评论-回复回复的实现（纯前端）
python_web全栈
07-20 1585
【代码】微信小程序 内容评论-回复评论-回复回复的实现（纯前端）
社区功能之评论与回复功能
Leungiyee的博客
03-21 280
最近在写一个常见的小demo——社区功能中的评论与回复功能。在实现过程中，定义了一个评论类实体CommunityReplyEntity，然后在这个实体中加多一个回复评论集合List<CommunityReplyEntity>的children子集。这样写下去的逻辑就是当children不为空就有回复，那么就会碰到一个问题，就是每个评论都有回复，并且回复子集仍然有回复。因此，我用一级评论+一级评论所有回复这样的两级数据去作为我的返回数据。注意：以下是一个简单的实现方法，只提供初学者或则自己练手项目参考使用。
手把手教会你无刷电机（赠送）.zip
最新发布
04-02
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。【项目质量】：所有源码都经过严格测试，可以直接运行。功能在确认正常工作后才上传。【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。【附加价值】：项目具有较高的学习借鉴价值，也可直接拿来修改复刻。对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同进步。
ssm框架+jsp+mysql实现的在线考试系统.zip
04-01
java 在线考试系统成品源码 web项目源代码出售 可二次开发源码 一、项目介绍： 该系统由jsp+mysql+ssm框架实现的学生在线考试系统，功能比较完善，支持单选、多选、简答题型，试题可以批量导入，导入时可选择多种方式导入，比如导入到试题库，导入到试卷中或者导入到新建试卷中等，后台角色分为教师和管理员，管理员同时也可以担任教师，管理员可以管理所有功能，教师只能管理部分考试相关的功能，考试信息由教师或者管理员发布，学生在前台可注册登录，注册时可选定班级信息，学生登录后只能查看自己所在班级的考试信息，当考试还未开始时学生不能进行考试，考试过期后系统会自动删除掉过期的考试，学生考完试后还可以复习已经考过的试题等等，功能比较详细。项目配有完整的源码、数据库文件、导入配置运行教程、视频导入教程 二、技术介绍： 前端主要框架技术：JSP+bootstrap+jquery+jstl 后端主要框架技术：spring+springMVC+mybatis+ECharts等等 数据库：mysql 开发工具：Myeclipse或Eclipse、jdk1.7或1.8、tomcat7或8、mysql5.5、5.6数据库。 注：有运行视频，运行文档 效果图请看这里： https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111debpsI16d&ft=t&id=615352921018 更多源码请关注博主
基于SSM框架的人力资源管理后台系统+源代码+文档说明+数据库
11-27
# Java SSM练手小项目-手把手带你搭建一个基于SSM框架的人力资源管理后台系统 ## 前言 相信很多小伙伴在学习完SSM三大架构以后，不知道该如何找到一个简单容易上手的项目进行实战训练，经常在博客上看到一个不错的项目下载下来以后全部都是代码，无处下手。因此本文力求以最简单易懂的项目结构和代码搭建一个还较为完整（即从登录到退出的整个流程）的后台系统。 （高手勿喷） 整个项目的操作流程动态图如下： 用到的技术点有： * 框架：SSM * 数据库：MySQL * 前端框架：Bootstrap快速搭 搭建JSP页面 * 项目管理：MAVEN * 开发工具：IntellijIDEA * 开发环境：Windows 从这个项目中你可以完整独立地体验从前端到后台的搭建过程，以及使用SSM框架完成后台的CRUD整个流程。 ## 一、准备 准备部分主要包括数据库建表、SSM框架的搭建启动。 **1 数据库建表** tbl_emp表： ``` DROP TABLE IF EXISTS `tbl_emp`; CREATE TABLE `tbl_emp`( `emp_id` int(11) UNSIGNED NOT NULL auto_increment, `emp_name` VARCHAR(22) NOT NULL DEFAULT '', `emp_email` VARCHAR(256) NOT NULL DEFAULT '', `gender` CHAR(2) NOT NULL DEFAULT '', `department_id` int(11) NOT NULL DEFAULT 0, PRIMARY KEY(`emp_id`) ) ENGINE=INNODB DEFAULT CHARSET=UTF8; ``` tbl_dept表： ``` DROP TABLE IF EXISTS `tbl_dept`; CREATE TABLE `tbl_dept`( `dept_id` int(11) NOT NULL DEFAULT 0, `dept_name` VARCHAR(255) NOT NULL DEFAULT '', `dept_leader` VARCHAR(255) NOT NULL DEFAULT '' ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ``` 对应的实体类见bean/Employee.java和bean/Department.java。 **2 SSM项目搭建与启动** （1）首先导入项目中可能用到的依赖包： 见pom.xml. （2）web.xml： 见WEB-INF/web.xml. （3）Spring容器配置文件：applicationContext.xml： 见resources/applicationContext.xml. （4）SpringMVC配置文件：springmvc.xml： 见resources/springmvc.xml. **3 测试** 写好上述配置文件后，可以在controller目录下新建TestController.java文件和WEB-INF/jsp/test.jsp，启动容器测试是否成功。 ## 二、DAO层代码完成与测试 这一章主要完成数据库底层的CRUD代码实现与测试工作. **1. MyBasits配置文件** 见resources/MyBatis.xml. **2. DAO层代码** 首先编写实体类Employee 与 表tbl_emp相关操作代码。 EmployeeMapper.java主要接口有： ``` int deleteOneById(@Param("empId") Integer empId); int updateOneById(@Param("empId") Integer empId, @Para -------- 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ <项目介绍> 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
基于微信小程序零食商城（毕业设计，附源码）（毕业设计，包括数据库，源码，教程）.zip
05-08
微信小程序毕业设计，微信小程序课程设计，基于微信小程序开发的，含有代码注释，新手也可看懂,可作为毕业设计，课程设计。 包含：项目源码、数据库脚本、部署说明等，该项目可以作为课程设计使用，前后端代码都在...
理解误区——mysql中tinyint与Java的数据类型的对应关系；tinyint(1) 与tinyint(4)的区别
Duktig的博客
02-01 1万+
理解误区1    在最初学习Java和MySQL的时，一直使用的是Boolean来接受tinyint类型的数据。具体操作：在数据库中设置TINYINT(1),存储0和1；在Java中使用boolean来接受，0代表false，1代表true。在潜意识中一直以为MySQL的tinyint对应Java的Boolean，其实这个是错误的。    直到后来使用tinyint存不是0和1的数之后，才考虑到J...
java为实体类的成员变量设置默认值（mybatis为前台传的分页信息设置默认值）
Duktig的博客
05-20 1万+
java为实体类的成员变量设置默认值 问题背景 最近在使用mybatis写分页的时候，封装了一个PageVO用来接收前台传来的分页信息，但是这样的话，每次都需要传递分页的信息比较麻烦，就想着是否可以为分页信息设置默认值，比如默认当前页是0，每页显示20条数据。 PageVO import lombok.Data; @Data public class PageVO { /** 当前页 */ private Integer currentPage; /** 当前页显示数据的条数
一级功能模块和二级功能模块
10-25
根据提供的引用内容，没有明确的说明一级功能模块和二级功能模块的定义和区别。因此，我无法为您提供准确的答案。但是，可以根据引用中提到的全国计算机等级考试二级python语言程序设计涉及到模块的相关知识，推测一级功能模块和二级功能模块可能与计算机等级考试相关。如果您能提供更多的上下文信息，我可以更好地回答您的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值