完善帖子列表展示

my-project-backend/src/main/java/com/example/entity/dto/Topic.java

@@ -14,7 +14,9 @@ public class Topic {
     Integer id;
     String title;
     String content;
-    Integer uid;
     Integer type;
     Date time;
+    Integer uid;
+    String username;
+    String avatar;
 }

my-project-backend/src/main/java/com/example/entity/vo/response/TopicPreviewVO.java

@@ -13,4 +13,7 @@ public class TopicPreviewVO {
     String text;
     List<String> images;
     Date time;
+    int uid;
+    String username;
+    String avatar;
 }

my-project-backend/src/main/java/com/example/mapper/TopicMapper.java

@@ -3,7 +3,22 @@ package com.example.mapper;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import com.example.entity.dto.Topic;
 import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Select;
+
+import java.util.List;
 
 @Mapper
 public interface TopicMapper extends BaseMapper<Topic> {
+    @Select("""
+            select * from db_topic left join db_account on uid = db_account.id
+             order by `time` desc limit ${page}, 10
+            """)
+    List<Topic> topicList(int page);
+
+    @Select("""
+            select * from db_topic left join db_account on uid = db_account.id
+             where type = #{type}
+             order by `time` desc limit ${page}, 10
+            """)
+    List<Topic> topicListByType(int page, int type);
 }

my-project-backend/src/main/java/com/example/service/impl/TopicServiceImpl.java

@@ -2,8 +2,6 @@ package com.example.service.impl;
 
 import com.alibaba.fastjson2.JSONArray;
 import com.alibaba.fastjson2.JSONObject;
-import com.baomidou.mybatisplus.core.toolkit.Wrappers;
-import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.example.entity.dto.Topic;
 import com.example.entity.dto.TopicType;
@@ -63,12 +61,11 @@ public class TopicServiceImpl extends ServiceImpl<TopicMapper, Topic> implements
         List<TopicPreviewVO> list = cacheUtils.takeListFromCache(key, TopicPreviewVO.class);
         if(list != null) return list;
         //无缓存从数据库读取
-        Page<Topic> page = Page.of(pageNumber, 10);
+        List<Topic> topics;
         if(type == 0)
-            this.baseMapper.selectPage(page, Wrappers.<Topic>query().orderByDesc("time"));
+            topics = baseMapper.topicList(pageNumber);
         else
-            this.baseMapper.selectPage(page, Wrappers.<Topic>query().eq("type", type).orderByDesc("time"));
+            topics = baseMapper.topicListByType(pageNumber, type);
-        List<Topic> topics = page.getRecords();
         if(topics.isEmpty()) return null;
         list = topics.stream().map(this::resolveToPreview).toList();
         cacheUtils.saveListToCache(key, list, 20);  //进缓存

my-project-frontend/src/views/forum/TopicList.vue

@@ -7,6 +7,7 @@ import {get} from "@/net";
 import {ElMessage} from "element-plus";
 import TopicEditor from "@/components/TopicEditor.vue";
 import {useStore} from "@/store";
+import axios from "axios";
 
 const store = useStore()
 
@@ -67,10 +68,10 @@ navigator.geolocation.getCurrentPosition(position => {
             <light-card v-for="item in list" class="topic-card">
                 <div style="display: flex">
                     <div>
-                        <el-avatar :size="30"/>
+                        <el-avatar :size="30" :src="`${axios.defaults.baseURL}/images${item.avatar}`"/>
                     </div>
                     <div style="margin-left: 7px;transform: translateY(-2px)">
-                        <div style="font-size: 13px;font-weight: bold">我是名字</div>
+                        <div style="font-size: 13px;font-weight: bold">{{item.username}}</div>
                         <div style="font-size: 12px;color: grey">
                             <el-icon><Clock/></el-icon>
                             <div style="margin-left: 2px;display: inline-block;transform: translateY(-2px)">{{new Date(item.time).toLocaleString()}}</div>
@@ -79,7 +80,7 @@ navigator.geolocation.getCurrentPosition(position => {
                 </div>
                 <div style="margin-top: 5px">
                     <div class="topic-type"
-                         :style="{color: store.findTypeById(item.type)?.color+'EE',
+                         :style="{color: store.findTypeById(item.type)?.color+'DD',
                          'border-color': store.findTypeById(item.type)?.color+'EE',
                          'background-color': store.findTypeById(item.type)?.color+'22'}">
                         {{ store.findTypeById(item.type)?.name }}
@@ -87,8 +88,8 @@ navigator.geolocation.getCurrentPosition(position => {
                     <span style="margin-left: 7px;font-weight: bold">{{ item.title }}</span>
                 </div>
                 <div class="topic-preview-content">{{ item.text }}</div>
-                <div style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px">
+                <div style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;margin: 0 10px">
-                    <el-image v-for="img in item.images" :src="img" class="topic-image"></el-image>
+                    <el-image v-for="img in item.images" fit="cover" :src="img" class="topic-image"></el-image>
                 </div>
             </light-card>
         </div>
@@ -155,21 +156,23 @@ navigator.geolocation.getCurrentPosition(position => {
 .topic-card {
     margin-top: 10px;
     transition: scale .3s;
+    padding: 20px;
 
     &:hover {
-        scale: 1.02;
+        scale: 1.01;
         cursor: pointer;
     }
 
     .topic-image{
         width: 100%;
         height: 100%;
+        max-height: 120px;
         border-radius: 5px;
     }
 
     .topic-type {
         display: inline-block;
-        border: solid 1px grey;
+        border: solid 0.5px grey;
         border-radius: 5px;
         font-size: 12px;
         padding: 0 5px;