itbaima-study/itbaima-forum-jwt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善帖子列表展示

Browse Source
This commit is contained in:
柏码の讲师 2023-10-12 19:37:53 +08:00
parent dba9de2ab7
commit 87305cd555
5 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}

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

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

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

@ -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);
}

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

@ -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"));
List<Topic> topics = page.getRecords();
topics = baseMapper.topicListByType(pageNumber, type);
if(topics.isEmpty()) return null;
list = topics.stream().map(this::resolveToPreview).toList();
cacheUtils.saveListToCache(key, list, 20); //进缓存

17
my-project-frontend/src/views/forum/TopicList.vue
View File

@ -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">
<el-image v-for="img in item.images" :src="img" class="topic-image"></el-image>
<div style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;margin: 0 10px">
<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;