添加评论展示

index.js

@@ -1,13 +1,15 @@
 const express = require("express")
 const user = require('./modules/user') // 用户模块
 const article = require('./modules/article') // 文章
+const comment = require('./modules/comment') // 评论
 
 const app = express(); // 创建express应用
-
+app.use(express.json());
 app.use(express.static('public')) // 设置静态文件路径
 // 使用路由模块
 app.use('/api/user',user)
 app.use('/api/article',article)
+app.use('/api/comment',comment)
 
 app.listen(3000); // 监听端口
 console.log('server run success! http://localhost:3000')

modules/comment.js

@@ -0,0 +1,32 @@
+const dayjs = require('dayjs');
+const db = require('./db')
+const router = require('express').Router();
+
+// 完整的请求接口地址： /api/comment/web/query
+router.all('/web/query', async (req, res) => {
+    let id = req.query['id']; // 获取要查询文章的编号
+    if (!id || id < 1) {
+        res.send({ status: false, message: "参数不对" })
+    } else {
+        const list = await db.query('select * from comment where article_id =?', [id]);
+        res.send(list)
+    }
+});
+router.post('/web/add', async (req, res) => {
+    let commentData = req.body;
+    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'
+            await db.query('insert into comment set ?', commentData);
+            res.send({ status: true })
+        } catch (e) {
+            console.log(e)
+            res.send({ status: false, message: e.message })
+        }
+    }
+});
+module.exports = router

public/assets/style.css

@@ -21,9 +21,13 @@ header {
     font-size: 30px;
     flex: 1;
 }
+.logo a{
+    color: #fff;
+}
 
 .site-nav {
     text-align: right;
+    margin-left: 20px;
 }
 
 .site-nav a {

public/detail.html

@@ -14,7 +14,7 @@
     <div id="detail">
         <header>
             <div class="container show-flex">
-                <div class="logo">我的博客</div>
+                <div class="logo"><a href="./">我的博客</a></div>
                 <nav class="site-nav">
                     <a href="./">首页</a>
                     <a href="./login.html">登录</a>
@@ -33,11 +33,32 @@
                     </div>
                 </div>
                 <div id="article-content" v-html="a.content"></div>
+                <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" />
+                        </div>
+                        <div style="margin-top: 10px;">
+                            <el-button>评论</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>
+                            <div class="info" style="padding:10px 0;font-size:12px;">
+                                <span>评论IP:{{c.ip}}</span>
+                                <span>评论时间:{{c.publish_time}}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div v-else class="error-notice">
                 <el-result icon="info" title="提示" sub-title="加载文章数据异常">
                     <template slot="extra">
-                        <el-button type="primary" round size="medium">返回</el-button>
+                        <el-button type="primary" round size="medium" @click="back">返回</el-button>
                     </template>
                 </el-result>
             </div>
@@ -57,10 +78,11 @@
             el: '#detail', // 设置挂载对象
             data() {
                 return {
+                    xxx:'',
                     isError: false,
                     a: {
                         "id": 0,
-                        "title": "",
+                        "title": null,
                         "cover": "",
                         "publish_time": "",
                         "description": "",
@@ -69,25 +91,44 @@
                         "view_count": 0,
                         "comment_count": 0,
                         "status": 1
-                    }
+                    },
+                    // 所有的评论列表
+                    commentList: []
                 }
             },
             async created() {
                 const params = qs.parse(location.search);
                 if (!params.id) {
+                    this.setTitle()
                     this.isError = true;
                     return;
                 }
-                const id = params.id;
+                const id = this.a.id = params.id;
                 await request('./api/article/web/update', { id })
                 const articleList = await request('./api/article/web/detail', { id });
                 if (articleList.length != 1) {
                     this.isError = true;
+                    this.setTitle()
                     return;
                 }
                 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 })
+                    this.commentList = list;
+                },
+                back() {
+                    history.back()
+                },
+                setTitle(title = null) {
+                    document.title = this.a.title || '加载数据失败'
+                },
                 formatDate(time) {
                     return dayjs(time).format('YYYY-MM-DD HH:mm')
                 },

public/index.html

@@ -60,7 +60,7 @@
         // vue 通过 Vue.createApp(选项)创建vue实例
         import request from './modules/request.js'
 
-        const HomeApp = window.xxxx = new Vue({
+        new Vue({
             el: '#home', // 设置挂载对象
             data() {
                 return {