基于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插件推荐浏览器嗅探userAgent
Nov 09 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 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
比较详细PHP生成静态页面教程
2012/01/10 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
多种方法实现JS动态添加事件
2013/11/01 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
js读取本地文件的实例
2017/12/22 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python if语句知识点用法总结
2018/06/10 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python实现静态服务器
2019/09/05 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
软件部经理岗位职责范本
2014/02/25 职场文书
工作评语大全
2014/04/26 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android