Home Web Front-end JS Tutorial Use Angularjs+mybatis to build a comment system

Use Angularjs+mybatis to build a comment system

Mar 07, 2018 am 11:32 AM
javascript 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.

Directory structure

Use Angularjs+mybatis to build a comment system

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;
Copy after login

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>
Copy after login

Use Angularjs+mybatis to build a comment system

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:

Summary of using Pixi.js

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

CUDA's universal matrix multiplication: from entry to proficiency! CUDA's universal matrix multiplication: from entry to proficiency! Mar 25, 2024 pm 12:30 PM

CUDA's universal matrix multiplication: from entry to proficiency!

Huawei's Qiankun ADS3.0 intelligent driving system will be launched in August and will be launched on Xiangjie S9 for the first time Huawei's Qiankun ADS3.0 intelligent driving system will be launched in August and will be launched on Xiangjie S9 for the first time Jul 30, 2024 pm 02:17 PM

Huawei's Qiankun ADS3.0 intelligent driving system will be launched in August and will be launched on Xiangjie S9 for the first time

Which version of Apple 16 system is the best? Which version of Apple 16 system is the best? Mar 08, 2024 pm 05:16 PM

Which version of Apple 16 system is the best?

What are the computer operating systems? What are the computer operating systems? Jan 12, 2024 pm 03:12 PM

What are the computer operating systems?

Always new! Huawei Mate60 series upgrades to HarmonyOS 4.2: AI cloud enhancement, Xiaoyi Dialect is so easy to use Always new! Huawei Mate60 series upgrades to HarmonyOS 4.2: AI cloud enhancement, Xiaoyi Dialect is so easy to use Jun 02, 2024 pm 02:58 PM

Always new! Huawei Mate60 series upgrades to HarmonyOS 4.2: AI cloud enhancement, Xiaoyi Dialect is so easy to use

Differences and similarities of cmd commands in Linux and Windows systems Differences and similarities of cmd commands in Linux and Windows systems Mar 15, 2024 am 08:12 AM

Differences and similarities of cmd commands in Linux and Windows systems

Where is the system font storage path? Where is the system font storage path? Feb 19, 2024 pm 09:11 PM

Where is the system font storage path?

Detailed explanation of how to modify system date in Oracle database Detailed explanation of how to modify system date in Oracle database Mar 09, 2024 am 10:21 AM

Detailed explanation of how to modify system date in Oracle database

See all articles