From 3fed363856e87b36a7b9dec679e358c85c06cbef Mon Sep 17 00:00:00 2001
From: laowang <yaclty2@gmail.com>
Date: Thu, 19 May 2022 10:41:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=AF=84=E8=AE=BA=E6=8F=90?=
 =?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modules/comment.js      | 19 ++++++++++++++++---
 public/assets/style.css |  4 ++++
 public/detail.html      | 25 ++++++++++++++++++++++---
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/modules/comment.js b/modules/comment.js
index 5a6ac97..543ac9a 100644
--- a/modules/comment.js
+++ b/modules/comment.js
@@ -9,19 +9,23 @@ router.all('/web/query', async (req, res) => {
         // 参数不正确 直接返回空数组
         res.send([])
     } else {
-        const list = await db.query('select * from comment where article_id =?', [id]);
+        const list = await db.query('select * from comment where article_id =? order by id desc', [id]);
         res.send(list)
     }
 });
+// 发表评论
 router.post('/web/add', async (req, res) => {
-    let commentData = req.body;
+    let commentData = req.body; // 获取到post的json数据 
     console.log(commentData)
     if (!commentData || !commentData.article_id || !commentData.content) {
         res.send({ status: false, message: "参数不对" })
     } else {
         try {
+            // 发表时间
             commentData.publish_time = dayjs().format("YYYY-MM-DD HH:mm:ss")
-            commentData.ip = '127.0.0.1'
+            // 评论者ip
+            commentData.ip = getIp(req.ip);
+            console.log(commentData)
             await db.query('insert into comment set ?', commentData);
             res.send({ status: true })
         } catch (e) {
@@ -30,4 +34,13 @@ router.post('/web/add', async (req, res) => {
         }
     }
 });
+function getIp(ip){
+
+    const ipPatch = ip.match(/\d+\.\d+\.\d+\.\d+/)
+    if(ipPatch) return ipPatch[0]
+    return ip;
+}
+router.get('/ip',(req,res)=>{
+    res.send(getIp(req.ip))
+})
 module.exports = router
\ No newline at end of file
diff --git a/public/assets/style.css b/public/assets/style.css
index 543fe12..63e6041 100644
--- a/public/assets/style.css
+++ b/public/assets/style.css
@@ -120,6 +120,10 @@ header {
 #article-content p{
     margin: 10px 0;
 }
+#article-content img,
+#article-content video{
+    max-width: 100%;
+}
 
 @media screen and (max-width: 500px) {
     header {
diff --git a/public/detail.html b/public/detail.html
index 403e420..ca18a91 100644
--- a/public/detail.html
+++ b/public/detail.html
@@ -38,10 +38,10 @@
                     <div class="publish" style="margin: 10px 0;">
                         <!-- 发表评论 -->
                         <div>
-                            <el-input type="textarea" v-model="xxx" :rows="4" />
+                            <el-input type="textarea" v-model="commentContent" :rows="4" placeholder="请发表您的看法" />
                         </div>
                         <div style="margin-top: 10px;">
-                            <el-button size="small" type="primary">评论</el-button>
+                            <el-button size="small" type="primary" @click="submitComment" :disabled="commentContent == ''">评论</el-button>
                         </div>
                     </div>
                     <div id="comment-list">
@@ -80,7 +80,7 @@
             el: '#detail', // 设置挂载对象
             data() {
                 return {
-                    xxx: '',
+                    commentContent: '',
                     isError: false,
                     a: {
                         "id": 0,
@@ -120,6 +120,25 @@
 
             },
             methods: {
+                async submitComment(){
+                    if(!this.commentContent){
+                        this.$message.error('请先填写评论内容')
+                        // this.$alert('请先填写评论内容','提示')
+                        return false;
+                    }
+                    const ret = await request('./api/comment/web/add',{
+                        article_id:this.a.id,
+                        content:this.commentContent
+                    },'POST')
+
+                    if(ret.status){
+                        this.$message.success('发表评论成功')
+                        this.loadCommentList()
+                        // this.commentContent = '' // 将评论内容清空 
+                    }else{
+                        this.$message.error(ret.message)
+                    }
+                },
                 async loadCommentList() {
                     const id = this.a.id;
                     const list = await request('./api/comment/web/query', { id }) // 获取所有的评论列表