聊天室：收藏最后我们再来实现下收藏功能：
聊天的时候可以收藏某条消息，然后在收藏列表查看。
消息分为文字、图片、文件三类，收藏也是这三类。
我们先加一个收藏表：
model Favorite {
id Int @id @default(autoincrement())
chatHistoryId Int
uerId Int
createTime DateTime @default(now())
updateTime DateTime @updatedAt
}
1
2
3
4
5
6
7
2
3
4
5
6
7
每个收藏只要记录对应的 chatHistoryId 和 userId 即可。
这里我们同样没有用外键。
用 migrate dev 生成表：
npx prisma migrate dev --name favorite
1
sql 没啥问题：
然后创建一个模块：
nest g resource favorite
1
在 FavorateController 添加三个路由：
import { Controller, Get, Query } from '@nestjs/common';
import { FavoriteService } from './favorite.service';
import { RequireLogin, UserInfo } from 'src/custom.decorator';
@Controller('favorite')
@RequireLogin()
export class FavoriteController {
constructor(private readonly favoriteService: FavoriteService) {}
@Get('list')
async list(@UserInfo('userId') userId: number) {
return this.favoriteService.list(userId);
}
@Get('add')
async add(@UserInfo('userId') userId: number, @Query('chatHistoryId') chatHistoryId: number) {
return this.favoriteService.add(userId, chatHistoryId);
}
@Get('del')
async del(@Query('id') id: number) {
return this.favoriteService.del(id);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
list、add、del 这三个路由都需要登录，在 Controller 上加上 @RequireLogin 装饰器。
然后取 request.user 里的 userId 传入 handler。
分别在 service 实现这三个方法：
import { Inject, Injectable } from '@nestjs/common';
import { PrismaService } from 'src/prisma/prisma.service';
@Injectable()
export class FavoriteService {
@Inject(PrismaService)
private prismaService: PrismaService;
async list(userId: number) {
const favorites = await this.prismaService.favorite.findMany({
where: {
uerId: userId
}
})
const res = [];
for(let i = 0; i< favorites.length; i++) {
const chatHistory = await this.prismaService.chatHistory.findUnique({
where: {
id: favorites[i].chatHistoryId
}
})
res.push({
...favorites[i],
chatHistory
})
}
return res;
}
async add(userId: number, chatHistoryId: number) {
return this.prismaService.favorite.create({
data: {
uerId: userId,
chatHistoryId
}
})
}
async del(id: number) {
return this.prismaService.favorite.deleteMany({
where: {
id
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
list 方法把关联的 chatHistory 查出来。
测试下：
添加两条收藏：
查看下：
删除一条：
查看下：
这样，接口就都完成了。
我们再写下前端页面：
先在 interfaces 添加几个接口：
export async function queryFavoriteList() {
return axiosInstance.get(`/favorite/list`);
}
export async function favoriteAdd(chatHistoryId: number) {
return axiosInstance.get(`/favorite/add`, {
params: {
chatHistoryId
}
});
}
export async function favoriteDel(id: number) {
return axiosInstance.get(`/favorite/del`, {
params: {
id
}
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
写下页面 src/pages/Collection/index.tsx
import { Table, message } from "antd";
import { useEffect, useState } from "react";
import { ColumnsType } from "antd/es/table";
import { queryFavoriteList } from "../../interfaces";
interface Favorite {
id: number
chatHistory: {
id: number
content: string
type: number
createTime: Date
}
}
export function Collection() {
const [favoriteList, setFavoriteList] = useState<Array<Favorite>>([]);
const columns: ColumnsType<Favorite> = [
{
title: 'ID',
dataIndex: 'id'
},
{
title: '内容',
render: (_, record) => (
<div>
{
record.chatHistory.type === 0
? record.chatHistory.content
: record.chatHistory.type === 1
? <img src={record.chatHistory.content} style={{maxHeight: 200}}/>
: <a href={record.chatHistory.content} download>{record.chatHistory.content}</a>
}
</div>
)
},
{
title: '发表时间',
render: (_, record) => (
<div>
{new Date(record.chatHistory.createTime).toLocaleString()}
</div>
)
},
{
title: '操作',
render: (_, record) => (
<div>
<a href="" onClick={() => {}}>删除</a>
</div>
)
}
]
const query = async () => {
try{
const res = await queryFavoriteList();
if(res.status === 201 || res.status === 200) {
setFavoriteList(res.data.map((item: Favorite) => {
return {
...item,
key: item.id
}
}));
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
};
useEffect(() => {
query();
}, []);
return <div id="friendship-container">
<div className="favorite-table">
<Table columns={columns} dataSource={favoriteList} style={{width: '1000px'}}/>
</div>
</div>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
就是请求列表接口，用 table 展示。
我们实现下收藏功能。
简化下交互，双击聊天记录触发收藏：
onDoubleClick={() => {
addToFavorite(item.id)
}}
1
2
3
2
3
async function addToFavorite(chatHistoryId: number) {
try{
const res = await favoriteAdd(chatHistoryId);
if(res.status === 201 || res.status === 200) {
message.success('收藏成功')
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
我们收藏几条消息：
提示收藏成功，之后在收藏页面就可以看到了：
然后再做下删除：
<Popconfirm
title="删除收藏"
description="确认删除吗？"
onConfirm={() => delFavorite(record.id)}
okText="Yes"
cancelText="No"
>
<a href="#" >删除</a>
</Popconfirm>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
async function delFavorite(id: number) {
try{
const res = await favoriteDel(id);
if(res.status === 201 || res.status === 200) {
message.success('删除成功');
query();
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
测试下：
没啥问题。
这样，收藏功能就完成了。
# 总结
这节我们实现了收藏功能。
首先创建了收藏表，关联 user 和 chatHistory。
然后创建了 list、add、del 三个接口。
之后在前端通过 table 展示 list 接口的数据，然后双击聊天记录的时候调用 add 添加收藏，点击删除的时候调用 del 删除收藏
这样就实现了收藏功能。