Rumah hujung hadapan web tutorial js 用Angularjs+mybatis做出评论系统

用Angularjs+mybatis做出评论系统

Mar 07, 2018 am 11:32 AM
javascript sistem

这次给大家带来用Angularjs+mybatis做出评论系统,用Angularjs+mybatis做评论系统的注意事项有哪些?下面就是实战案例,一起来看一下。

一直想写个评论系统,看了下多说,网易,简书的评论,想了下自己该实现怎样的评论系统。评论系统关键是嵌套层数以及数据库表设计。嵌套层数多,表结构复杂,呈现也麻烦,最后决定实现一个二级评论。系统由maven构建,springboot快速搭建spring环境。前台采用angularjs+bootstrap,后台使用springmvc+mybatis,数据库采用mysql.前台请求后台API操作评论。

目录结构

1.png

数据库表设计

##说说表或者文章表  
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;
Salin selepas log masuk

获取评论的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>
Salin selepas log masuk

1.png

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

使用Pixi.js的总结

在Python中如何执行ExecJs语句

在vue首页怎样做出底部导航TabBar

用Video.js实现H5直播界面

Atas ialah kandungan terperinci 用Angularjs+mybatis做出评论系统. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pendaraban matriks universal CUDA: dari kemasukan kepada kemahiran! Pendaraban matriks universal CUDA: dari kemasukan kepada kemahiran! Mar 25, 2024 pm 12:30 PM

Pendaraban Matriks Umum (GEMM) ialah bahagian penting dalam banyak aplikasi dan algoritma, dan juga merupakan salah satu petunjuk penting untuk menilai prestasi perkakasan komputer. Penyelidikan mendalam dan pengoptimuman pelaksanaan GEMM boleh membantu kami lebih memahami pengkomputeran berprestasi tinggi dan hubungan antara perisian dan sistem perkakasan. Dalam sains komputer, pengoptimuman GEMM yang berkesan boleh meningkatkan kelajuan pengkomputeran dan menjimatkan sumber, yang penting untuk meningkatkan prestasi keseluruhan sistem komputer. Pemahaman yang mendalam tentang prinsip kerja dan kaedah pengoptimuman GEMM akan membantu kami menggunakan potensi perkakasan pengkomputeran moden dengan lebih baik dan menyediakan penyelesaian yang lebih cekap untuk pelbagai tugas pengkomputeran yang kompleks. Dengan mengoptimumkan prestasi GEMM

Sistem pemanduan pintar Qiankun ADS3.0 Huawei akan dilancarkan pada bulan Ogos dan akan dilancarkan pada Xiangjie S9 buat kali pertama Sistem pemanduan pintar Qiankun ADS3.0 Huawei akan dilancarkan pada bulan Ogos dan akan dilancarkan pada Xiangjie S9 buat kali pertama Jul 30, 2024 pm 02:17 PM

Pada 29 Julai, pada majlis pelepasan kereta baharu AITO Wenjie yang ke-400,000, Yu Chengdong, Pengarah Urusan Huawei, Pengerusi Terminal BG, dan Pengerusi Smart Car Solutions BU, menghadiri dan menyampaikan ucapan dan mengumumkan bahawa model siri Wenjie akan akan dilancarkan tahun ini Pada bulan Ogos, Huawei Qiankun ADS 3.0 versi telah dilancarkan, dan ia dirancang untuk terus naik taraf dari Ogos hingga September. Xiangjie S9, yang akan dikeluarkan pada 6 Ogos, akan memperkenalkan sistem pemanduan pintar ADS3.0 Huawei. Dengan bantuan lidar, versi Huawei Qiankun ADS3.0 akan meningkatkan keupayaan pemanduan pintarnya, mempunyai keupayaan bersepadu hujung-ke-hujung, dan mengguna pakai seni bina hujung ke hujung baharu GOD (pengenalpastian halangan am)/PDP (ramalan). membuat keputusan dan kawalan), menyediakan fungsi NCA pemanduan pintar dari ruang letak kereta ke ruang letak kereta, dan menaik taraf CAS3.0

Versi sistem Apple 16 manakah yang terbaik? Versi sistem Apple 16 manakah yang terbaik? Mar 08, 2024 pm 05:16 PM

Versi terbaik sistem Apple 16 ialah iOS16.1.4 Versi terbaik sistem iOS16 mungkin berbeza dari orang ke orang Penambahan dan peningkatan dalam pengalaman penggunaan harian juga telah dipuji oleh ramai pengguna. Versi sistem Apple 16 yang manakah adalah yang terbaik Jawapan: iOS16.1.4 Versi terbaik sistem iOS 16 mungkin berbeza dari orang ke orang. Menurut maklumat awam, iOS16, yang dilancarkan pada 2022, dianggap sebagai versi yang sangat stabil dan berprestasi, dan pengguna cukup berpuas hati dengan pengalaman keseluruhannya. Selain itu, penambahan ciri baharu dan penambahbaikan dalam pengalaman penggunaan harian dalam iOS16 juga telah diterima baik oleh ramai pengguna. Terutamanya dari segi hayat bateri yang dikemas kini, prestasi isyarat dan kawalan pemanasan, maklum balas pengguna agak positif. Walau bagaimanapun, memandangkan iPhone14

Sentiasa baru! Siri Huawei Mate60 dinaik taraf kepada HarmonyOS 4.2: Peningkatan awan AI, Dialek Xiaoyi sangat mudah digunakan Sentiasa baru! Siri Huawei Mate60 dinaik taraf kepada HarmonyOS 4.2: Peningkatan awan AI, Dialek Xiaoyi sangat mudah digunakan Jun 02, 2024 pm 02:58 PM

Pada 11 April, Huawei secara rasmi mengumumkan pelan peningkatan 100 mesin HarmonyOS 4.2 kali ini, lebih daripada 180 peranti akan mengambil bahagian dalam peningkatan, meliputi telefon bimbit, tablet, jam tangan, fon kepala, skrin pintar dan peranti lain. Pada bulan lalu, dengan kemajuan mantap pelan peningkatan 100 mesin HarmonyOS4.2, banyak model popular termasuk Huawei Pocket2, siri Huawei MateX5, siri nova12, siri Huawei Pura, dll. juga telah mula menaik taraf dan menyesuaikan diri, yang bermaksud bahawa akan ada Lebih ramai pengguna model Huawei boleh menikmati pengalaman biasa dan selalunya baharu yang dibawa oleh HarmonyOS. Berdasarkan maklum balas pengguna, pengalaman model siri Huawei Mate60 telah bertambah baik dalam semua aspek selepas menaik taraf HarmonyOS4.2. Terutamanya Huawei M

Apakah sistem pengendalian komputer? Apakah sistem pengendalian komputer? Jan 12, 2024 pm 03:12 PM

Sistem pengendalian komputer ialah sistem yang digunakan untuk mengurus perkakasan komputer dan program perisian Ia juga merupakan program sistem pengendalian yang dibangunkan berdasarkan semua sistem perisian yang berbeza mempunyai pengguna yang berbeza. Di bawah, editor akan berkongsi dengan anda apa itu sistem pengendalian komputer. Apa yang dipanggil sistem pengendalian adalah untuk mengurus perkakasan komputer dan program perisian Semua perisian dibangunkan berdasarkan program sistem pengendalian. Sebenarnya, terdapat banyak jenis sistem pengendalian, termasuk yang untuk kegunaan industri, kegunaan komersial dan kegunaan peribadi, meliputi pelbagai aplikasi. Di bawah, editor akan menerangkan kepada anda apa itu sistem pengendalian komputer. Apakah sistem pengendalian komputer sistem Windows Sistem Windows ialah sistem pengendalian yang dibangunkan oleh Microsoft Corporation dari Amerika Syarikat. daripada kebanyakannya

Penjelasan terperinci tentang cara mengubah suai tarikh sistem dalam pangkalan data Oracle Penjelasan terperinci tentang cara mengubah suai tarikh sistem dalam pangkalan data Oracle Mar 09, 2024 am 10:21 AM

Penjelasan terperinci tentang kaedah mengubah suai tarikh sistem dalam pangkalan data Oracle Dalam pangkalan data Oracle, kaedah mengubah suai tarikh sistem terutamanya melibatkan pengubahsuaian parameter NLS_DATE_FORMAT dan menggunakan fungsi SYSDATE. Artikel ini akan memperkenalkan kedua-dua kaedah ini dan contoh kod khusus mereka secara terperinci untuk membantu pembaca lebih memahami dan menguasai operasi mengubah suai tarikh sistem dalam pangkalan data Oracle. 1. Ubah suai kaedah parameter NLS_DATE_FORMAT NLS_DATE_FORMAT ialah data Oracle

Perbezaan dan persamaan arahan cmd dalam sistem Linux dan Windows Perbezaan dan persamaan arahan cmd dalam sistem Linux dan Windows Mar 15, 2024 am 08:12 AM

Linux dan Windows ialah dua sistem pengendalian biasa, masing-masing mewakili sistem Linux sumber terbuka dan sistem Windows komersial. Dalam kedua-dua sistem pengendalian, terdapat antara muka baris arahan untuk pengguna berinteraksi dengan sistem pengendalian. Dalam sistem Linux, pengguna menggunakan baris arahan Shell, manakala dalam sistem Windows, pengguna menggunakan baris arahan cmd. Baris arahan Shell dalam sistem Linux ialah alat yang sangat berkuasa yang boleh menyelesaikan hampir semua tugas pengurusan sistem.

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

See all articles