更新评论

db.sql

@@ -43,6 +43,8 @@ where cover is null;
 create table comment
 (
     id int(10) PRIMARY KEY AUTO_INCREMENT,
+	nickname varchar(20) null,
+	email varchar(50) null,
 	article_id int(10) not null,
     content varchar(500) not null,
     publish_time datetime not null,

modules/comment.js

@@ -6,7 +6,8 @@ const router = require('express').Router();
 router.all('/web/query', async (req, res) => {
     let id = req.query['id']; // 获取要查询文章的编号
     if (!id || id < 1) {
-        res.send({ status: false, message: "参数不对" })
+        // 参数不正确 直接返回空数组
+        res.send([])
     } else {
         const list = await db.query('select * from comment where article_id =?', [id]);
         res.send(list)

public/detail.html

@@ -36,14 +36,16 @@
                 <div id="article-comment" style="margin-top: 50px;">
                     <h1>所有评论</h1>
                     <div class="publish" style="margin: 10px 0;">
+                        <!-- 发表评论 -->
                         <div>
-                            <el-input type="textarea" v-model="xxx" />
+                            <el-input type="textarea" v-model="xxx" :rows="4" />
                         </div>
                         <div style="margin-top: 10px;">
-                            <el-button>评论</el-button>
+                            <el-button size="small" type="primary">评论</el-button>
                         </div>
                     </div>
                     <div id="comment-list">
+                        <!-- 评论列表 -->
                         <div class="comment-item" v-for="c in commentList" :key="c.id"
                             style="margin-top: 20px;background-color:#eaeaea;padding:20px;">
                             <div class="content">{{c.content}}</div>
@@ -78,7 +80,7 @@
             el: '#detail', // 设置挂载对象
             data() {
                 return {
-                    xxx:'',
+                    xxx: '',
                     isError: false,
                     a: {
                         "id": 0,
@@ -92,20 +94,20 @@
                         "comment_count": 0,
                         "status": 1
                     },
-                    // 所有的评论列表
+                    // 所有评论的列表
                     commentList: []
                 }
             },
             async created() {
-                const params = qs.parse(location.search);
+                const params = qs.parse(location.search); // 解析查询参数
                 if (!params.id) {
                     this.setTitle()
                     this.isError = true;
                     return;
                 }
-                const id = this.a.id = params.id;
+                const id = this.a.id = params.id; // 获取并保存文章编号
-                await request('./api/article/web/update', { id })
+                await request('./api/article/web/update', { id }) // 更新阅读数量
-                const articleList = await request('./api/article/web/detail', { id });
+                const articleList = await request('./api/article/web/detail', { id }); // 查询详情
                 if (articleList.length != 1) {
                     this.isError = true;
                     this.setTitle()
@@ -113,14 +115,14 @@
                 }
                 this.a = articleList[0];
                 this.setTitle()
-
+                // 加载评论
                 this.loadCommentList()
 
             },
             methods: {
                 async loadCommentList() {
                     const id = this.a.id;
-                    const list = await request('./api/comment/web/query', { id })
+                    const list = await request('./api/comment/web/query', { id }) // 获取所有的评论列表
                     this.commentList = list;
                 },
                 back() {