基于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 1.8 Release版本发布了
Aug 14 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
jQuery结合CSS制作动态的下拉菜单
Oct 27 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 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巧获服务器端信息
2006/12/06 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php实现映射操作实例详解
2019/10/02 PHP
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
jquery连缀语法如何实现
2012/11/29 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
解决vue 引入子组件报错的问题
2018/09/06 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
后勤副校长自我鉴定
2013/10/13 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
医学院学生的自我评价分享
2013/11/19 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
赔偿协议书范本
2014/09/12 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
个性发展自我评价2015
2015/03/09 职场文书
总经理岗位职责范本
2015/04/01 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL