基于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事件模型代码
Jul 01 Javascript
juqery 学习之五 文档处理 插入
Feb 11 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
vue + vuex todolist的实现示例代码
Mar 09 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 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中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
一个可以显示阴历的JS代码
2007/03/05 Javascript
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python中functools模块函数解析
2017/03/12 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
全国道德模范事迹
2014/02/01 职场文书
学生生病请假条范文
2014/02/16 职场文书
档案信息化建设方案
2014/05/16 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
2014年村委会工作总结
2014/11/24 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js