Java搭配H5实现前后端交互评论功能

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

前言

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

一、框架介绍

        (1)后端采用 JPA + SpringWeb。这里选择 JPA 主要是因为 JPA 可以自动建表。

        (2)前端采用 H5 + JS。选择 H5 和原生 JS 主要是考虑到灵活性和兼容性。

        (3)源代码已上传到资源绑定,请按需下载

二、前端

        (一)、存在 XSS 漏洞的版本

                1、这个版本的代码,可以看这篇博文。与解决XSS漏洞版本不同的是,这个版本的样式在动态渲染时使用的是 innerHTML 赋值,这种赋值会有一个弊端,就是会对输入内容进行标签解析,如果用户输入了类似“<div>我是文本</div>”的内容,会被解析成H5标签,这将给不法分子攻击并窃取你网站信息制造良机,因此对于用户输入的内容,要做到敏感信息过滤并加以限制或对用户输入的内容采用文本解析的方式。以下是一个正面例子:

const commentContent = document.createElement('div');
commentContent.style.display = 'block';
commentContent.style.marginTop = '8px';
commentContent.classList.add('comment');
commentContent.textContent = value.comment;

               2、该版本没有实现与后端交互,因此内容不会被持久化。

        (二)、解决了 XSS 漏洞的版本

              1、如何请求后端。下面会给出一段 JavaScript 中不使用 Ajax 请求后端的代码示例

    function createOrGetUserName() {
        let userName = localStorage.getItem('userName');
        if (!userName) {
            const url = "http://127.0.0.1:8080/comment/getRandomUserName";
            const req = new XMLHttpRequest();
            // open 函数第三个参数是 async, 是否同步
            req.open('get', url, true);
            // 根据请求后端的参数类型,设置请求头
            req.setRequestHeader('Content-Type', 'application/json')
            req.onreadystatechange = function () {
                if (req.readyState === 4) {
                    if (req.status === 200 || req.status === 304) {
                        const resp = JSON.parse(req.responseText);
                        if (resp.code === 200) {
                            localStorage.setItem('userName', resp.result);
                        }
                    }
                }
            }
            req.send();
        }
        return localStorage.getItem('userName');
    }

              2、请求后端我们一般都会使用 Ajax 或者 VUE 的 Axios 等等,这里可以使用  XMLHttpRequest 来替代,并设计“增删改查”相应的API。

三、后端

          后端这里只是对一些功能做简单介绍。具体代码可以下载源码自行研究。

        (一)、JPA 框架

            1、JPA自动建表。在properties文件中使用如下配置可以在实体(Entity)结构更新时,更新数据库中对应的表结构。

spring.jpa.hibernate.ddl-auto=update

            2、建表前,我们可以创建对应的实体,设计好表的字段与表名。实体创建好后,启动项目,当该实体被应用时,会自动在指定的数据库创建对应的表结构。

@Entity
@Table(name = "ATable")
public class TableName {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    @Column(name = "field_name")
    private String fieldName;

    // ... Too many fields
}

         3、JPA的功能很丰富,比如一对多的查询,可以使用 @oneToMany 注解来实现。自定义 SQL 查询可以在 @Query 注解中完成。这里就不多做介绍了,具体可以去看看相关的博文介绍。

      (二)、评论树的结构

         1、XSS 版本中已经介绍了评论树的结构怎样呈现最合宜。两层关系既直观又容易实现与维护。评论谁?我们会创建一个 Author 字段,来存储被评论者和被回复者的 ID。那么在构建这个3层的 N 叉树时,除去 root,对于每个直接对文章评论的用户放入一层列表,然后对这第一层列表进行递归,并将其所有一级或二级子节点放入这一层列表相应节点的 children 列表即可。下面是构建评论树的 Java 代码。文章来源地址https://www.toymoban.com/news/detail-853162.html

    public static List<Comment> treeify(List<Comment> res) {
        List<Comment> newRes = new ArrayList<>();
        // 构建关系表
        Map<Integer, List<Comment>> relations = new HashMap<>();
        for (Comment c : res) {
            c.setUuidList(UUIDUtil.getUUIDList(5));
            String admirers = c.getAdmirers();
            Map<String, Boolean> admirerStatus = new HashMap<>();
            if (admirers != null && !admirers.isEmpty()) {
                String[] split = admirers.split(",");

                for (String name : split)
                    admirerStatus.put(name, true);
            }

            c.setAdmirerStatus(admirerStatus);
            // -1 是代表文章作者也就是 N 叉树的 root
            if (-1 == c.getAuthorId())
                newRes.add(c);
       
            List<Comment> commentList = relations.getOrDefault(c.getAuthorId(), new ArrayList<>());
            commentList.add(c);
            // 保存关系
            relations.put(c.getAuthorId(), commentList);
        }
        for (Comment c : newRes) {
            c.setReply(new ArrayList<>());
            // 递归添加子节点
            recur(relations, c.getId(), c);
        }
        return newRes;
    }

    public static void recur(Map<Integer, List<Comment>> rel, Integer id, Comment father) {
        if (rel.containsKey(id)) {
            for (Comment c : rel.get(id)) {
                father.getReply().add(c);
                recur(rel, c.getId(), father);
            }
        }
    }

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

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

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

相关文章

  • Java-Web前后端交互实现登陆注册(附源码)

    1.完成用户登录功能。 2.完成注册功能。 3.主体利用Maven导入java中的jar包,使用Servlet实现前后端交互,使用mybatis以及注解,mysql进行数据保存,Tomcat服务器进行开发。 效果图 项目结构 代码 mapper(相对应注解) pojo(实体类) 3.util(工具类) 4.web(Servlet) 1.loginServlet 2.registerServlet

    2023年04月21日
    浏览(30)
  • 【JoAPP】Android WebView与H5交互实现(JAVA+KOTLIN)

           最近一个应急平台的项目移动端开发,原计划用UNI-APP实现,客户想着要集成语音、视频通话功能,基于经验判断需要买一套IM原生移动端框架去结合H5整合比较合适,没想到最后客户不想采购,而且语音视频通话功能也迟迟未能完全确认,H5部分所开发的业务功能已经

    2024年02月03日
    浏览(43)
  • Java企业工程管理系统源码+项目说明+功能描述+前后端分离 + 二次开发

        工程项目各模块及其功能点清单 一、系统管理     1、数据字典:实现对数据字典标签的增删改查操作     2、编码管理:实现对系统编码的增删改查操作     3、用户管理:管理和查看用户角色     4、菜单管理:实现对系统菜单的增删改查操作     5、角色管理:管理

    2023年04月09日
    浏览(49)
  • Java在线OJ项目(三)、前后端交互API模块

    前端:通过problem的URL地址访问(如果没有其它参数,则是查询所有题目,如果有id参数,就是查询具体题目) 后端:返回题目的具体详情 前端 获取所有题目 获取一个题目 后端 前端提交代码 后端处理

    2024年02月14日
    浏览(58)
  • 开发笔记 | JAVA过滤器Filter实现全局接口入参去除前后空格

    目录 思考过程 遇到的问题 过滤器Filter使用步骤 全局去除入参前后空格代码实现 处理过程中自己造成的一些问题 需求背景: 前端所有的条件查询去除前后空格,如搜 【\\\"   测试    \\\"】后端将其转为【测试】。之前都是前端统一处理的,但是这次要后端处理,那么就得考虑

    2024年02月12日
    浏览(39)
  • SpringBoot整合hdfs,实现文件上传下载删除与批量删除,以及vue前端发送请求,实现前后端交互功能;

    部分工具类代码参考文章:https://blog.csdn.net/qq_27242695/article/details/119683823 前端实现效果 HDFSController HDFS FileInterface (文件接口) HDFS FileImplService (文件接口实现类) HDFSConfig(从yaml读取文件) HDFSUTils 前端vue代码:

    2024年02月16日
    浏览(79)
  • 网页版Java(Spring/Spring Boot/Spring MVC)五子棋项目(二)前后端实现用户的登录和注册功能【用户模块】

    1. 用户id 2. 用户名 3. 密码 4. 天梯积分 5. 总场数 6. 获胜场数 和数据库的数据一一对应 1. 连接数据库(application.yml连接数据库) 这个可以直接赋值代码 2. 创建UserMapper的Java接口(interface UserMapper) 创建接口,在UserMapper.xml实现 在model中创建 需要实现@Mapper注释 3. 创建UserMappe

    2024年02月13日
    浏览(47)
  • Java-web:使用Axios代替JSP进行前后端分离与数据交互

    使用Servlet注解代替配置web.xml文件 在servlet3.0版本支持使用注解 1.创建一个Servlet响应axios发送的请求 JSP代替: 还原JSP到HTML: Axios:将ajax进行封装,简化JS发送异步请求的代码 Axios官网:https://www.axios-http.cn/ 下载axios.js文件到本地然后再HTML头文件引入或者直接引用网址的JS头文

    2024年02月06日
    浏览(39)
  • 【Java 进阶篇】Java Web开发:实现验证码功能

    在Web应用程序中,验证码(CAPTCHA)是一种常见的安全工具,用于验证用户是否为人类而不是机器。验证码通常以图像形式呈现,要求用户在登录或注册时输入正确的字符。在这篇文章中,我们将详细介绍如何在Java Web应用程序中实现验证码功能。 验证码是“全自动区分计算机

    2024年02月03日
    浏览(38)
  • 前后端分离java开发图形验证码+谷歌开源Kaptcha使用(Springboot+redis实现图形验证码校验)

    注册 - 登录 - 修改密码 一般需要发送验证码,但是容易被攻击恶意调用。 手机短信轰炸机是批量、循环给手机无限发送各种网站的注册验证码短信的方法。 短信一条5分钱,如果被大盗刷大家自己计算邮箱通知不用钱,但被大盗刷,带宽、连接等都被占用,导致无法正常使用

    2024年01月19日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包