我实现了一个乞丐版的评论功能

这篇具有很好参考价值的文章主要介绍了我实现了一个乞丐版的评论功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

设计评论功能

0 设计初衷

经过长达八个月的更新迭代,文章的内容已经比较丰富,为了达到评论互动的目的,同时秉承能用就行的原则,开发这个评论功能。

那就叫小码吧 已经部署线上。

我实现了一个乞丐版的评论功能

1 前端组建设计

设计原则

  • 1 原则1:使用现有element ui 树形组件不重复造轮子
  • 2 原则2:先能用后续完善UI

设计代码

组件核心代码

<template>
  <div class="commentArea">
    <el-tree :data="commentTreeData" :props="defaultProps" @node-click="handleNodeClick" :render-content="renderContent"></el-tree>
  </div>
</template>

<script>
export default {
  name: 'CommnetArea',
  methods:{
    // render-content指定渲染函数,该函数返回需要的节点区内容
    // scoped slot 会传入两个参数node和data,分别表示当前节点的 Node 对象和当前节点的数据
    renderContent(h, { node, data }) {
        return (
          <div class="comment-tree-node">
            {/* <el-avatar shape="square" :size="100" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-avatar> */}
            <image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
            <span>{data.userName}{node.label}</span>
            <span>
              <el-button size="mini">回复</el-button>
            </span>
          </div>);
      },
      handleNodeClick(data) {
        console.log(data);
      }
    },
  props:{
    commentTreeData:Array,
    defaultProps:Object
  }  

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

调用组建并给出mock数据

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <CommnetArea :commentTreeData="comdata" :defaultProps="defaultProps"/>
  </div>
</template>

<script>
import CommnetArea from './components/CommnetArea.vue'

export default {
  name: 'App',
  components: {
    CommnetArea
  },
  data() {
      return {
        comdata: [{
          id:200010,
          parentId:0,
          userId: 1001,
          userName: '胡歌',
          avatarSrc: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          commentContent: '这个文章写的也太好了吧?',
          children: [{
            id:200011,
            parentId:200010,
            userId: 1002,
            userName: '伊芙丽',
            avatarSrc: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            commentContent: '好吗,也就是入门水平吧!',
            children: [{
              id:200012,
              parentId:200011,
              userId: 1003,
              userName: '曹三星',
              avatarSrc: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
              commentContent: '确实是入门水平但是很有理解。'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'commentContent'
        }
      };
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果

我实现了一个乞丐版的评论功能

2 后端数据库设计

设计原则:

  • 1 字段见名知义
  • 2 考虑后续扩展
  • 3 适当的字段应加上索引
  • 4 考虑字段存储长度

建表语句

CREATE TABLE MARK_COMMENT (
	ID BIGINT NOT NULL COMMENT '评论ID' PRIMARY KEY,
	OBJ_ID BIGINT NOT NULL COMMENT '评论对象ID(可能是文章、评论或者其他模块的评论对象ID)',
	PARENT_ID BIGINT DEFAULT 0 NOT NULL COMMENT '父级ID,顶级为0',
	USER_ID BIGINT NOT NULL COMMENT '用户ID',
	USER_NAME varchar(255) NULL COMMENT '用户名称',
	AVATAR_SRC varchar(255) NOT NULL COMMENT '用户头像',
	COMMENT_TIME DATETIME NOT NULL COMMENT '评论时间',
	COMMENT_CONTENT varchar(500) NOT NULL COMMENT '评论内容'
)
ENGINE=InnoDB
DEFAULT CHARSET=utf8mb4
COLLATE=utf8mb4_general_ci
COMMENT='评论表';

ALTER TABLE  MARK_COMMENT ADD INDEX IDX_MARKCOMMENT_OBJ_ID(OBJ_ID);
ALTER TABLE  MARK_COMMENT ADD INDEX IDX_MARKCOMMENT_PARENT_ID(PARENT_ID);
ALTER TABLE  MARK_COMMENT ADD INDEX IDX_MARKCOMMENT_USER_ID(USER_ID);


INSERT INTO `goods_mark`.`MARK_COMMENT` (`ID`, `OBJ_ID`, `PARENT_ID`, `USER_ID`, `USER_NAME`, `AVATAR_SRC`, `COMMENT_TIME`, `COMMENT_CONTENT`) VALUES (200010, 1597083492114546688, 0, 1001, '胡歌', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', '2023-04-20 22:18:18', '这个文章写的也太好了吧?');
INSERT INTO `goods_mark`.`MARK_COMMENT` (`ID`, `OBJ_ID`, `PARENT_ID`, `USER_ID`, `USER_NAME`, `AVATAR_SRC`, `COMMENT_TIME`, `COMMENT_CONTENT`) VALUES (200011, 1597083492114546688, 200010, 200010, '伊芙丽', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', '2023-04-14 22:19:25', '好吗,也就是入门水平吧!');
INSERT INTO `goods_mark`.`MARK_COMMENT` (`ID`, `OBJ_ID`, `PARENT_ID`, `USER_ID`, `USER_NAME`, `AVATAR_SRC`, `COMMENT_TIME`, `COMMENT_CONTENT`) VALUES (200012, 1597083492114546688, 200011, 200011, '曹三星', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', '2023-04-13 22:20:17', '确实是入门水平但是很有理解。');

3 后端接口设计

设计原则:

  • 1 返回属性字段见名知义
  • 2 不返回无用属性
    接口返回值:
GET http://localhost:8088/xxxx/xxxxxxxx?xxxxxxx=1323123432

HTTP/1.1 200 
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Content-Type: application/json
Transfer-Encoding: chunked
Date: Sat, 15 Apr 2023 07:59:57 GMT
Keep-Alive: timeout=60
Connection: keep-alive

{
  "status": 200,
  "message": "获取评论列表成功!",
  "stackTrace": null,
  "data": {
    "result": [
      {
        "id": "200010",
        "parentId": "0",
        "userId": 1001,
        "userName": "胡歌",
        "avatarSrc": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "commentContent": "这个文章写的也太好了吧?",
        "children": [
          {
            "id": "200011",
            "parentId": "200010",
            "userId": 200010,
            "userName": "伊芙丽",
            "avatarSrc": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
            "commentContent": "好吗,也就是入门水平吧!",
            "children": [
              {
                "id": "200012",
                "parentId": "200011",
                "userId": 200011,
                "userName": "曹三星",
                "avatarSrc": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                "commentContent": "确实是入门水平但是很有理解。",
                "children": null
              }
            ]
          }
        ]
      }
    ]
  }
}

Response code: 200; Time: 406ms; Content length: 671 bytes

4 前后端联调

接口请求
这里直接从路由中拿到文章ID,直接请求接口即可

    initCommentTree() {
      let that = this;
      api_getCommentByArticleId(that.$route.params.articleId).then(resp => {
        if (resp.data.status==200) {
          that.commentData = resp.data.data.result;
        } else {
          that.$message({message: resp.data.data.message, type: 'error', showClose: true})
        }
      });
    }

联调结果
我实现了一个乞丐版的评论功能

剩下按照同样的步骤实现文章的评论功能

5 后端评论保存接口设计

评论文章

{
  "objIdString": "MTYyMzI5MjMzNTIwMjMyODU3Ng==",
  "parentId": 0,
  "userId": 59,
  "userName": "王志利",
  "avatarSrc": "123.jpg",
  "commentContent": "测试接口新增评论,评论rabbitMQ"
}

评论评论

{
  "objIdString": "MTYyMzI5MjMzNTIwMjMyODU3Ng==",
  "parentId": 0,
  "userId": 59,
  "userName": "王志利",
  "avatarSrc": "123.jpg",
  "commentContent": "测试接口新增评论,评论rabbitMQ"
}

我实现了一个乞丐版的评论功能

6 前端评论填写流程设计

用户输入昵称,邮箱,获取验证码----》输入验证码-----》提交编写的评论
验证码,以及邮箱给出合理教研

7 联调

联调结果
我实现了一个乞丐版的评论功能

8 验证码美化

这里从网上找到一个很不错的响应式模板可以拿来使用。

<html lang="">
<meta charset="utf-8">
<body>
<div id="contentDiv" onmouseover="getTop().stopPropagation(event);"
     onclick="getTop().preSwapLink(event, 'html', 'ZC0004_vDfNJayMtMUuKGIAzzsWvc8');"
     style="position:relative;font-size:14px;height:auto;padding:15px 15px 10px 15px;z-index:1;zoom:1;line-height:1.7;"
     class="body">
    <div id="qm_con_body">
        <div id="mailContentContainer" class="qmbox qm_con_body_content qqmail_webmail_only" style="opacity: 1;">
            <style type="text/css">
        .qmbox h1,.qmbox 			h2,.qmbox 			h3 {				color: #e11e1e;			}			.qmbox p {				padding: 0;				margin: 0;				color: #333;				font-size: 16px;			}			.qmbox hr {				background-color: #d9d9d9;				border: none;				height: 1px;			}			.qmbox .eo-link {				color: #0576b9;				text-decoration: none;				cursor: pointer;			}			.qmbox .eo-link:hover {				color: #3498db;			}			.qmbox .eo-link:hover {				text-decoration: underline;			}			.qmbox .eo-p-link {				display: block;				margin-top: 20px;				color: #009cff;				text-decoration: underline;			}			.qmbox .p-intro {				padding: 30px;			}			.qmbox .p-code {				padding: 0 30px 0 30px;			}			.qmbox .p-news {				padding: 0px 30px 30px 30px;			}

            </style>
            <div style="max-width:800px;padding-bottom:10px;margin:20px auto 0 auto;">
                <table cellpadding="0" cellspacing="0"
                       style="background-color: #fff;border-collapse: collapse; border:1px solid #e5e5e5;box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);text-align: left;width: 100%;font-size: 14px;border-spacing: 0;">
                    <tbody>
                    <tr style="background-color: #f8f8f8;">
                        <td>
                            <img style="padding: 15px 0 15px 30px;width:50px"
                                 src="https://s3.bmp.ovh/imgs/2023/02/03/62d56eb6b3034807.jpg"> <span> 集美小窝. </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="p-intro">
                            <h1 style="font-size: 26px; font-weight: bold;">验证您的邮箱地址</h1>
                            <p style="line-height:1.75em;">感谢您使用 集美小窝. </p>
                            <p style="line-height:1.75em;">若非本人操作请忽视此信息</p>
                            <p style="line-height:1.75em;">以下是您的邮箱验证码,请将它输入到 集美小窝 的邮箱验证码输入框中:</p>
                        </td>
                    </tr>
                    <tr>
                        <td class="p-code">
                            <p style="color: #253858;text-align:center;line-height:1.75em;background-color: #f2f2f2;min-width: 200px;margin: 0 auto;font-size: 28px;border-radius: 5px;border: 1px solid #d9d9d9;font-weight: bold;">
                                10010086 </p>
                        </td>
                    </tr>
                    <tr>
                        <td class="p-intro">
                            <p style="line-height:1.75em;">这一封邮件包括一些您的 集美小窝
                                账号信息,请不要回复或转发它,以免带来不必要的信息泄露风险。 </p>
                        </td>
                    </tr>
                    <tr>
                        <td class="p-intro">
                            <hr>
                            <p style="text-align: center;line-height:1.75em;"> 集美小窝</p>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <style type="text/css">
        .qmbox style, .qmbox script, .qmbox head, .qmbox link, .qmbox meta {display: none !important;}

            </style>
        </div>
    </div><!-- -->
    <style>
    #mailContentContainer .txt {height:auto;}

    </style>
</div>
</body>
</html>

实现效果
::: hljs-center

我实现了一个乞丐版的评论功能

:::文章来源地址https://www.toymoban.com/news/detail-425620.html

到了这里,关于我实现了一个乞丐版的评论功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用JS来实现回车评论功能

    个人名片:  😊 作者简介:一名大一在校生,web前端开发专业  🤡  个人主页:几何小超  🐼 座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。  🎅**学习目标:  坚持每一次的学习打卡,掌握更多知识!虽然都说前端已死,但是就算不靠这个吃饭,学一点

    2024年02月06日
    浏览(80)
  • 使用SpringBoot实现无限级评论回复功能

    评论功能已经成为APP和网站开发中的必备功能。本文采用 springboot+mybatis-plus 框架,通过代码主要介绍评论功能的数据库设计和接口数据返回。我们返回的格式可以分三种方案,第一种方案是先返回评论,再根据评论id返回回复信息,第二种方案是将评论回复直接封装成一个类似于树

    2024年02月08日
    浏览(41)
  • 一张表实现短视频“评论区“完整功能

    前言         现如今,不管是哪种类型的应用,评论区都少不了。从工具类的到媒体信息流类的,评论留言都是最基本的互动环节。比如抖音短视频下,针对视频每个用户都可以发表自己的观点;而针对用户的评论,其他的用户又可以对其进行评论,依次回复下去。      

    2024年02月16日
    浏览(89)
  • Java搭配H5实现前后端交互评论功能

    前言 :         最近有个朋友有偿让我帮他们将这个评论组件整合到他们的静态网页当中,并实现数据持久化。后来他觉得太麻烦,就放弃了。尽管没有拿到相应的报酬,但只是花了短短的时间写完了这个简单功能,并有机会将其分享给大家。内容不长,全是干货,请择需

    2024年04月16日
    浏览(45)
  • WordPress实现回复文章评论后发送邮件通知的功能

    本文实例讲述了WordPress实现回复文章评论后发送邮件通知的功能。分享给大家供大家参考,具体如下: 很多时候,人们都希望在自己的评论被管理员回复后会收到通知。该函数的作用就是回复后自动邮件通知评论者。 把下面的代码加到wordpress的主题函数里面,然后修改下邮

    2023年04月24日
    浏览(44)
  • springboot+websocket+微信小程序实现评论区功能

    1. 什么是WebSocket? WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器 全双工通信 ,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是: WebSocket 是一种 双向通信协议 ,在建立连接后,WebSo

    2024年04月16日
    浏览(57)
  • 从vue小白到高手,从一个内容管理网站开始实战开发第八天,登录功能后台功能设计--业务逻辑层基础接口和基础服务实现

    上一篇我们介绍了项目后续要使用到的工具类,关于工具类的创建可以查看 从vue小白到高手,从一个内容管理网站开始实战开发第七天,登录功能后台功能设计--通用分页、枚举以及相关工具类-CSDN博客 文章浏览阅读2次。本次内容主要介绍了项目后续用到的部分工具类,这些

    2024年01月22日
    浏览(41)
  • 微信旅游景区景点评论小程序系统设计与实现

    目的 :本课题主要目标是设计并能够实现一个基于微信景区景点旅游攻略小程序系统,前台用户使用小程序,小程序使用微信开发者工具开发;后台管理使用基PP+MySql的B/S架构,开发工具使用phpstorm;通过后台添加景区景点信息,管理景区景点订单,管理评论等,用户通过小

    2024年02月11日
    浏览(51)
  • 基于微信小程序电影影视点评评论系统设计与实现

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。 项目配有对应开发文档、

    2024年04月27日
    浏览(41)
  • 微信小程序毕业设计作品成品(68)微信小程序电视剧电影影视评论系统设计与实现

    博主介绍: 《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、PPT、论文模版

    2024年02月08日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包