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

已于 2023-04-19 13:47:36 修改
阅读量2k 收藏 4
点赞数 2
文章标签： vue.js javascript 前端 spring boot mysql
于 2023-04-19 13:45:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40850266/article/details/130242111
版权

文章目录

设计评论功能

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>

效果

图片.png

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})
        }
      });
    }

联调结果
image.png

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

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"
}

image.png

6 前端评论填写流程设计

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

7 联调

联调结果
image.png

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

在这里插入图片描述

:::

晓倾城
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
乞丐版mvp设计模式
11-12
乞丐版MVP架构模式的代码实现，参考地址：https://www.jianshu.com/p/5c3bc32afa36
Vite入门从手写一个乞丐版的Vite开始（上）
09-15
Vite是什么就不用笔者多说了，用过Vue的朋友肯定都知道，本文会通过手写一个非常简单的乞丐版Vite来了解一下Vite的基本实现原理，参考的是Vite最早的版本（vite-1.0.0-rc.5版本，
js实现一个乞丐版的 promise 小 demo
业余前端的职业经历
09-04 205
勉强实现了把 function MyPromise(callback){ this.status="pending", // 标记状态 this.value=undefined; // resolve函数接受的参数 this.reason=undefined; // reject 函数 this.onFulfilledCallbacks=new Set(); // 成功回调 函数集合 this.onRejectedCallbacks=new Set(); //
如何实现一个乞丐版JSBox (一) 引擎篇
weixin_34185512的博客
06-12 1098
前言 代码地址 JSBox是钟大创造的一个可以用JavaScript来编写脚本的一个APP。它提供了一套界面方案，然后也提供了基本上所有的原生能力。一定程度上可以看做是一个简化版的小程序。并且它内部还实现了一个简易的代码编辑器，你可以直接在APP上写代码啦~如果你感兴趣还是强烈建议你去下一个JSBox支持一下钟大的。 对于一个APP极度喜爱的时候，我一般是会尝试去实现一下它的功能。之前尝试仿了下C...
C#实现乞丐版IOC容器
dotNET跨平台
10-22 1009
一、前言netcore中的容器非常好用，今天我们自己来简单实现一个。实现容器的核心接口有两个：IServiceCollection、IServiceProvider。其中IService...
实现乞丐版vue
weixin_30819163的博客
07-17 84
由于工作中经常使用vue，所以对它的内部构造非常着迷，一直想探究其究竟。也看了不少文章，无奈水平所限并不能吃透、看透。所以运用目前自己所学，写了demo,本demo总共100行左右，实现v-model,v-bind,v-click等功能。 由于水平所限，本demo写的不是很规范，考虑的不是很周全，程序设计不太合理。只能实现基本的功能，作为学习的一个记录。还希望大神勿喷，欢迎批评指正。 第一次写...
初中语文文摘历史一个乞丐的心灵
09-09
初中语文文摘历史一个乞丐的心灵
mini-vue:（乞丐版vue）看完vue源码。。自己理解的实现一个
03-23
看完原始码还是自己手撸一个简单的加深功力 已完成 初始化 数据劫持 观察者观察等 AST 渲染函数 虚拟 补丁第一版完成 待完成（第二版本） 代码优化,,现在代码结构有点乱 支持组件 写完第一版感想： 其实写之前...
文字到视频：知乎文章转视频的实现（乞丐版）
03-03
文字转影片 知乎文章转视频的实现（乞丐版）
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 434
步骤很详细，直接上教程……
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 226
vue echarts 柱状图 堆叠柱状图
vue 实现级联选择器功能
清音的博客
04-22 536
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 429
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
微信小程序vue.js+uniapp服装商城销售管理系统nodejs-java
专注分享bishe530的博客
04-21 431
最基本的是，Spring Boot是一个可以被任何项目的构建系统使用的库集合。Spring Boot 是 Spring 家族中的一个全新的框架，它用来简化Spring应用程序的创建和开发过程。（4）实证研究法：自己进行大量的编码测试，一切从动手编码出发，结合自己以前的编程基础，实现系统所需要的功能。entity: 实体，用来放与数据库表里对应的实体类，表中的字段对应类中的属性值，并附有set/get方法。（1）调查法：从实际的系统开发目的出发，结合系统需求调研，得出本系统的功能结构模块。
Vue-router的动态路由：获取传递的值
woliuhuaqiangla的博客
04-22 415
Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。它提供了许多有用的功能，其中之一是Vue-router，它允许您轻松地管理应用程序的路由。Vue-router支持动态路由，这意味着您可以在路由中使用变量，并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由，以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由，这在使用Vue-router时是非常常见的。
大学生在线考试|基于SprinBoot+vue的在线试题库系统系统(源码+数据库+文档)
伟庭的博客
04-24 881
精品在线试题库系统有管理员，教师，学生三个角色。管理员功能有个人中心，专业管理，学生管理，教师管理，试卷管理，试题管理，考试管理。教师可以管理试题和试卷，查看学生考试记录和错题本。学生可以参加考试，查看试卷和错题本以及考试记录。经过前面自己查阅的网络知识，加上自己在学校课堂上学习的知识，决定开发系统选择B/S模式这种高效率的模式完成系统功能开发。
Vue 组件分类、局部注册和全局注册
zsx0728的博客
04-26 313
组件分为根组件与普通组件，本文用案例介绍了局部注册和全局注册。
vue 的生命周期--图解
mwm2378的博客
04-21 275
vue 的生命周期--图解
halcon算子速查手册(乞丐版)
11-15
Halcon算子速查手册是一本简明扼要的参考手册，旨在提供给用户快速查询Halcon算子的功能和用法。这本手册经过了精心设计，采用了简洁明了的排版和图示，以便用户能够快速理解和掌握算子的使用方法。 手册主要分为三个部分：算子索引、算子功能说明和算子示例。算子索引按照字母顺序排列，用户可以根据需要快速找到目标算子的位置。每个算子的功能说明包括了算子的输入参数、输出参数以及详细的使用说明，帮助用户了解算子的作用和使用方法。在算子示例部分，手册提供了一些常见算子的示例代码，用户可以参考这些示例来理解算子的具体运用。 这本手册的风格简洁明了，没有过多的文字和废话，突出了算子的核心功能和要点。为了节约空间，手册中使用了简洁的符号和图示，以便用户快速获取信息。另外，手册还提供了一些常见问题和解答，帮助用户在使用过程中遇到问题时能够及时找到答案。 总之，Halcon算子速查手册(乞丐版)是一本简明扼要的参考手册，对于有一定Halcon基础的用户来说，是一个非常实用的工具。它为用户提供了一个快速、简便的方式来查询和掌握Halcon算子的功能和用法，提高了用户的工作效率。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值