基于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 相关文章推荐
js鼠标左右键 键盘值小结
Jun 11 Javascript
jQuery的学习步骤
Feb 23 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
AngularJS学习第一篇 AngularJS基础知识
Feb 13 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
详解微信小程序开发用户授权登陆
Apr 24 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中mysql与mysqli的区别分析
2013/06/10 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python 多进程队列数据处理详解
2019/12/23 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Django如何批量创建Model
2020/09/01 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
超市后勤自我鉴定
2014/01/17 职场文书
服务生自我鉴定
2014/01/22 职场文书
家长对小学生的评语
2014/01/28 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
导游词之上海豫园
2019/10/24 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server