基于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的密码强度验证代码
Mar 01 Javascript
JS实现一键回顶功能示例代码
Oct 28 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 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 empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
jQuery 位置插件
2008/12/25 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
平面设计的岗位职责
2013/11/08 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
企业晚会策划方案
2014/05/29 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
婚庆答谢词
2015/01/04 职场文书
flex弹性布局详解
2022/03/20 HTML / CSS
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android