用Angularjs+mybatis做出评论系统

这次给大家带来用angularjs+mybatis做出评论系统,用angularjs+mybatis做评论系统的注意事项有哪些?下面就是实战案例,一起来看一下。

一直想写个评论系统,看了下多说,网易,简书的评论,想了下自己该实现怎样的评论系统。评论系统关键是嵌套层数以及数据库表设计。嵌套层数多,表结构复杂,呈现也麻烦,最后决定实现一个二级评论。系统由maven构建,springboot快速搭建spring环境。前台采用angularjs+bootstrap,后台使用springmvc+mybatis,数据库采用mysql.前台请求后台API操作评论。

目录结构

1.png

数据库表设计

##说说表或者文章表  create table saying (          saying_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,          sayingContent VARCHAR(500) NOT NULL,          author VARCHAR(50) NOT NULL,          sayingAvatar VARCHAR(50) NOT NULL,          likes VARCHAR(500) NOT NULL,          createTime datetime NOT NULL  ) ENGINE=InnoDB  DEFAULT CHARSET=utf8;    ##一级评论表  create table firstLevelComment (          flc_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,          sayingId INT NOT NULL,          commenter VARCHAR(50) NOT NULL,          commenterAvatar VARCHAR(50) NOT NULL,          commentContent VARCHAR(500) NOT NULL,          commentTime datetime NOT NULL  ) ENGINE=InnoDB  DEFAULT CHARSET=utf8;    ##二级评论表  create table secondLevelComment (          slc_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,          sayingId INT NOT NULL,          flcId INT NOT NULL,          replier VARCHAR(50) NOT NULL,          toCommenter VARCHAR(50) NOT NULL,          replyContent VARCHAR(50) NOT NULL,          replyTime datetime NOT NULL  ) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

登录后复制

获取评论的mapper(关键)

  nbsp;mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >                                                                                                                                                                                                                                              select * from       (select * from saying s left join firstLevelComment fc on s.saying_id=fc.sayingId where s.saying_id=#{id}) tmp left join secondLevelComment sc      on tmp.flc_id = sc.flcId                   update saying set likes = #{likes} where saying_id = #{id}       

登录后复制

1.png

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

相关阅读:

使用Pixi.js的总结

在Python中如何执行ExecJs语句

在vue首页怎样做出底部导航TabBar

用Video.js实现H5直播界面

以上就是用Angularjs+mybatis做出评论系统的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2784763.html

(0)
上一篇 2025年3月8日 17:15:08
下一篇 2025年3月8日 17:15:21

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js数组去重与去扁平化详解

    本文主要和大家分享js数组去重与去扁平化详解希望能帮助到大家。 数组去重 var arr = [1, 43, 4, 3, 2, 4, 3];  // 去重后    arr = [1, 43, 4, 3, 2] 传统方法,for循环实现 fu…

    编程技术 2025年3月8日
    200
  • Node.js的PEGjs该如何使用

    这次给大家带来node.js的pegjs该如何使用,在node.js中使用pegjs的注意事项有哪些,下面就是实战案例,一起来看一下。 (1)安装pegjs npm install pegjs 登录后复制 (2)grammer.pegjs …

    编程技术 2025年3月8日
    200
  • Vue.JS的自定义指令应该如何使用

    这次给大家带来vue.js的自定义指令应该如何使用,使用vue.js的自定义指令的注意事项有哪些,下面就是实战案例,一起来看一下。 Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行…

    编程技术 2025年3月8日
    200
  • Immutable.js详解

    这次给大家带来immutable.js详解,使用immutable.js的注意事项有哪些,下面就是实战案例,一起来看一下。 Immutable.js在react + router + redux项目中的应用 先介绍一下Immutable: …

    编程技术 2025年3月8日
    200
  • AngularJS之HelloWorld实例

    本文主要和大家分享angularjs之helloworld实例,希望能帮助到大家。 1、.angular-cli.json {  “$schema”: “./node_modules/@angular/cli/lib/config/sche…

    编程技术 2025年3月8日
    200
  • 前端关于Node.js的面试题

    这次给大家带来前端关于node.js的面试题,面试前端关于node.js岗位有哪些需要注意的,下面就是实战题目,一起来看一下。 【相关推荐:前端面试题(2020)】 如果你希望找一份有关Node.js的工作,但又不知道从哪里入手评测自己对N…

    编程技术 2025年3月8日
    200
  • js的Prototype属性用法详解

    每一个构造函数都有一个属性叫做原型(prototype,下面都不再翻译,使用其原文)。这个属性非常有用:为一个特定类声明通用的变量或者函数。 prototype的定义你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它…

    2025年3月8日
    200
  • 前端js打印(导出)excel表格的方法实例

    本文主要和大家分享前端js打印(导出)excel表格的方法实例,希望能帮助到大家。 产品原型: 图片.png 功能需求:点击导出考勤表格按钮,会自动下载成Excel格式 立即学习“前端免费学习笔记(深入)”; 图片.png 图片.png j…

    2025年3月8日
    200
  • AngularJS使用webApi导出数据

    本文主要和大家分享angularjs使用webapi导出数据代码实例,希望本文的代码能帮助到大家。  /////导出功能    self.importExcel = function () {        var dataUrl = “h…

    编程技术 2025年3月8日
    200
  • vue.js、element-ui、vuex环境搭建实例分享

    本文主要和大家分享vue.js、element-ui、vuex环境搭建实例,本文主要以图文实例和代码分享,希望能帮助到大家。 一、初始化项目 vue init webpack  登录后复制 二、初始化依赖包 npm install 登录后复…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论