分类查询显示

main
lee-zt 2 months ago
parent 5a0117edc0
commit e0e794ccc9

@ -1,20 +1,20 @@
lj: #lj:
db: # db:
host: 192.168.59.129 # host: 192.168.59.129
password: Forely123! # password: Forely123!
redis: # redis:
host: 192.168.59.129 # host: 192.168.59.129
port: 6379 # port: 6379
password: Forely123! # password: Forely123!
rabbitmq: # rabbitmq:
host: 192.168.59.129 # host: 192.168.59.129
port: 5672 # port: 5672
username: admin # username: admin
password: Forely123! # password: Forely123!
minio: # minio:
endpoint: http://192.168.59.129:9000 # endpoint: http://192.168.59.129:9000
accessKey: forely # accessKey: forely
secretKey: Forely123! # secretKey: Forely123!
#lj: #lj:
# db: # db:
@ -34,20 +34,20 @@ lj:
# accessKey: minio_admin # accessKey: minio_admin
# secretKey: Minio@1234 # secretKey: Minio@1234
#lj: lj:
# db: db:
# host: localhost host: localhost
# password: 123456 password: 123456
# redis: redis:
# host: localhost host: localhost
# port: 6379 port: 6379
# password: 123456 password: 123456
# rabbitmq: rabbitmq:
# host: localhost host: localhost
# port: 5672 port: 5672
# username: guest username: guest
# password: guest password: guest
# minio: minio:
# endpoint: http://localhost:9005 endpoint: http://localhost:9005
# accessKey: leezt accessKey: leezt
# secretKey: lzt264610 secretKey: lzt264610

@ -16,7 +16,7 @@
<!-- 右侧帖子列表 --> <!-- 右侧帖子列表 -->
<div class="post-list"> <div class="post-list">
<div <div
v-for="(post, index) in filteredPosts" v-for="(post, index) in postListStore.posts"
:key="index" :key="index"
class="post-item" class="post-item"
@click="goToPostDetail(post.id)" @click="goToPostDetail(post.id)"
@ -37,26 +37,30 @@
</template> </template>
<script setup lang="js" name="PostPage"> <script setup lang="js" name="PostPage">
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'; import { ref, onMounted, onUnmounted, watch } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { usePostListStore } from '@/stores/postlist.js'; import { usePostListStore } from '@/stores/postlist.js';
const categories = ref(['全部', '学习', '娱乐', '二手交易']); // id
const categoryMap = [
{ name: '全部', id: null },
{ name: '校园活动', id: 1 },
{ name: '学习', id: 2 },
{ name: '娱乐', id: 3 },
{ name: '二手交易', id: 4 }
];
const categories = ref(categoryMap.map(item => item.name));
const selectedCategory = ref('全部'); const selectedCategory = ref('全部');
const postListStore = usePostListStore(); const postListStore = usePostListStore();
const router = useRouter(); const router = useRouter();
//
const filteredPosts = computed(() => {
if (selectedCategory.value === '全部') return postListStore.posts;
return postListStore.posts.filter(post => post.category === selectedCategory.value);
});
// //
const selectCategory = async (category) => { const selectCategory = async (categoryName) => {
selectedCategory.value = category; selectedCategory.value = categoryName;
postListStore.resetList(); postListStore.resetList();
await postListStore.getList({}); // id
const categoryObj = categoryMap.find(item => item.name === categoryName);
await postListStore.getList(categoryObj ? categoryObj.id : null);
}; };
// //
@ -72,13 +76,14 @@ const handleScroll = async () => {
!postListStore.loading && !postListStore.loading &&
!postListStore.finished !postListStore.finished
) { ) {
await postListStore.getList({}); const categoryObj = categoryMap.find(item => item.name === selectedCategory.value);
await postListStore.getList(categoryObj ? categoryObj.id : null);
} }
}; };
onMounted(async () => { onMounted(async () => {
// //
await postListStore.getList({}); await postListStore.getList();
window.addEventListener('scroll', handleScroll); window.addEventListener('scroll', handleScroll);
}); });

@ -11,36 +11,22 @@ export const usePostListStore = defineStore('postList', {
offset: 0, // 偏移量 offset: 0, // 偏移量
loading: false, // 加载状态 loading: false, // 加载状态
finished: false, // 是否加载完全部 finished: false, // 是否加载完全部
currentCategory: null, // 当前分类id
}), }),
actions: { actions: {
setPosts(posts) { async getList(categoryId = null) {
this.posts = posts;
},
setTotal(total) {
this.total = total;
},
setPage(page) {
this.page = page;
},
setPageSize(pageSize) {
this.pageSize = pageSize;
},
addPost(post) {
this.posts.push(post);
this.total += 1; // 更新总数
},
removePost(postId) {
this.posts = this.posts.filter(post => post.id !== postId);
this.total -= 1; // 更新总数
},
async getList() {
if (this.loading || this.finished) return; if (this.loading || this.finished) return;
this.loading = true; this.loading = true;
// 记录当前分类
this.currentCategory = categoryId;
try { try {
// 保证 lastVal 不为 null // 保证 lastVal 不为 null
const lastVal = (typeof this.lastVal === 'number' && this.lastVal > 0) ? this.lastVal : Date.now(); const lastVal = (typeof this.lastVal === 'number' && this.lastVal > 0) ? this.lastVal : Date.now();
// 拼接参数到URL // 拼接参数到URL
const url = `/post/list?lastVal=${lastVal}&offset=${this.offset}&size=${this.pageSize}`; let url = `/post/list?lastVal=${lastVal}&offset=${this.offset}&size=${this.pageSize}`;
if(categoryId!== null) {
url += `&categoryId=${categoryId}`;
}
const res = await request.get(url); const res = await request.get(url);
if (res.code === 200) { if (res.code === 200) {
const { records, lastVal: newLastVal, offset: newOffset, size: newSize } = res.data; const { records, lastVal: newLastVal, offset: newOffset, size: newSize } = res.data;
@ -55,7 +41,7 @@ export const usePostListStore = defineStore('postList', {
viewCount: post.viewCount || 0, viewCount: post.viewCount || 0,
likes: post.likeCount || 0, likes: post.likeCount || 0,
comments: post.commentCount || 0, comments: post.commentCount || 0,
category: post.category || '全部', categoryId: post.categoryId,
createTime: post.createTime, createTime: post.createTime,
userName: post.userName, userName: post.userName,
})); }));

@ -79,9 +79,10 @@ export default {
const router = useRouter() const router = useRouter()
const submitting = ref(false) const submitting = ref(false)
const categories = ref([ const categories = ref([
{ id: 1, name: '学习' }, { id: 1, name: '校园活动' },
{ id: 2, name: '娱乐' }, { id: 2, name: '学习' },
{ id: 3, name: '二手交易' } { id: 3, name: '娱乐' },
{ id: 4, name: '二手交易' }
]) ])
const form = ref({ const form = ref({
title: '', title: '',

Loading…
Cancel
Save