基于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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
详解Vue监听数据变化原理
Mar 08 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
node中koa中间件机制详解
Aug 22 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
es6中比较有用的7个技巧小结
Jul 12 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 工厂模式使用方法
2010/05/18 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP laravel中的多对多关系实例详解
2017/06/07 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
JavaScript 基础问答三
2008/12/03 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
简单实现Bootstrap标签页
2020/08/09 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
javascript中的隐式调用
2018/02/10 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python学习资料
2007/02/08 Python
python实现的重启关机程序实例
2014/08/21 Python
Python实现的桶排序算法示例
2017/11/29 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Django获取应用下的所有models的例子
2019/08/30 Python
详解Python3中的 input() 函数
2020/03/18 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
用python实现名片管理系统
2020/06/18 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python 调整图片亮度的示例
2020/12/03 Python
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
教师评语大全
2014/04/28 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
大学生十八大感想
2015/08/11 职场文书