基于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 相关文章推荐
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
iview form清除校验状态的实现
Sep 19 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
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
python音频处理的示例详解
2020/12/23 Python
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
经理职责范文
2013/11/08 职场文书
大学活动总结模板
2014/07/10 职场文书
机电系毕业生求职信
2014/07/11 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
2014年老干部工作总结
2014/11/21 职场文书
2015年保管员工作总结
2015/04/30 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
公司员工培训管理制度
2015/08/04 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript