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


Posted in Javascript onFebruary 13, 2017

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

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

目录结构

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

数据库表设计

##说说表或者文章表 
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>

页面展示

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

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

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

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

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

Javascript 相关文章推荐
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
JavaScript实现公历转农历功能示例
Feb 13 #Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 #Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 #Javascript
JS中input表单隐藏域及其使用方法
Feb 13 #Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 #Javascript
jQuery源码分析之init的详细介绍
Feb 13 #Javascript
AngulerJS学习之按需动态加载文件
Feb 13 #Javascript
You might like
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Python中分数的相关使用教程
2015/03/30 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
django页面跳转问题及注意事项
2019/07/18 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python如何安装第三方模块
2020/05/28 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
产品促销活动策划书
2014/01/15 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
公司年会策划方案
2014/05/17 职场文书
导航工程专业自荐信
2014/09/02 职场文书
教师年度个人总结
2015/02/11 职场文书
银行实习推荐信
2015/03/27 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
战马观后感
2015/06/08 职场文书
廉洁自律证明
2015/06/24 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers