【前后端的那些事】评论功能实现

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


前言:最近写项目,发现了一些很有意思的功能,想写文章,录视频把这些内容记录下。但这些功能太零碎,如果为每个功能都单独搭建一个项目,这明显不合适。于是我想,就搭建一个项目,把那些我想将的小功能全部整合到一起。实现 搭一次环境,处处使用。

本文主要实现以下功能

  1. 评论功能

环境搭建
文章链接

已录制视频
视频链接

仓库地址
https://github.com/xuhuafeifei/fgbg-font-and-back.git

聊天模块

效果展示

【前后端的那些事】评论功能实现,评论,springboot,vue3,tailwind

1. 数据库表

CREATE TABLE `communicate` (
  `id` int NOT NULL AUTO_INCREMENT,
  `content` varchar(255) COLLATE utf8mb4_croatian_ci DEFAULT NULL,
  `create_time` datetime DEFAULT NULL,
  `pid` int DEFAULT NULL,
  `user_id` int DEFAULT NULL,
  `reply_user_id` int DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_croatian_ci;

2. 后端初始化

2.1 controller

CommunicateController

package com.fgbg.demo.controller;

import com.fgbg.common.utils.R;
import com.fgbg.demo.entity.Communicate;
import com.fgbg.demo.service.CommunicateService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RequestMapping("comm")
@RestController
public class CommunicateController {
    @Autowired
    private CommunicateService service;

    /**
     * 返回树形结构评论数据
     */
    @RequestMapping("/list")
    public R list() {
        List<Communicate> list = service.listTree();
        return R.ok().put("data", list);
    }

    /**
     * 保存评论
     */
    @RequestMapping("/save")
    public R save(@RequestBody Communicate entity) {
        service.save(entity);
        return R.ok();
    }
}

2.2 service

CommunicateServiceImpl

package com.fgbg.demo.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.fgbg.demo.dao.CommunicateDao;
import com.fgbg.demo.entity.Communicate;
import com.fgbg.demo.service.CommunicateService;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.stream.Collectors;

/**
 *
 */
@Service
public class CommunicateServiceImpl extends ServiceImpl<CommunicateDao, Communicate>
    implements CommunicateService{

    /**
     * 返回树形评论数据
     *
     * @return
     */
    @Override
    public List<Communicate> listTree() {
        List<Communicate> list = this.list();
        // 映射id->index
        HashMap<Integer, Integer> map = new HashMap<>();
        for (int index = 0; index < list.size(); index++) {
            map.put(list.get(index).getId(), index);
        }
        // 遍历寻找父节点
        for (Communicate communicate : list) {
            Integer pid = communicate.getPid();
            // 有父节点
            if (pid != null) {
                // 获取父节点id
                Integer indexFather = map.get(pid);
                Communicate father = list.get(indexFather);
                if (father.getChildren() == null) {
                    father.setChildren(new ArrayList<>());
                }
                // 在父节点上添加当前节点
                father.getChildren().add(communicate);
            }
        }
        // 过滤出一级节点
        List<Communicate> ans = list.stream().filter(child -> child.getPid() == null).collect(Collectors.toList());
        return ans;
    }
}

2.3 dao

CommunicateDao

package com.fgbg.demo.dao;

import com.fgbg.demo.entity.Communicate;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

/**
 * @Entity com.fgbg.demo.entity.Communicate
 */
@Mapper
public interface CommunicateDao extends BaseMapper<Communicate> {

}
2.4 mapper

CommunicateMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.fgbg.demo.dao.CommunicateDao">

    <resultMap id="BaseResultMap" type="com.fgbg.demo.entity.Communicate">
            <id property="id" column="id" jdbcType="INTEGER"/>
            <result property="content" column="content" jdbcType="VARCHAR"/>
            <result property="createTime" column="create_time" jdbcType="TIMESTAMP"/>
            <result property="pid" column="pid" jdbcType="INTEGER"/>
            <result property="userId" column="user_id" jdbcType="INTEGER"/>
            <result property="replyUserId" column="reply_user_id" jdbcType="INTEGER"/>
    </resultMap>

    <sql id="Base_Column_List">
        id,content,create_time,
        pid,user_id
    </sql>
</mapper>

3. 前端初始化

3.1 路由创建

/src/router/modules/communicate.ts

const { VITE_HIDE_HOME } = import.meta.env;
const Layout = () => import("@/layout/index.vue");

export default {
  path: "/communicate",
  name: "communicate",
  component: Layout,
  redirect: "/communicate",
  meta: {
    icon: "homeFilled",
    title: "沟通",
    rank: 0
  },
  children: [
    {
      path: "/communicate",
      name: "communicate",
      component: () => import("@/views/communicate/communicate.vue"),
      meta: {
        title: "评论",
        showLink: VITE_HIDE_HOME === "true" ? false : true
      }
    }
  ]
} as RouteConfigsTable;
3.2 目录创建

/src/views/communicate/communicate.vue

3.3 tailwindCSS安装
  • 安装

    pnpm install -D tailwindcss postcss autoprefixer
    
  • 输入命令初始化tailwind和postcss配置文件

    npx tailwindcss init -p
    
  • 打开vue项目,在src目录下新建一个css文件:index.css,在文件中写入

    @tailwind base;
     
    @tailwind components;
     
    @tailwind utilities;
    
  • main.ts中引入

    import './index.css'
    

检查tailwind.config.js。我的项目中,文件代码为

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  corePlugins: {
    preflight: false
  },
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        bg_color: "var(--el-bg-color)",
        primary: "var(--el-color-primary)",
        text_color_primary: "var(--el-text-color-primary)",
        text_color_regular: "var(--el-text-color-regular)"
      }
    }
  }
};

stylelint.config.js

module.exports = {
  root: true,
  extends: [
    "stylelint-config-standard",
    "stylelint-config-html/vue",
    "stylelint-config-recess-order"
  ],
  plugins: ["stylelint-order", "stylelint-prettier", "stylelint-scss"],
  overrides: [
    {
      files: ["**/*.(css|html|vue)"],
      customSyntax: "postcss-html"
    },
    {
      files: ["*.scss", "**/*.scss"],
      customSyntax: "postcss-scss",
      extends: [
        "stylelint-config-standard-scss",
        "stylelint-config-recommended-vue/scss"
      ]
    }
  ],
  rules: {
    "selector-class-pattern": null,
    "no-descending-specificity": null,
    "scss/dollar-variable-pattern": null,
    "selector-pseudo-class-no-unknown": [
      true,
      {
        ignorePseudoClasses: ["deep", "global"]
      }
    ],
    "selector-pseudo-element-no-unknown": [
      true,
      {
        ignorePseudoElements: ["v-deep", "v-global", "v-slotted"]
      }
    ],
    "at-rule-no-unknown": [
      true,
      {
        ignoreAtRules: [
          "tailwind",
          "apply",
          "variants",
          "responsive",
          "screen",
          "function",
          "if",
          "each",
          "include",
          "mixin",
          "use"
        ]
      }
    ],
    "rule-empty-line-before": [
      "always",
      {
        ignore: ["after-comment", "first-nested"]
      }
    ],
    "unit-no-unknown": [true, { ignoreUnits: ["rpx"] }],
    "order/order": [
      [
        "dollar-variables",
        "custom-properties",
        "at-rules",
        "declarations",
        {
          type: "at-rule",
          name: "supports"
        },
        {
          type: "at-rule",
          name: "media"
        },
        "rules"
      ],
      { severity: "warning" }
    ]
  },
  ignoreFiles: ["**/*.js", "**/*.ts", "**/*.jsx", "**/*.tsx"]
};
  • 测试是否引入成功

    <p class=" text-2xl font-bold">Hello Tailwind!</p>
    

    如果出现css样式,则表明引入成功

4. tailwindUI

聊天框样式涉及参考了这个大神的UI设计

网址:[comment聊天](comment | Cards (tailwindcomponents.com))

源代码

<div class="flex justify-center relative top-1/3">




<!-- This is an example component -->
<div class="relative grid grid-cols-1 gap-4 p-4 mb-8 border rounded-lg bg-white shadow-lg">
    <div class="relative flex gap-4">
        <img src="https://icons.iconarchive.com/icons/diversity-avatars/avatars/256/charlie-chaplin-icon.png" class="relative rounded-lg -top-8 -mb-4 bg-white border h-20 w-20" alt="" loading="lazy">
        <div class="flex flex-col w-full">
            <div class="flex flex-row justify-between">
                <p class="relative text-xl whitespace-nowrap truncate overflow-hidden">COMMENTOR</p>
                <a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
            </div>
            <p class="text-gray-400 text-sm">20 April 2022, at 14:88 PM</p>
        </div>
    </div>
    <p class="-mt-4 text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>Maxime quisquam vero adipisci beatae voluptas dolor ame.</p>
</div>



</div>

【前后端的那些事】评论功能实现,评论,springboot,vue3,tailwind

tip: 本项目编写时,对其代码进行一定程度的调整

5. 前端代码编写

笔者考虑篇幅问题,没有封装组件。读者可以尝试着将聊天代码封装为组件,一级评论一个样式,回复评论一个样式。通过这样的方式实现代码复用。文章来源地址https://www.toymoban.com/news/detail-802569.html

<script setup lang="ts">
import { CommunicateEntity, list, save } from "/src/api/communicate.ts";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";

const input = ref("");

const replyInput = ref("");

const chatList = ref<Array<CommunicateEntity>>();

const submit = (replyUserId?: Number, pid?: Number) => {
  const entity = new CommunicateEntity();
  entity.replyUserId = replyUserId;
  entity.content = input.value;
  entity.pid = pid;
  console.log(entity);

  save(entity).then(res => {
    if (res.code === 0) {
      ElMessage.success("提交成功");
      getData();
    } else {
      ElMessage.error("提交失败: " + res.msg);
    }
  });
};

onMounted(() => {
  getData();
});

const getData = () => {
  list().then(res => {
    console.log(res);
    chatList.value = res.data;
  });
};

// 模拟获取用户信息(一般用户信息会在登陆时, 存储在浏览器本地)
const getUser = (userId: Number) => {
  return "测试人员";
};
</script>

<template>
  <div style="border: 1px solid #ccc; margin-top: 10px">
    <el-input v-model="input" textarea style="height: 200px" />
    <el-button @click="submit()">提交</el-button>
    <el-divider />
    <div v-for="item in chatList" :key="item.id">
      <!-- This is an example component -->
      <div class="relative gap-4 p-6 rounded-lg mb-8 bg-white border">
        <div class="relative flex gap-4">
          <img
            src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
            class="relative rounded-lg -top-8 -mb-4 bg-white border h-20 w-20"
            alt=""
            loading="lazy"
          />
          <div class="flex flex-col w-full">
            <div class="flex flex-row justify-between">
              <p
                class="relative text-xl whitespace-nowrap truncate overflow-hidden"
              >
                {{ getUser(item.id) }}
              </p>
              <a class="text-gray-500 text-xl" href="#"
                ><i class="fa-solid fa-trash"
              /></a>
            </div>
            <p class="text-gray-400 text-sm">{{ item.createTime }}</p>
          </div>
        </div>
        <p class="-mt-4 text-gray-500">
          {{ item.content }}
        </p>
        <!-- 回复按钮 -->
        <div>
          <el-popover placement="bottom-start" trigger="click" :width="200">
            <template #reference>
              <el-button style="float: right" link type="primary"
                >回复</el-button
              >
            </template>
            <el-input v-model="input" />
            <el-button @click="submit(item.userId, item.id)" style="width: 100%"
              >确定</el-button
            >
          </el-popover>
        </div>
      </div>
      <!-- 回复 -->
      <div v-for="subItem in item.children" :key="subItem.id">
        <div
          class="relative gap-4 p-6 rounded-lg mb-8 bg-white border"
          style="margin-left: 50px"
        >
          <div class="relative flex gap-4">
            <img
              src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
              class="relative rounded-lg -top-8 -mb-4 bg-white border h-20 w-20"
              alt=""
              loading="lazy"
            />

            <div class="flex flex-col w-full">
              <div class="flex flex-row justify-between">
                <p
                  class="relative text-xl whitespace-nowrap truncate overflow-hidden"
                >
                  {{ getUser(subItem.userId) }} 回复
                  <span style="color: cornflowerblue"
                    >@{{ getUser(subItem.replyUserId) }}</span
                  >
                </p>
                <a class="text-gray-500 text-xl" href="#"
                  ><i class="fa-solid fa-trash"
                /></a>
              </div>
              <p class="text-gray-400 text-sm">{{ item.createTime }}</p>
            </div>
          </div>
          <p class="-mt-4 text-gray-500">
            {{ subItem.content }}
          </p>
          <!-- 回复按钮 -->
          <div>
            <el-popover placement="bottom-start" trigger="click" :width="200">
              <template #reference>
                <el-button style="float: right" link type="primary"
                  >回复</el-button
                >
              </template>
              <el-input v-model="input" />
              <el-button
                @click="submit(item.userId, item.id)"
                style="width: 100%"
                >确定</el-button
              >
            </el-popover>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>

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

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

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

相关文章

  • vue3 - swiper插件 实现PC端的 视频滑动功能(仿抖音短视频)

     swiper官网 ​​​​​​swiper属性/组件查询 步骤: ① npm install swiper 安装 ② 基础模板:   如图: 属性: direction = \\\" \\\'vertical\\\' \\\" ,滑动方向,vertical 垂直方向。(注:一定要两对引号包裹着,否则不生效,还要给swiper设置实高) modules = \\\"modules\\\" grabCursor=\\\"true\\\" ,鼠标手掌形状

    2024年02月03日
    浏览(90)
  • SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--功能实现[五]

    需求分析/图解 思路分析 完成后台代码从dao - serivce - controller , 并对每层代码进行测试 完成前台代码,使用axios 发送http 请求,完成带条件查询分页显示 代码实现 修改FurnService.java 和FurnServiceImpl.java , 增加条件查询 修改FurnService.java 修改FurnServiceImpl.java 修改FurnController.java , 处

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

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

    2024年04月16日
    浏览(45)
  • SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--具体功能实现【三】

    需求分析/图解 思路分析 完成后台代码从dao - serivce - controller , 并对每层代码进行测试, 到controller 这一层,使用Postman 发送http post 请求完成测试 完成前端代码, 使用axios 发送ajax(json 数据)给后台, 实现添加家居信息 代码实现 创建srcmainjavacomnlcfurnsserviceFurnService.java 和src

    2024年02月14日
    浏览(43)
  • 【前后端的那些事】开源!treeSelect树形结构数据展示

    前言 :最近写项目,发现了一些很有意思的功能,想写文章,录视频把这些内容记录下。但这些功能太零碎,如果为每个功能都单独搭建一个项目,这明显不合适。于是我想,就搭建一个项目,把那些我想将的小功能全部整合到一起。实现 搭一次环境 ,处处使用。 本文主要

    2024年02月01日
    浏览(39)
  • SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现

    系列文章: SpringBoot + Vue前后端分离项目实战 || 一:Vue前端设计 SpringBoot + Vue前后端分离项目实战 || 二:Spring Boot后端与数据库连接 SpringBoot + Vue前后端分离项目实战 || 三:Spring Boot后端与Vue前端连接 SpringBoot + Vue前后端分离项目实战 || 四:用户管理功能实现 SpringBoot + Vue前后

    2024年02月11日
    浏览(59)
  • 【前后端的那些事】开源!快速上手富文本+富文本图片上传

    前言 :最近写项目,发现了一些很有意思的功能,想写文章,录视频把这些内容记录下。但这些功能太零碎,如果为每个功能都单独搭建一个项目,这明显不合适。于是我想,就搭建一个项目,把那些我想将的小功能全部整合到一起。实现 搭一次环境 ,处处使用。 本文主要

    2024年01月20日
    浏览(58)
  • SpringBoot+Vue实现校园二手系统。前后端分离技术【完整功能介绍+实现详情+源码】

    全部源代码地址 :传送门 文章内容有点长,建议打开右侧目录导航栏查看 。         这个系统基本上可以改造为其它类似的系统。后台管理基本上一致。前台进行一些页面样式的改造就可以变成一个新的系统。有时间,做几个变体系统。        闲的无聊,把大学时候

    2024年02月07日
    浏览(46)
  • 【前后端的那些事】2万字详解WebRTC + 入门demo代码解析

    WebRTC是一项允许网页浏览器进行实时音视频通信的技术标准。旨在实现在浏览器之间直接进行点对点的音频、视频以及数据共享,无需安装任何插件或额外软件。 ICE全称Interactive Connectivity Establishment ,是一种交互式连接框架,他允许两个设备进行p2p通讯。 在进行p2p通讯过程

    2024年03月11日
    浏览(41)
  • SpringBoot+Vue3实现登录验证码功能

    Redis缓存穿透、击穿、雪崩问题及解决方法 Spring Cache的使用–快速上手篇 分页查询–Java项目实战篇 全局异常处理–Java实战项目篇 Java实现发送邮件(定时自动发送邮件)_java邮件通知_心态还需努力呀的博客-CSDN博客 该系列文章持续更新,更多的文章请点击我的主页查看哦!

    2024年02月01日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包