新增搜索及完善显示

package-lock.json

@@ -465,6 +465,11 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-2.6.20.tgz",
       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
+    "dayjs": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.2.tgz",
+      "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-2.6.9.tgz",

package.json

@@ -10,6 +10,7 @@
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
+		"dayjs": "^1.11.2",
 		"element-ui": "^2.15.8",
 		"express": "^4.18.1",
 		"mysql": "^2.18.1",
@@ -18,4 +19,4 @@
 	"devDependencies": {
 		"nodemon": "^2.0.16"
 	}
-}
+}

public/index.html

@@ -21,17 +21,30 @@
         header {
             background-color: black;
             color: #fff;
-            padding: 10px;
+            line-height: 60px;
+            height: 60px;
+        }
+
+        .logo {
+            font-size: 30px;
+            flex: 1;
         }
 
         .site-nav {
-            flex: 1;
             text-align: right;
         }
 
         .site-nav a {
             color: #fff;
             text-decoration: none;
+            display: inline-block;
+            padding: 0 20px;
+            font-size: 18px;
+        }
+
+        .site-nav a:hover {
+            color: #333;
+            background-color: aqua;
         }
 
         .container {
@@ -80,6 +93,14 @@
             color: #666;
             font-size: 12px;
         }
+
+        .search-input {
+            width: 200px;
+        }
+
+        .search-input .el-input__inner {
+            border-radius: 50px;
+        }
     </style>
 </head>
 
@@ -88,6 +109,10 @@
         <header>
             <div class="container show-flex">
                 <div class="logo">我的博客</div>
+                <div class="search-input">
+                    <el-input size="small" placeholder="请输入搜索关键字" prefix-icon="el-icon-search" 
+                        clearable v-model="search" @change="loadList" />
+                </div>
                 <nav class="site-nav">
                     <a href="./">首页</a>
                     <a href="./login.html">登录</a>
@@ -103,14 +128,15 @@
                     <h3 class="title">{{a.title}}</h3>
                     <p class="desc">{{a.description}}</p>
                     <div class="ext">
-                        <span>发布于:2022-5-11</span>
-                        <span>阅读(20)</span>
-                        <span>评论(10)</span>
+                        <span>发布于:{{formatDate(a.publish_time)}}</span>
+                        <span>阅读({{a.view_count}})</span>
+                        <span>评论({{a.comment_count}})</span>
                     </div>
                 </div>
             </div>
             <div class="page" style="text-align: center;">
-                <el-pagination layout="prev, pager, next" @current-change="onPageChange" :page-size="size" :total="total">
+                <el-pagination layout="prev, pager, next" @current-change="onPageChange" :page-size="size"
+                    :total="total">
                 </el-pagination>
             </div>
         </div>
@@ -118,6 +144,7 @@
     <!-- 引入vue库 -->
     <script src="./vue/dist/vue.js"></script>
     <script src="./element-ui/lib/index.js"></script>
+    <script src="./modules/dayjs.min.js"></script>
     <script type="module">
         // import Vue from './vue/dist/vue.esm-browser.js'
         // vue 通过 Vue.createApp(选项)创建vue实例
@@ -130,24 +157,28 @@
                     articleArray: [], // 文章列表数组
                     total: 0, // 总的文章数量
                     size: 3, // 每页显示条数
-                    currentPage: 1
+                    currentPage: 1,
+                    search: ''
                 }
             },
             created() {
                 this.loadList();//页面一加载就获取
             },
             methods: {
+                formatDate(time){
+                    return dayjs(time).format('YYYY-MM-DD HH:mm')
+                },
                 loadList() {
                     // 使用request方法请求数据
-                    request('/api/article/web/list', { size: this.size, page: this.currentPage }).then(data => {
+                    request('/api/article/web/list', { size: this.size, page: this.currentPage,search:this.search }).then(data => {
                         this.articleArray = data.list
                         this.total = data.total;
                         this.size = data.size;
                     })
                 },
                 // 当页码发生变化
-                onPageChange(page){
-                    this.currentPage = page;
+                onPageChange(page) {
+                    this.currentPage = page; // 设置当前页码
                     this.loadList();
                 }
             }