Home > Article > Web Front-end > Use Angularjs+mybatis to build a comment system
This time I will bring you Angularjs+mybatis to make a comment system, and what are the precautions for using Angularjs+mybatis to make a comment system? The following is a practical case, let’s take a look.
I have always wanted to write a comment system. After reading the comments on Duosuo, NetEase, and Jianshu, I thought about what kind of comment system I should implement. The key to the comment system is the number of nesting levels and database table design. There are many nesting levels, the table structure is complex, and presentation is cumbersome. Finally, we decided to implement a second-level comment. The system is built by maven, and springboot quickly builds the spring environment. The frontend uses angularjs+bootstrap, the backend uses springmvc+mybatis, and the database uses mysql. The frontend requests background API operation comments.
Database table design
##说说表或者文章表 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;
Get the mapper (key) of the comment
<?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>
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
How to execute ExecJs statements in Python
How to make the bottom navigation TabBar on the vue homepage
Use Video.js to implement the H5 live broadcast interface
The above is the detailed content of Use Angularjs+mybatis to build a comment system. For more information, please follow other related articles on the PHP Chinese website!