基于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 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
js实现点赞按钮功能的实例代码
Mar 06 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
js同源策略详解
2015/05/21 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
pygame实现五子棋游戏
2019/10/29 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
一岗双责责任书
2014/04/15 职场文书
六年级学生评语
2014/04/22 职场文书
教师个人成长总结
2015/02/11 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
工伤调解协议书
2016/03/21 职场文书