完成前端Blog界面

tonecn/src/views/Blog.vue

@@ -1,61 +1,36 @@
 <script setup>
-// import ServerAPI from '@/assets/ServerAPI';
-// import router from '@/router';
-// import { nextTick, onBeforeMount, onMounted, reactive, ref } from 'vue';
-// let load_fail = ref(false);
-// let load_ok = ref(false);
+import { request } from '@/lib/request';
+import { onMounted, reactive, ref } from 'vue';
+import { timestampToString } from '../lib/timestampToString'
+const loadStatus = ref(0);
+const blogList = reactive([]);
 
-// let urlTo = (url) => {
-//     window.location.href = url;
-// }
-// let blog_list = reactive([])
-// onBeforeMount(async () => {
-//     let res = await ServerAPI.async_getRequest('GetBlogList');
-//     try {
-//         if(res.status == 'OK')
-//         {
-//             blog_list.push(...res.data);
-//             load_ok.value = true;
-//         }else{
-//             throw new Error('获取列表失败');
-//         }
-//     } catch (error) {
-//         console.log('获取列表发生错误：' + error)
-//         load_fail.value = true;
-//     }
-// })
-// let formatTimestamp = (timestamp) => {
-//     const date = new Date(timestamp);
-//     // 获取日期的各个部分
-//     const year = date.getFullYear();
-//     const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的
-//     const day = String(date.getDate()).padStart(2, '0');
-//     const hours = String(date.getHours()).padStart(2, '0');
-//     const minutes = String(date.getMinutes()).padStart(2, '0');
-//     const seconds = String(date.getSeconds()).padStart(2, '0');
-//     // 组装最终的字符串
-//     if(hours == '00' && minutes == '00' && seconds == '00')
-//         return `${year}/${month}/${day}`;
-//     else
-//         return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
-// }
-// let blogto = (uuid) => {
-//     // router.push({name:'blogcontent',params: { 'uuid': uuid }})
-//     let url = '/blogcontent/' + uuid;
-//     window.open(url, '_blank');
-// }
+onMounted(async () => {
+    try {
+        const blogListRes = await request.get('/blogList');
+        if (blogListRes.code == 0) {
+            blogList.push(...blogListRes.data);
+            loadStatus.value = 1;
+        } else {
+            throw new Error(blogListRes.message);
+        }
+    } catch (error) {
+        console.error(error)
+        loadStatus.value = -1;
+    }
+})
 </script>
 <template>
     <div class="bcc"></div>
     <div class="content-container">
-    <el-empty description="加载失败，刷新后重试" style="margin: 0 auto;" v-if="load_fail"/>
+        <el-empty description="加载失败，刷新后重试" style="margin: 0 auto;" v-if="loadStatus == -1" />
         <div style="gap: 30px;display: flex;flex-direction: column;" v-else>
-        <div class="coding" v-if="!load_ok">加载中，请稍后...</div>
-        <el-empty description="暂无数据" style="margin: 0 auto;" v-if="load_ok && !blog_list.length"/>
-        <div class="blog-container" v-for="item of blog_list">
-            <div class="title" @click="blogto(item.uuid)">{{ item.title }}</div>
+            <div class="coding" v-if="loadStatus == 0">加载中，请稍后...</div>
+            <el-empty description="暂无数据" style="margin: 0 auto;" v-if="loadStatus == 1 && blogList.length == 0" />
+            <div class="blog-container" v-for="item of blogList">
+                <a class="title" :href="`/blogContent/${item.uuid}`" target="_blank">{{ item.title }}</a>
                 <div class="description">{{ item.description }}</div>
-            <div class="publish-time">{{ formatTimestamp(+item.publish_time) }}</div>
+                <div class="publish-time">{{ timestampToString(+item.publish_time) }}</div>
             </div>
         </div>
     </div>
@@ -70,6 +45,7 @@
     width: 100%;
     height: 100%;
 }
+
 .content-container {
     display: flex;
     flex-direction: column;
@@ -77,11 +53,13 @@
     margin: 50px auto;
     padding: 0 20px;
 }
+
 .coding {
     text-align: center;
     margin-top: 20px;
     margin-bottom: 300px;
 }
+
 .blog-container {
     margin: 0 auto;
     max-width: 400px;
@@ -89,19 +67,23 @@
     display: flex;
     flex-direction: column;
 }
+
 .blog-container .title {
     font-size: 26px;
     font-weight: 600;
     cursor: pointer;
     display: block;
 }
+
 .blog-container .title:hover {
     text-decoration: underline;
     text-decoration-thickness: 3px;
 }
+
 .blog-container .description {
     color: #666;
 }
+
 .blog-container .publish-time {
     color: #888;
     margin-top: 15px;