Skip to content

Commit 623d104

Browse files
author
fanyushun
committed
feat: 列表接口
1 parent 4d04f46 commit 623d104

File tree

8 files changed

+173
-12
lines changed

8 files changed

+173
-12
lines changed

‎src/app.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ const errorHandler = (error: ResponseError) => {
104104
};
105105

106106
export const request: RequestConfig = {
107+
prefix: '/api/vue-blog',
107108
errorHandler,
108109
errorConfig: {
109110
adaptor: (resData) => {

‎src/components/List/ListShow.less

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import '~antd/lib/style/themes/default.less';
2+
3+
.list_show {
4+
.list_item {
5+
padding-right: 0;
6+
padding-left: 0;
7+
}
8+
}

‎src/components/List/ListShow.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from 'react';
2+
import { List, Skeleton } from 'antd';
3+
// import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';
4+
5+
import styles from './ListShow.less';
6+
7+
const ListShow: React.FC<{
8+
loading: boolean;
9+
listData: API.ListItemData[];
10+
count: number;
11+
}> = ({ loading, listData, count }) => {
12+
let currentListData;
13+
if (loading) {
14+
currentListData = [...Array(count).keys()].map((item, index) => {
15+
return {
16+
articleAuthorId: index,
17+
articleCreateTime: String(index),
18+
articleId: index,
19+
articleNature: index,
20+
articleStart: index,
21+
articleSubTitle: String(index),
22+
articleTitle: String(index),
23+
articleView: index,
24+
};
25+
});
26+
} else {
27+
currentListData = listData;
28+
}
29+
return (
30+
<List
31+
className={styles.list_show}
32+
itemLayout="vertical"
33+
size="large"
34+
pagination={{
35+
onChange: (page) => {
36+
console.log(page);
37+
},
38+
pageSize: count,
39+
}}
40+
dataSource={currentListData}
41+
renderItem={(item) =>
42+
loading ? (
43+
<List.Item
44+
className={styles.list_item}
45+
key={item.articleId}
46+
// actions={[
47+
// <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
48+
// <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
49+
// <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
50+
// ]}
51+
>
52+
<Skeleton title={false} loading={loading} active>
53+
<List.Item.Meta
54+
title={<a>{item.articleTitle}</a>}
55+
description={item.articleSubTitle}
56+
/>
57+
</Skeleton>
58+
</List.Item>
59+
) : (
60+
<List.Item
61+
className={styles.list_item}
62+
key={item.articleId}
63+
// actions={[
64+
// <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
65+
// <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
66+
// <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
67+
// ]}
68+
>
69+
<List.Item.Meta title={<a>{item.articleTitle}</a>} description={item.articleSubTitle} />
70+
</List.Item>
71+
)
72+
}
73+
/>
74+
);
75+
};
76+
77+
export default ListShow;

‎src/global.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ ol {
2929
list-style: none;
3030
}
3131

32+
.ant-pro-basicLayout-content {
33+
margin: 0;
34+
padding: 24px;
35+
background-color: #fff;
36+
}
37+
3238
@media (max-width: @screen-xs) {
3339
.ant-table {
3440
width: 100%;

‎src/pages/Home.tsx

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,42 @@
11
import React, { useState, useEffect } from 'react';
2-
import ListTool from '@/components/List/ListTool';
32
import { history } from 'umi';
4-
// import { useRequest } from 'ahooks';
3+
import { useRequest } from 'ahooks';
4+
import { Divider } from 'antd';
5+
6+
import ListTool from '@/components/List/ListTool';
7+
import ListShow from '@/components/List/ListShow';
8+
import { getListData } from '@/services/list';
59
// import styles from './Home.less';
610

711
export default (props: any): React.ReactNode => {
812
const [original, setOriginal] = useState(!!(props.location.query.original === 'true'));
913
const [order, setOrder] = useState(props.location.query.order * 1 || 0);
10-
// const []
14+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
15+
const [page, setPage] = useState(props.location.query.page * 1 || 1);
16+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
17+
const [count, setCount] = useState(props.location.query.count * 1 || 10);
18+
19+
const [listData, setListData] = useState<API.ListItemData[]>([]);
20+
const { loading, run } = useRequest(
21+
() =>
22+
getListData({
23+
justOriginal: original,
24+
order,
25+
count,
26+
page,
27+
}),
28+
{
29+
manual: true,
30+
onSuccess: (result) => {
31+
if (result.isok) {
32+
setListData(result.data.list);
33+
}
34+
},
35+
onError: (err) => {
36+
console.log(err);
37+
},
38+
},
39+
);
1140

1241
useEffect(() => {
1342
history.push({
@@ -17,15 +46,20 @@ export default (props: any): React.ReactNode => {
1746
order,
1847
},
1948
});
20-
}, [original, order]);
49+
run();
50+
}, [original, order, count, page]);
2151

2252
return (
23-
<ListTool
24-
original={original}
25-
originalChange={setOriginal}
26-
order={order}
27-
orderChange={setOrder}
28-
{...props}
29-
/>
53+
<>
54+
<ListTool
55+
original={original}
56+
originalChange={setOriginal}
57+
order={order}
58+
orderChange={setOrder}
59+
{...props}
60+
/>
61+
<Divider />
62+
<ListShow loading={loading} listData={listData} count={count} />
63+
</>
3064
);
3165
};

‎src/services/API.d.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ declare namespace API {
1111

1212
export interface CurrentUserRequest {
1313
data?: CurrentUser;
14+
isok?: boolean;
15+
msg?: string;
1416
}
1517

1618
export interface LoginStateType {
@@ -31,4 +33,24 @@ declare namespace API {
3133
extra: any;
3234
status: string;
3335
}
36+
37+
export interface ListItemData {
38+
articleAuthorId: number;
39+
articleCreateTime: string;
40+
articleId: number;
41+
articleNature: number;
42+
articleStart: number;
43+
articleSubTitle: string;
44+
articleTitle: string;
45+
articleView: number;
46+
}
47+
48+
export interface ListDataRequest {
49+
data: {
50+
list: Array<ListItemData>;
51+
total: number;
52+
};
53+
isok?: boolean;
54+
msg?: string;
55+
}
3456
}

‎src/services/list.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { request } from 'umi';
2+
3+
export async function getListData(data: {
4+
count?: number;
5+
page?: number;
6+
justOriginal?: boolean;
7+
order?: number;
8+
}) {
9+
return request<API.ListDataRequest>('/articleList', {
10+
method: 'get',
11+
params: data,
12+
});
13+
}

‎src/services/user.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export async function query() {
55
}
66

77
export async function queryCurrent() {
8-
return request<API.CurrentUserRequest>('/api/vue-blog/tokenGetUserInfo', {
8+
return request<API.CurrentUserRequest>('/tokenGetUserInfo', {
99
method: 'post',
1010
data: {
1111
token: 'f2c3f0e3b81fe4d95d5902bc963262ea',

0 commit comments

Comments
 (0)