完成搜索

components.d.ts

@@ -51,14 +51,18 @@ declare module '@vue/runtime-core' {
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     Hleft: typeof import('./src/components/header/hleft.vue')['default']
     Hright: typeof import('./src/components/header/hright.vue')['default']
     Hsearch: typeof import('./src/components/header/hsearch.vue')['default']
     Login: typeof import('./src/components/auth/login.vue')['default']
+    NewPost: typeof import('./src/components/home/newPost.vue')['default']
     Platelist: typeof import('./src/components/plate/platelist.vue')['default']
     PlateMenu: typeof import('./src/components/plate/plateMenu.vue')['default']
     PlatePostItem: typeof import('./src/components/plate/platePostItem.vue')['default']
+    Redplate: typeof import('./src/components/home/redplate.vue')['default']
     Register: typeof import('./src/components/auth/register.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/App.vue

@@ -2,7 +2,14 @@
 </script>
 
 <template>
-  <router-view></router-view>
+  <Suspense>
+    <template #default>
+      <router-view />
+    </template>
+    <template #fallback>
+      <el-skeleton />
+    </template>
+  </Suspense>
 </template>
 
 <style scoped>

src/components/header/hsearch.vue

@@ -11,7 +11,18 @@ const input3 = ref('')
 
 const spacer = h(ElDivider, { direction: 'vertical' })
 const to_home = () => {
-  router.push('/home')
+  // router.push('/home')
+  window.location.href = '/home'
+}
+const to_post = () => {
+  // router.push('/platelist/0')
+  window.location.href = '/platelist/0'
+}
+const search = () => {
+  if (select.value === '帖子') {
+    // router.push(`/platelist/0?title=${input3.value}`)
+    window.location.href = `/platelist/0?title=${input3.value}`
+  }
 }
 </script>
 
@@ -24,7 +35,8 @@ const to_home = () => {
                  @click="to_home"> 首页</el-button>
     </div>
     <div>
-      <el-button text> 帖子</el-button>
+      <el-button text
+                 @click="to_post"> 帖子</el-button>
     </div>
     <div>
       <el-button text> 热点</el-button>
@@ -43,7 +55,8 @@ const to_home = () => {
           </el-select>
         </template>
         <template #append>
-          <el-button :icon="Search" />
+          <el-button :icon="Search"
+                     @click="search" />
         </template>
       </el-input>
     </div>

src/components/home/newPost.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import service from '../../plugins/axios'
+//格式化时间几天前
+function formatDate(date: any) {
+  const d = new Date(date)
+  const now = Date.now()
+  const diff = (now - d.getTime()) / 1000
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前'
+  }
+  return Math.ceil(diff / (3600 * 24)) + '天前'
+}
+const data = ref((await service.get(`/post/getNewPost?num=5`)).data)
+data.value.map((item: any) => {
+  item.createdAt = formatDate(item.createdAt)
+})
+</script>
+
+<template>
+  <el-table :data="data"
+            style="width: 100%">
+    <el-table-column prop="title"
+                     label="标题" />
+    <el-table-column prop="createdAt"
+                     label="发表时间" />
+  </el-table>
+</template>
+
+<style scoped >
+</style>

src/components/home/redplate.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import service from '../../plugins/axios'
+const data = await (await service.get('/plate/getplatebycount')).data
+</script>
+
+<template>
+  <el-table :data="data"
+            style="width: 100%">
+    <el-table-column prop="name"
+                     label="板块" />
+    <el-table-column prop="count"
+                     label="帖子数" />
+  </el-table>
+</template>
+
+<style scoped>
+</style>

src/components/plate/platePostItem.vue

@@ -60,7 +60,8 @@ console.log(JSON.stringify(userinfo))
                    size="large" />
       </el-col>
       <el-col :span="20">
-        <span class="title">{{dp.title}}</span>
+        <span class="title"
+              v-html="dp.title" />
         <p class="content">{{dp.content}}</p>
         <!-- 左边 -->
         <div type="text"

src/plugins/router.ts

@@ -12,17 +12,16 @@ const router = createRouter({
         {
           path: "/home",
           component: () => import("../views/home/index.vue"),
-          children: [
-            {
-              path: "/platelist/:id",
-              component: () => import("../views/plate/platelist.vue"),
-            },
-          ],
+          children: [],
         },
         {
           path: "/auth",
           component: () => import("../layouts/auth.vue"),
         },
+        {
+          path: "/platelist/:id",
+          component: () => import("../views/plate/platelist.vue"),
+        },
       ],
     },
   ],

src/views/home/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import plateMenu from '../../components/plate/plateMenu.vue'
-import plateList from '../../views/plate/platelist.vue'
+import newPostVue from '../../components/home/newPost.vue'
+import redplate from '../../components/home/redplate.vue'
 </script>
 
 <template>
@@ -18,24 +19,80 @@ import plateList from '../../views/plate/platelist.vue'
         </template>
       </Suspense>
     </el-affix>
-    <Suspense>
-      <template #default>
-        <router-view />
-      </template>
-      <template #fallback>
-        <el-skeleton />
-      </template>
-    </Suspense>
-
   </div>
+  <!-- row 手机占24 电脑占12 -->
+  <!-- 幻灯片 -->
+  <el-row :gutter="20">
+    <el-col :xs="24"
+            :sm="24"
+            :md="24"
+            :lg="24"
+            :xl="24">
+      <div style="margin: 12px 0px;">
+        <el-card>
+          <el-carousel height="200px">
+            <el-carousel-item v-for="item in 4"
+                              :key="item">
+              <h3>{{ item }}</h3>
+            </el-carousel-item>
+          </el-carousel>
+        </el-card>
+      </div>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20">
+    <el-col :xs="24"
+            :sm="24"
+            :md="24"
+            :lg="12"
+            :xl="12">
+      <div style="margin: 12px 0px;">
+        <el-card>
+          <template #header>
+            <span>最新帖子</span>
+          </template>
+          <!-- 异步最新帖子 -->
+          <Suspense>
+            <template #default>
+              <newPostVue />
+            </template>
+            <template #fallback>
+              <el-skeleton />
+            </template>
+          </Suspense>
+        </el-card>
+      </div>
+
+    </el-col>
+    <el-col :xs="24"
+            :sm="24"
+            :md="24"
+            :lg="12"
+            :xl="12">
+      <div style="margin: 12px 0px;">
+        <el-card>
+          <template #header>
+            <span>热门板块</span>
+          </template>
+          <Suspense>
+            <template #default>
+              <redplate />
+            </template>
+            <template #fallback>
+              <el-skeleton />
+            </template>
+          </Suspense>
+        </el-card>
+      </div>
+
+    </el-col>
+  </el-row>
 
 </template>
 
 <style scoped>
 #home {
   width: 100%;
-  height: 3000px;
-  background-color: #f5f5f5;
 }
 #plate {
   position: fixed;

src/views/plate/platelist.vue

@@ -4,12 +4,18 @@ import { useRoute } from 'vue-router'
 import service from '../../plugins/axios'
 import platePostItem from '../../components/plate/platePostItem.vue'
 let id = useRoute().params.id as any
-
+id = id ? id : 0
 const data = ref(
   await (
     await service.get(`/post/platelist?plateid=${id}&page=${1}&limit=${5}`)
   ).data
 )
+if (useRoute().query.title) {
+  data.value = await (
+    await service.get(`/post/search?title=${useRoute().query.title}&page=${1}`)
+  ).data
+}
+
 const page = async (v: number) => {
   data.value = await (
     await service.get(`/post/platelist?plateid=${id}&page=${v}&limit=${5}`)