优化文章管理及展示

modules/article.js

@@ -1,4 +1,5 @@
 const db = require("./db"); //
+const dayjs = require("dayjs");
 // 文章模块
 const router = require("express").Router();
 // 用户网站模块
@@ -11,13 +12,14 @@ router.get("/web/list", async function (req, res) {
     const start = (page - 1) * size;
     const search = "%" + (req.query["search"] || "") + "%"; // 搜索关键字
     try {
+
         const listResult = await db.query(
             `select id,title,category,publish_time,cover,description,view_count,comment_count
-             from article where (title like ? or content like ? ) and status = 1 limit ?,?`,
+             from article where status = 1 and publish_time <= now() and (title like ? or content like ?) order by id desc limit ?,?`,
             [search, search, start, size]
         ); // 执行查询语句并等待结果出来后赋值给变量
         const totalCount = await db.query(
-            `select count(*) as total from article where (title like ? or content like ?) and status = 1`,
+            `select count(*) as total from article where status = 1 and publish_time <= now() and (title like ? or content like ?)`,
             [search, search]
         ); // 执行获取总条数
         res.send({
@@ -66,7 +68,7 @@ router.get("/admin/list", async function (req, res) {
     const search = "%" + (req.query["search"] || "") + "%"; // 搜索关键字
     try {
         const listResult = await db.query(
-            `select * from article where (title like ? or content like ? ) and status > 0 limit ?,?`,
+            `select * from article where (title like ? or content like ? ) and status > 0 order by id desc limit ?,? `,
             [search, search, start, size]
         ); // 执行查询语句并等待结果出来后赋值给变量
         const totalCount = await db.query(
@@ -84,6 +86,9 @@ router.get("/admin/list", async function (req, res) {
     }
 });
 router.post("/admin/save", async function (req, res) {
+    req.body.publish_time = dayjs(req.body.publish_time).format(
+        "YYYY-MM-DD HH:mm:ss"
+    );
     // 从请求参数中获取要更新的数据
     const {
         id,
@@ -94,14 +99,18 @@ router.post("/admin/save", async function (req, res) {
         description,
         view_count,
         comment_count,
+        publish_time,
     } = req.body;
-    const article = await db.query(
+
+    if (id > 0) {
+        // 有id说明在更新数据
+        await db.query(
             `update article set title=?,
         category=?,
         content=?,
         cover=?,
         description=?,
-        view_count=?,comment_count=? where id =?`,
+        view_count=?,comment_count=?,publish_time=? where id =?`,
             [
                 title,
                 category,
@@ -110,9 +119,13 @@ router.post("/admin/save", async function (req, res) {
                 description,
                 view_count,
                 comment_count,
-            id
+                publish_time,
+                id,
             ]
         );
+    } else {
+        await db.query("insert into article set ?", req.body);
+    }
     res.send({ status: true });
 });
 
@@ -120,10 +133,7 @@ router.post("/admin/save", async function (req, res) {
 router.all("/admin/update", async function (req, res) {
     // 从请求参数中获取要更新的数据
     const { id, status } = req.query;
-    await db.query(
+    await db.query(`update article set status=? where id =?`, [status, id]);
-        `update article set status=? where id =?`,
-        [status,id]
-    );
     res.send({ status: true });
 });
 module.exports = router;

public/assets/manage.js

@@ -32,11 +32,25 @@ export default {
             });
             this.list = ret.list;
         },
-        showEdit(a) {
+        showAdd(){
-            // 不能直接赋值一个对象
-            this.form = { ...a };
-            this.showDialog = true;
 
+            // 不能直接赋值一个对象
+            this.form = { 
+                category: "",
+                comment_count: 0,
+                content: "",
+                cover: "",
+                description: "",
+                id: 0,
+                publish_time: null,
+                status: 1,
+                title: "",
+                view_count: 0,
+            };
+            this.showDialog = true;
+            this.showEditor('')
+        },
+        showEditor(content){
             if (editor == null) {
                 // 将回调延迟到下次 DOM 更新循环之后执行
                 this.$nextTick(() => {
@@ -48,9 +62,16 @@ export default {
                 });
             } else {
                 // 给编辑器设置内容
-                editor.html(a.content);
+                editor.html(content);
             }
         },
+        showEdit(a) {
+            // 不能直接赋值一个对象
+            this.form = { ...a };
+            this.showDialog = true;
+            this.showEditor(a.content)
+           
+        },
         saveArticle() {
             this.form.content = editor.html(); // 获取编辑器的内容
             request("./api/article/admin/save", this.form, "POST").then(

public/manage.html

@@ -36,6 +36,7 @@
             text-align: left;
             border-bottom: solid 1px #ddd;
         }
+
         .content-div {
             border: 1px solid #DCDFE6;
             border-radius: 3px;
@@ -48,7 +49,9 @@
 <body>
     <div id="app">
         <div>
-            <div class="action"></div>
+            <div class="action">
+                <el-button @click="showAdd">新增</el-button>
+            </div>
             <div class="list">
                 <table>
                     <thead>
@@ -75,15 +78,11 @@
                             <td>
                                 <!-- 不需要传参则可以不写方法后的小括号  -->
                                 <el-link @click="showEdit(art)">修改</el-link>
-                                <el-popconfirm 
+                                <el-popconfirm title="此操作将永久删除该文章数据,是否继续?" @confirm="deleteArticlebyId(art.id)">
-                                    title="此操作将永久删除该文章数据,是否继续?"
-                                    @confirm="deleteArticlebyId(art.id)">
                                     <el-link slot="reference">删除</el-link>
                                 </el-popconfirm>
 
-                                <el-popconfirm 
+                                <el-popconfirm title="此操作将会更改文章状态,是否继续?" @confirm="updateArticleStatus(art)">
-                                    title="此操作将会更改文章状态,是否继续?"
-                                    @confirm="updateArticleStatus(art)">
                                     <el-link slot="reference">{{art.status==1?'设为草稿':'发布文章'}}</el-link>
                                 </el-popconfirm>
                             </td>
@@ -96,14 +95,6 @@
                     <el-form-item label="文章标题">
                         <el-input v-model="form.title" :maxlength="50"></el-input>
                     </el-form-item>
-                    <el-form-item label="分类">
-                        <el-select v-model="form.category" placeholder="请选择文章分类">
-                            <el-option label="默认分类" value="默认"></el-option>
-                            <el-option value="生活"></el-option>
-                            <el-option value="随笔"></el-option>
-                            <el-option value="科技"></el-option>
-                        </el-select>
-                    </el-form-item>
                     <el-form-item label="文章缩略图">
                         <el-input v-model="form.cover"></el-input>
                     </el-form-item>
@@ -117,12 +108,39 @@
                             <textarea v-model="form.content" id="editor_id" style="width:100%;height:300px;"></textarea>
                         </div>
                     </el-form-item>
+
+                    <el-row :gutter="20">
+                        <el-col :span="12">
                             <el-form-item label="阅读数">
                                 <el-input v-model="form.view_count"></el-input>
                             </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
                             <el-form-item label="评论数">
                                 <el-input v-model="form.comment_count"></el-input>
                             </el-form-item>
+                        </el-col>
+
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="分类">
+                                <el-select v-model="form.category" placeholder="请选择文章分类" style="width: 100%;">
+                                    <el-option label="默认分类" value="默认"></el-option>
+                                    <el-option value="生活"></el-option>
+                                    <el-option value="随笔"></el-option>
+                                    <el-option value="科技"></el-option>
+                                </el-select>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="发表时间">
+                                <el-date-picker v-model="form.publish_time" type="datetime" style="width: 100%;"
+                                    placeholder="选择文章的发表时间">
+                                </el-date-picker>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
                 </el-form>
                 <!-- slot插槽位footer表示该元素会放入到组件的footer -->
                 <span slot="footer" class="dialog-footer">