基于Angularjs+mybatis实现二级评论系统(仿简书)

一直想写个评论系统,看了下多说,网易,简书的评论,想了下自己该实现怎样的评论系统。

评论系统关键是嵌套层数以及数据库表设计。嵌套层数多,表结构复杂,呈现也麻烦,最后决定实现一个二级评论。系统由maven构建,springboot快速搭建spring环境。前台采用angularjs+bootstrap,后台使用springmvc+mybatis,数据库采用MySQL.前台请求后台API操作评论。

目录结构

数据库表设计

##说说表或者文章表
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(关键)

<?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="personal.timeless.cms.mapper.SayingMapper" > 

 <resultMap id="SayingMap" type="saying" >
 <id column="saying_id" property="id" jdbcType="INTEGER" />
 <result column="sayingContent" property="sayingContent" jdbcType="INTEGER" />
 <result column="author" property="author" jdbcType="VARCHAR" />
 <result column="sayingAvatar" property="avatar" jdbcType="VARCHAR" />
 <result column="likes" property="likes" jdbcType="VARCHAR" />
 <result column="createTime" property="createTime" jdbcType="TIMESTAMP" />
 <collection property="flcs" ofType="firstLevelComment" column="sayingId">
 <id column="flc_id" property="id" jdbcType="INTEGER" />
 <result column="sayingId" property="sayingId" jdbcType="INTEGER" />
 <result column="commenter" property="commenter"/>
 <result column="commenterAvatar" property="avatar"/>
 <result column="commentContent" property="commentContent"/>
 <result column="commentTime" property="commentTime" jdbcType="TIMESTAMP" />
 <collection property="slcs" ofType="secondLevelComment" column="flcId">
  <id column="slc_id" property="id" jdbcType="INTEGER" />
  <result column="flcId" property="flcId" jdbcType="INTEGER" />
  <result column="replier" property="replier"/>
  <result column="toCommenter" property="toCommenter"/>
  <result column="replyContent" property="replyContent"/>
  <result column="replyTime" property="replyTime" jdbcType="TIMESTAMP" />
 </collection>
 </collection>
 </resultMap> 

 <select id="selectOneById" resultMap="SayingMap" parameterType="int" >
 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
 </select> 

 <select id="updateLikesById">
 update saying set likes = #{likes} where saying_id = #{id}
 </select>
 </mapper> 

页面展示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 使用AngularJS和PHP的Laravel实现单页评论的方法

    完整代码:https://github.com/scotch-io/laravel-angular-comment-app 目前,Laravel和Angular均已经成为了Web发展世界里非常著名的工具.Laravel以给PHP社区引入的伟大内容著称,Angular以其惊人的前端工具及简单著称.组合这两大框架似乎是合乎逻辑的下一步. 在我们的使用环境下,我们将使用Laravel作为后端的RESTful API,Angular作为前端,以创建一个简单的单页的评论应用. 下面是一个简单的例子,展示了

  • Angular实现类似博客评论的递归显示及获取回复评论的数据

    前言 我们在一些技术博客中会经常看到很多递归评论,也即是我们可以回复博友的评论,且界面很美观,有梯度的显示格式,日前在空余时间写类似的 demo,所以记录下来,可以给需要的人一些借鉴的作用. 好了,废话少说,直奔主题... 思路 我们在写后台程序的时候,经常会遇到生成类似树的这种数据结构,我们直觉就是使用递归的方法来实现,起初我也是这么想的,就是写一个 Angular4 的递归方法,组成一个字符串,然后在界面显示,类似下面代码 @Component({ selector: "comment&qu

  • 基于Angularjs+mybatis实现二级评论系统(仿简书)

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

  • Android仿简书长按文章生成图片效果

    前言 使用简书APP的同学都知道,简书有这样一个功能:文章页长按内容时底部会出现一个 生成图片分享 的按钮,点击之后就可以将当前的文章生成一张长图片:这张图片可以保存到本地或分享给好友,同时还可为图片设置成为白和黑两种风格,很有艺术范.个人一直很喜欢这个功能. 但是从某一个版本开始,这个功能开始有bug了,生成的图片只有底部的固定标题,而没有文章内容,长图也变成了小短图.向简书意见反馈后,得到的回复是,使用点击分享按钮生成图片功能:分享菜单包含的生成长图功能的确是可以的.但是,还是很怀念之前长按

  • Android 开发仿简书登录框可删除内容或显示密码框的内容

    简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedittextdemo; import android.content.Context; import android.graphics.Rect; import android.graphics.drawable.Drawable; import android.text.Editable; impor

  • Android仿简书动态searchview搜索栏效果

    简书的动态搜索栏效果是这样的,挺高大上的感觉. ezgif.com-resize.gif 仔细想一下,其实实现起来非常简单,这是我做的效果,基本完美还原. ezgif.com-resize (2).gif 实现这个效果, 只要关注几个点 1.搜索栏伸展和收缩动画效果实现 2.搜索栏伸展和收缩的时机 3.顶部透明度的渐变 搜索栏伸展和收缩动画效果实现: 我们只要明确,使用系统为我们提供的Transition框架,就可以轻而易举的实现了. 首先要引入依赖compile 'com.android.su

  • 用vue写一个仿简书的轮播图的示例代码

    1.先展示最终效果: 2.解决思路 Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮播效果.动画效果交给transition完成.可以将轮播图看成两个(mainSlide和extraSlide),各个图片的位置如图所示: 3.代码实现 各个slide的样式: $width: 800px; // 容器宽度 $height: 300px; // 容器高度 $bWidth: 500px; // 大图片宽度 $

  • iOS仿简书、淘宝等App的View弹出效果

    用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四个View,self.view , 图中白色VC的View rootVC.view ,白色VC上的maskView maskView , 以及弹出的popView popView .我们创建它们: self.view.backgroundColor = [UIColor blackColor]; _po

  • Android仿简书搜索框效果的示例代码

    前言 之前用简书的时候一直是在web端,后来下载了客户端,看到了搜索的那个动画,就尝试的去写了,没写之前感觉挺容易的,写了之后,就感觉里面还是有些要注意的东西的.话不多说,直接上图. Activity 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

  • Android基于BaseExpandableListAdapter实现的二级列表仿通话记录功能详解

    本文实例讲述了Android基于BaseExpandableListAdapter实现的二级列表仿通话记录功能.分享给大家供大家参考,具体如下: android SDK中带有这样类似的例子,但是那个还是静态数据,没有实际应用价值,参考意义不大. 网上找了很多,还是那样的情况,几乎是同一篇文章,大家转来转去.况且,那篇例子也是静态的数据. 还是自己试试,自己写一个吧.程序读取手机系统的通话记录,按联系人分组,显示到列表. 开发工具:eclipse 运行环境:htc G9 android2.3.3

  • 详解Mybatis的二级缓存配置

    一个项目中肯定会存在很多共用的查询数据,对于这一部分的数据,没必要 每一个用户访问时都去查询数据库,因此配置二级缓存将是非常必要的. Mybatis的二级缓存配置相当容易,要开启二级缓存,只需要在你的Mapper 映射文件中添加一行: <cache /> 它将采用默认的行为进行缓存: 映射文件中所有的select语句将被缓存 映射文件中所有的insert.update和delete语句将刷新缓存 缓存将使用LRU(Least Recently Used)最近最少使用策略算法来回收 刷新间隔(n

  • 基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览 在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术 编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un

随机推荐