基于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 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
phpwind中的数据库操作类
2007/01/02 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
微信小程序-消息提示框实例
2016/11/24 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
跟老齐学Python之模块的加载
2014/10/24 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
什么是Python变量作用域
2020/06/03 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
python 从list中随机取值的方法
2020/11/16 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
仓库主管的岗位职责
2013/12/04 职场文书
工作交流会欢迎词
2014/01/12 职场文书
活动志愿者自荐信
2014/01/27 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
2014年党务公开方案
2014/05/08 职场文书
运动会演讲稿100字
2014/08/25 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
2015年见习期工作总结
2014/12/12 职场文书
美术教师个人总结
2015/02/06 职场文书
解除处分决定书
2015/06/25 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
Python Matplotlib绘制条形图的全过程
2021/10/24 Python
Python中time标准库的使用教程
2022/04/13 Python