完成评论提交

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

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 {

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 }) // 获取所有的评论列表