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 AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

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

General Matrix Multiplication (GEMM) is a vital part of many applications and algorithms, and is also one of the important indicators for evaluating computer hardware performance. In-depth research and optimization of the implementation of GEMM can help us better understand high-performance computing and the relationship between software and hardware systems. In computer science, effective optimization of GEMM can increase computing speed and save resources, which is crucial to improving the overall performance of a computer system. An in-depth understanding of the working principle and optimization method of GEMM will help us better utilize the potential of modern computing hardware and provide more efficient solutions for various complex computing tasks. By optimizing the performance of GEMM

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

On July 29, at the roll-off ceremony of AITO Wenjie's 400,000th new car, Yu Chengdong, Huawei's Managing Director, Chairman of Terminal BG, and Chairman of Smart Car Solutions BU, attended and delivered a speech and announced that Wenjie series models will be launched this year In August, Huawei Qiankun ADS 3.0 version was launched, and it is planned to successively push upgrades from August to September. The Xiangjie S9, which will be released on August 6, will debut Huawei’s ADS3.0 intelligent driving system. With the assistance of lidar, Huawei Qiankun ADS3.0 version will greatly improve its intelligent driving capabilities, have end-to-end integrated capabilities, and adopt a new end-to-end architecture of GOD (general obstacle identification)/PDP (predictive decision-making and control) , providing the NCA function of smart driving from parking space to parking space, and upgrading CAS3.0

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

The best version of the Apple 16 system is iOS16.1.4. The best version of the iOS16 system may vary from person to person. The additions and improvements in daily use experience have also been praised by many users. Which version of the Apple 16 system is the best? Answer: iOS16.1.4 The best version of the iOS 16 system may vary from person to person. According to public information, iOS16, launched in 2022, is considered a very stable and performant version, and users are quite satisfied with its overall experience. In addition, the addition of new features and improvements in daily use experience in iOS16 have also been well received by many users. Especially in terms of updated battery life, signal performance and heating control, user feedback has been relatively positive. However, considering iPhone14

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

On April 11, Huawei officially announced the HarmonyOS 4.2 100-machine upgrade plan for the first time. This time, more than 180 devices will participate in the upgrade, covering mobile phones, tablets, watches, headphones, smart screens and other devices. In the past month, with the steady progress of the HarmonyOS4.2 100-machine upgrade plan, many popular models including Huawei Pocket2, Huawei MateX5 series, nova12 series, Huawei Pura series, etc. have also started to upgrade and adapt, which means that there will be More Huawei model users can enjoy the common and often new experience brought by HarmonyOS. Judging from user feedback, the experience of Huawei Mate60 series models has improved in all aspects after upgrading HarmonyOS4.2. Especially Huawei M

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

A computer operating system is a system used to manage computer hardware and software programs. It is also an operating system program developed based on all software systems. Different operating systems have different users. So what are the computer systems? Below, the editor will share with you what computer operating systems are. The so-called operating system is to manage computer hardware and software programs. All software is developed based on operating system programs. In fact, there are many types of operating systems, including those for industrial use, commercial use, and personal use, covering a wide range of applications. Below, the editor will explain to you what computer operating systems are. What computer operating systems are Windows systems? The Windows system is an operating system developed by Microsoft Corporation of the United States. than the most

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 the method of modifying the system date in the Oracle database. In the Oracle database, the method of modifying the system date mainly involves modifying the NLS_DATE_FORMAT parameter and using the SYSDATE function. This article will introduce these two methods and their specific code examples in detail to help readers better understand and master the operation of modifying the system date in the Oracle database. 1. Modify NLS_DATE_FORMAT parameter method NLS_DATE_FORMAT is Oracle data

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

Linux and Windows are two common operating systems, representing the open source Linux system and the commercial Windows system respectively. In both operating systems, there is a command line interface for users to interact with the operating system. In Linux systems, users use the Shell command line, while in Windows systems, users use the cmd command line. The Shell command line in Linux system is a very powerful tool that can complete almost all system management tasks.

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

See all articles