这篇文章上次修改于 902 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

1 效果

img

2 概要设计

评论有两类，一种是针对文章的评论，另一种是针对评论的评论，也就是评论回复。第一种评论称为一级评论，第二种评论称为二级评论，包括所有针对评论的回复，无论之间进行了多少次来回。

3 详细设计

3.1 DB

remark 表，描述评论信息。

字段名类型备注
idbigint(20) unsigned自增
article_idbigint(20) unsigned文章 ID
nicknamevarchar(64)评论者昵称
contenttext评论内容
init_remark_idbigint(20) unsigned被回复的最初评论 ID
nickname_repliedvarchar(64)被评论者昵称
created_timedatetime创建时间
updated_timedatetime更新时间，更新记录时自动更新

3.2 API

3.2.1. 创建评论

(1) 接口描述

本接口 (CreateRemark) 用于创建一条评论。

(2) 输入参数

参数名称必选类型描述
ArticleId是Integer文章 ID。
Nickname是String评论者昵称。
Content是String评论内容。
InitRemarkId否Integer被回复的最初评论 ID。
NicknameReplied否String被回复者昵称。

(3) 输出参数

参数名称类型描述
RemarkIdInteger评论 ID。
RequestIdString唯一请求 ID。

3.2.2. 查询评论

(1) 接口描述

本接口 (DescribeRemarks) 用于查询评论。

(2) 输入参数

参数名称必选类型描述
ArticleId否Integer文章 ID。
Offset否Integer偏移量。
Limit否Integer返回数量。

(3) 输出参数

参数名称类型描述
TotalInteger符合条件的评论数量。
RemarkSetArray of RemarkInfo评论详细信息列表。
RequestIdString唯一请求 ID。

RemarkInfo

参数名称类型描述
RemarkRemark评论详细信息。
ReplySetArray of Remark评论回复详细信息列表。

Remark

参数名称类型描述
RemarkIdInteger评论 ID。
NicknameString评论者昵称。
ContentString评论内容。
InitRemarkIdInteger被回复的最初的评论 ID。
NicknameRepliedString被回复者昵称。
CreatedTimeTimestamp评论创建时间。

3.3 前端渲染

  • 利用 v-for 标签列出所有一级评论。
  • 在每个一级评论后面再利用 v-for 标签列出对应的所有二级评论。
<!-- 列出类评论-->
<el-row>
    <el-col
        v-for="item in this.remarkSet"
        :key="item.Remark.RemarkId"
        style="padding: 3px"
    >

        <el-card class="back"
                :body-style="{height: '50px', padding: '0px', textAlign: 'center'}"
                style="position: relative"
                shadow="always"
        >

            <div class="remark-content">
                <div class="in-remark-content">
                    {{formatTime(item.Remark.CreatedTime)}}　
                    {{item.Remark.Nickname}}　
                    {{item.Remark.Content}}　
                    <a :href="'#'" @click="handleReplyRemark(item.Remark)">回复</a>
                    <a :href="'#'" @click="handleUpdateRemark(item.Remark)" v-show="adminLogin">修改</a>
                    <a :href="'#'" @click="handleDeleteRemark(item.Remark.RemarkId)" v-show="adminLogin">删除</a>
                </div>
            </div>
  
            <!-- 列出类回复-->
            <el-row>
                <el-col class="back"
                    v-for="reply in item.ReplySet"
                    :key="reply.RemarkId"
                    style="padding-left: 20px"
                >

                    <el-card
                        :body-style="{height: '50px', padding: '0px', textAlign: 'right'}"
                        style="position: relative"
                        shadow="always"
                    >
                        <div class="remark-content">
                            <div class="in-remark-content">
                                {{formatTime(reply.CreatedTime)}}　
                                {{reply.Nickname}}@{{reply.NicknameReplied}}　
                                {{reply.Content}}　
                                <a :href="'#'" @click="handleReplyRemark(reply)">回复</a>
                                <a :href="'#'" @click="handleUpdateRemark(reply)" v-show="adminLogin">修改</a>
                                <a :href="'#'" @click="handleDeleteRemark(reply.RemarkId)" v-show="adminLogin">删除</a>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
    </el-col>
</el-row>

4 待完善

  1. 保存用户身份，用户只需要第一次评论时输入昵称
  2. 保存用户邮箱，评论后邮件通知

参考

http://hbnnforever.cn/article/commentformysite.html#idcomment