feat: 实现帖子翻页

CloudStriver · Apr 16, 2024 · 93b9997 · 93b9997
1 parent 97ed333
commit 93b9997
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 107 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="./src/main.ts"></script>
+    <script type="module" src="src/main.ts"></script>
   </body>
 </html>
diff --git a/src/components/search.vue b/src/components/search.vue
@@ -4,13 +4,13 @@
             type="text"
             placeholder="搜索"
             v-model="keyword"
+            @keydown.enter="search"
         >
         <i @click="search()" class="iconfont icon-sistrix"></i>
     </div>
 </template>
 
 <script setup lang="ts">
-// import router from '@/router'
 import {onMounted, ref, watch} from 'vue'
 import {useRoute} from "vue-router";
 import router from "@/router";
@@ -30,7 +30,8 @@ const search = () => {
   const selectContent = route.params.type as string
   const selectSort = parseInt(route.params.sort as string)
   const selectPeriod = parseInt(route.params.period as string)
-  if(!selectContent || !selectSort || !selectPeriod) {
+  console.log(selectContent, selectSort, selectPeriod)
+  if(!selectContent || !selectSort || selectPeriod == null) {
     router.push(`/search/${keyword.value}/post/${SearchSortType.Synthesis}/${SearchPeriodType.None}`)
     return
   }
@@ -41,7 +42,6 @@ watch(() => route.params.keyword, (value) => {
   if(value) {
     keyword.value = value as string
   }
-  console.log("!!!")
 })
 </script>
 

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -297,7 +297,10 @@ export const likeComment = async (comment: Comment) => {
         relationType: RelationType.Like,
     }).then(() => {
         comment.commentRelation.liked = true
-        comment.commentRelation.hated = false
+        if(comment.commentRelation.hated) {
+            unHateComment(comment)
+            comment.commentRelation.hated = false
+        }
         comment.like++
     })
 }
@@ -318,10 +321,12 @@ export const hateComment = async(comment: Comment) => {
         toId: comment.commentId,
         toType: TargetType.Comment,
         relationType: RelationType.Hate,
-    }).then(() => {
+    }).then(async () => {
         comment.commentRelation.hated = true
-        if(comment.commentRelation.liked) comment.like --
-        comment.commentRelation.liked = false
+        if (comment.commentRelation.liked) {
+            await unLikeComment(comment)
+            comment.commentRelation.liked = false
+        }
     })
 }
 

diff --git a/src/views/posts/posts.vue b/src/views/posts/posts.vue
@@ -105,9 +105,10 @@
                     <el-pagination
                         class="el-pagination"
                         layout="prev, pager, next"
-                        :total="1000"
+                        :total="totalPost"
                         :hide-on-single-page="true"
-                        current-page="1"
+                        :current-page="nowPage"
+                        @update:currentPage="changePage($event)"
                     />
                 </div>
                 <div class="rank-create">
@@ -189,11 +190,7 @@ import {onBeforeMount, onMounted, ref} from 'vue'
 import router from '@/router'
 import {
   enterPost, getCommentRankList,
-  getFollowPostList,
-  getHotPostList,
-  getNewPostList,
   getPostRankList,
-  getRecommendPostList,
   getUserRankList,
 } from "./utils"
 import type {HotComment, HotPost, HotUser, Label, Post} from "@/utils/type";
@@ -206,6 +203,15 @@ import {
 } from "@/utils/utils";
 import {useStore} from "@/store";
 import {useRoute} from "vue-router";
+import {
+  CategoryType,
+  GetPopularRecommendUrl,
+  GetPostsUrl,
+  GetRecommendByUserUrl,
+  GetRelationPathsUrl,
+  RelationType
+} from "@/utils/consts";
+import {get} from "@/utils/request";
 
 const store = useStore()
 const navSelect = ref('all') // 选项
@@ -223,11 +229,12 @@ const zonePopLeft = ref(0)
 const firstLabelList = ref<Label[]>([])
 const secondLabelList = ref<Label[]>([])
 const commentRankList = ref<HotComment[]>([])
+const totalPost = ref(0)
 const pageSize = 10; // 假设每页加载10项
+const nowPage = ref(1)
 let userRankPage = 1; // 当前用户列表页码
 let postRankPage = 1; // 当前帖子列表页码
 let commentRankPage = 1;
-let postPage = 1;
 const route = useRoute()
 onMounted(async() => {
     navSelect.value = route.params.select as string
@@ -246,6 +253,10 @@ onBeforeMount(() => {
   });
 });
 
+const changePage = async(page: number) => {
+  nowPage.value = page
+  await getPosts()
+}
 const getPosts = async () => {
   switch (navSelect.value) {
     case 'hot':
@@ -255,7 +266,7 @@ const getPosts = async () => {
       postList.value = await getRecommendPostList()
       break
     case 'follow':
-      postList.value = await getFollowPostList(pageSize, (postPage - 1) * pageSize)
+      postList.value = await getFollowPostList()
       break
     case 'new':
       postList.value = await getNewPostList(NowLabelId.value)
@@ -330,6 +341,95 @@ const loadMoreComments = async () => {
   }
 };
 
+// 获取最新的帖子列表
+const getNewPostList = async (onlyLabelId?: string) => {
+  const postsList = ref<Post[]>([])
+  const url = ref(GetPostsUrl)
+  if(onlyLabelId) url.value += `?onlyLabelId=${onlyLabelId}&limit=${pageSize}&offset=${(nowPage.value - 1) * pageSize}`
+  else url.value += `?limit=${pageSize}&offset=${(nowPage.value - 1) * pageSize}`
+  await get(false, url.value)
+      .then((res: any) => {
+        postsList.value =  res.posts.map((post: any) => ({
+          postId: post.postId,
+          title: post.title,
+          text: post.text,
+          url: post.url,
+          likeCount: post.likeCount,
+          labels: post.labels,
+          commentCount: post.commentCount,
+          viewCount: post.viewCount,
+          liked: post.liked,
+          userName: post.userName
+        }))
+        totalPost.value = res.total
+      })
+  return postsList.value
+}
+
+
+const getFollowPostList = async () => {
+  const postList = ref<Post[]>([])
+  await get(true, `${GetRelationPathsUrl}?relationType=${RelationType.Publish}&limit=${pageSize}&offset=${(nowPage.value - 1) * pageSize}`)
+      .then((res: any) => {
+        postList.value = res.posts.map((post: any) => ({
+          postId: post.postId,
+          title: post.title,
+          text: post.text,
+          url: post.url,
+          labels: post.labels,
+          likeCount: post.likeCount,
+          commentCount: post.commentCount,
+          viewCount: post.viewCount,
+          liked: post.liked,
+          userName: post.userName
+        }))
+        totalPost.value = res.total
+      })
+  return postList.value
+}
+
+
+const getHotPostList = async () => {
+  const postList = ref<Post[]>([]) // 帖子列表
+  await get(false, `${GetPopularRecommendUrl}?category=${CategoryType.PostCategory}&limit=${pageSize}&offset=${(nowPage.value - 1) * pageSize}`)
+      .then((res: any) => {
+        postList.value = res.recommends.posts.map((post: any) => ({
+          postId: post.postId,
+          title: post.title,
+          text: post.text,
+          url: post.url,
+          labels: post.labels,
+          likeCount: post.likeCount,
+          commentCount: post.commentCount,
+          liked: post.liked,
+          viewCount: post.viewCount,
+          userName: post.userName
+        }))
+        totalPost.value = 100
+      })
+  return postList.value
+}
+
+const getRecommendPostList = async () => {
+  const postList = ref<Post[]>([])
+  await get(false, `${GetRecommendByUserUrl}?category=${CategoryType.PostCategory}&limit=${pageSize}&offset=${(nowPage.value - 1) * pageSize}`)
+      .then((res: any) => {
+        postList.value = res.recommends.posts.map((post: any) => ({
+          postId: post.postId,
+          title: post.title,
+          text: post.text,
+          url: post.url,
+          labels: post.labels,
+          likeCount: post.likeCount,
+          commentCount: post.commentCount,
+          viewCount: post.viewCount,
+          liked: post.liked,
+          userName: post.userName
+        }))
+        totalPost.value = 100
+      })
+  return postList.value
+}
 
 
 </script>

diff --git a/src/views/posts/utils.ts b/src/views/posts/utils.ts
@@ -1,14 +1,10 @@
 import { ref } from 'vue'
 import { get } from '@/utils/request'
 import {
-    CategoryType,
     GetHotRanksUrl,
-    GetPopularRecommendUrl, GetPostsUrl,
-    GetRecommendByUserUrl, GetRelationPathsUrl,
-     RelationType,
     TargetType
 } from '@/utils/consts'
-import type {HotComment, HotPost, HotUser, Post} from "@/utils/type";
+import type {HotComment, HotPost, HotUser} from "@/utils/type";
 import router from "@/router";
 
 
@@ -31,28 +27,6 @@ export const getUserRankList = async (limit: number, offset: number)  => {
     return rankList.value
 }
 
-// 获取最新的帖子列表
-export const getNewPostList = async (onlyLabelId?: string) => {
-    const postsList = ref<Post[]>([])
-    const url = ref(GetPostsUrl)
-    if(onlyLabelId) url.value += `?onlyLabelId=${onlyLabelId}`
-    await get(false, url.value)
-    .then((res: any) => {
-        postsList.value =  res.posts.map((post: any) => ({
-                postId: post.postId,
-                title: post.title,
-                text: post.text,
-                url: post.url,
-                likeCount: post.likeCount,
-                labels: post.labels,
-                commentCount: post.commentCount,
-                viewCount: post.viewCount,
-                liked: post.liked,
-                userName: post.userName
-            })) 
-    })
-    return postsList.value
-}
 
 // 获取文章排行榜
 export const getPostRankList = async (limit: number, offset: number)  => {
@@ -80,70 +54,6 @@ export const getCommentRankList = async(limit: number, offset: number) => {
     return rankList.value
 }
 
-
-
-
-
-export const getHotPostList = async () => {
-    const postList = ref<Post[]>([]) // 帖子列表
-    await get(false, `${GetPopularRecommendUrl}?category=${CategoryType.PostCategory}`)
-    .then((res: any) => {
-        postList.value = res.recommends.posts.map((post: any) => ({
-                postId: post.postId,
-                title: post.title,
-                text: post.text,
-                url: post.url,
-                labels: post.labels,
-                likeCount: post.likeCount,
-                commentCount: post.commentCount,
-                liked: post.liked,
-                viewCount: post.viewCount,
-                userName: post.userName
-        }))
-    })
-    return postList.value
-}
-
-export const getRecommendPostList = async () => {
-    const postList = ref<Post[]>([])
-    await get(false, `${GetRecommendByUserUrl}?category=${CategoryType.PostCategory}`)
-        .then((res: any) => {
-            postList.value = res.recommends.posts.map((post: any) => ({
-                postId: post.postId,
-                title: post.title,
-                text: post.text,
-                url: post.url,
-                labels: post.labels,
-                likeCount: post.likeCount,
-                commentCount: post.commentCount,
-                viewCount: post.viewCount,
-                liked: post.liked,
-                userName: post.userName
-            }))
-        })
-    return postList.value
-}
-
-export const getFollowPostList = async (limit: number, offset: number) => {
-    const postList = ref<Post[]>([])
-    await get(true, `${GetRelationPathsUrl}?relationType=${RelationType.Publish}&limit=${limit}&offset=${offset}`)
-        .then((res: any) => {
-            postList.value = res.posts.map((post: any) => ({
-                postId: post.postId,
-                title: post.title,
-                text: post.text,
-                url: post.url,
-                labels: post.labels,
-                likeCount: post.likeCount,
-                commentCount: post.commentCount,
-                viewCount: post.viewCount,
-                liked: post.liked,
-                userName: post.userName
-            }))
-        })
-    return postList.value
-}
-
 export const enterPost = async (id: string) => {
     await router.push('/post/' + id)
 }