基于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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
图片自动缩小 点击放大
Jul 07 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
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中的integer类型使用分析
2010/07/27 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
详解Python异常处理中的Finally else的功能
2017/12/29 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
详解python 爬取12306验证码
2019/05/10 Python
python开发前景如何
2020/06/11 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
聚网科技C++面试笔试题
2015/09/01 面试题
先进党支部事迹材料
2014/01/13 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
教学督导岗位职责
2015/04/10 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
公司车辆维修管理制度
2015/08/05 职场文书