Koa商城项目-轮播图模块(前端)

 媒介

   通过这次独自做前后端发现有很多需要提升的地方，很多细节处理处罚不到位。下面简朴看一下本人本身做的结果吧~~
  Git地址

1. https://gitee.com/ah-ah-bao/koa_system

复制代码

结果图

 前端代码

api/banner.ts

1. import request from "../utils/request";
3. export const getBannerList = (params: any = {}) => {
4.   return request.post("/banner/list", { ...params });
5. };
6. export const getBannerAdd = (params = {}) => {
7.   return request.post("/banner/add", params);
8. };
9. export const getBannerUpdate = (params = {}) => {
10.   return request.post("/banner/update", params);
11. };
12. export const getBannerDetail = (params = {}) => {
13.   return request.post("/banner/detail", params);
14. };
15. export const getBannerDelete = (params = {}) => {
16.   return request.post("/banner/delete", params);
17. };
18. export const getBannerUpload = (params = {}) => {
19.   return request.post("/banner/upload", params);
20. };

复制代码

pages/BannerList/index.tsx

1. import { useEffect, useState } from 'react';
2. import { message, Table, Popconfirm } from 'antd';
3. import { getBannerList, getBannerDelete } from '../../api/banner'
4. import type { BannerData, pageGationBannerData } from '../../types/banner';
5. import { BannerColumnsList } from './columns'
6. import SearchForm from './SearchForm'
7. import BannerAddOrEdit from './BannerAddOrEdit';
9. const BannerList = () => {
10.   const [bannerList, setBannerList] = useState<BannerData[]>([]);
11.   const [columns, setColumns] = useState<any[]>([]);
12.   const [visible, setVisible] = useState<boolean>(false);
13.   const [selectedId, setSelectedId] = useState<number | null>(null);
14.   const [pagination, setPagination] = useState({
15.     page: 1,
16.     pageSize: 10,
17.     total: 0,
18.     showSizeChanger: true,
19.     hideOnSinglePage: false,
20.     pageSizeOptions: ['10', '50', '100', '200'],
21.     showTotal: (total: number) => `共 ${total} 条数据`,
22.   })
23.   const [queryParams, setQueryParams] = useState<pageGationBannerData>({
24.     page: 1,
25.     pageSize: 10,
26.     bannername: '',
27.     url: ''
28.   })
30.   const getTableColmuns = async () => {
31.     var columns = [];
32.     const bannerColumns: any = await BannerColumnsList();
33.     columns = [
34.       ...bannerColumns,
35.       {
36.         title: '操作',
37.         key: 'operation',
38.         align: 'center',
39.         width: 120,
40.         render: (_text: any, record: any) =>
41.           [
42.             <div className='banner_opertion'>
43.               <div key={`${record.id}-update`} onClick={() => handleUpdateClick(record.id)}>修改</div>
44.               <Popconfirm
45.                 title="确定要删除这条记录吗？"
46.                 onConfirm={() => {
47.                   try {
48.                     getBannerDelete({
49.                       id: record.id
50.                     }).then((res: any) => {
51.                       if (res.data.code === 200) {
52.                         message.success('删除成功');
53.                         fetchData();
54.                       } else {
55.                         message.error(res.data.message);
56.                       }
57.                     })
58.                   } catch (error) {
59.                     message.error('删除失败!');
60.                   }
61.                 }
62.                 }
63.                 okText="确定"
64.                 cancelText="取消"
65.               >
66.                 <div key={`${record.id}-delete`}>删除</div>
67.               </Popconfirm>
68.             </div>
69.           ]
70.       }
71.     ];
72.     return columns; // 确保返回值
73.   }
75.   const handleUpdateClick = (id: number) => {
76.     setSelectedId(id);
77.     setVisible(true);
78.   };
79.   
80.   const getBannerListData = async () => {
81.     try {
82.       const res = await getBannerList(queryParams);
83.       if (res.data.code === 200) {
84.         setBannerList(res.data.data);
85.         setPagination({
86.           ...pagination,
87.         })
88.       } else {
89.         message.error(res.data.message);
90.       }
91.     } catch (error) {
92.       message.error('获取数据失败!');
93.     }
94.   }
96.   const fetchData = async () => {
97.     try {
98.       await getBannerListData();
99.       const column = await getTableColmuns();
100.       setColumns(column);
101.     } catch (error) {
102.       message.error('获取数据失败!');
103.     }
104.   };
106.   useEffect(() => {
107.     fetchData();
108.   }, [])
110.   const handleMessageSearch = (msg: any) => {
111.     setQueryParams({ ...queryParams, bannername: msg })
112.   };
114.   const getBannerAdd = (msg: any) => {
115.     setVisible(msg)
116.   }
118.   const handleModalClose = () => {
119.     setVisible(false);
120.     setSelectedId(null);
121.   };
123.   useEffect(() => {
124.     getBannerListData();
125.   }, [queryParams]);
127.   return (
128.     <>
129.       <SearchForm SumbitSearch={handleMessageSearch} SumbitAdd={getBannerAdd} />
130.       <BannerAddOrEdit visible={visible} onClose={handleModalClose} id={selectedId} onRefresh={fetchData} />
131.       <Table
132.         columns={columns}
133.         dataSource={bannerList}
134.         pagination={pagination}
135.         rowKey={(record: any) => `table_${record.id}`}
136.         scroll={{ x: 1200 }}
137.       />
138.     </>
139.   )
140. }
141. export default BannerList;

复制代码

pages/BannerList/columns.tsx

1. import type { TableProps } from 'antd';
2. import type { BannerData } from '../../types/banner';
3. import { Image } from 'antd';
4. export const BannerColumnsList: () => Promise<TableProps<BannerData>['columns']> = async () => {
5.     return [
6.         {
7.             title: 'id',
8.             dataIndex: 'id',
9.             key: 'id',
10.             align: 'center',
11.         },
12.         {
13.             title: '轮播图名称',
14.             dataIndex: 'bannername',
15.             key: 'bannername',
16.             align: 'center',
17.         },
18.         {
19.             title: '图片',
20.             dataIndex: 'url',
21.             key: 'url',
22.             align: 'center',
23.             render: (url: string) => (
24.                 <Image
25.                     width={80}
26.                     height={80}
27.                     src={url}
28.                 />
29.             ),
30.         },
31.     ]
32. }

复制代码

pages/BannerList/SearchForm.tsx

1. import type { FormProps } from 'antd';
2. import { Button, Form, Input, Row, Col } from 'antd';
3. import { SearchOutlined, PlusOutlined, RedoOutlined } from '@ant-design/icons';
4. import { useEffect } from 'react';
5. import './banner.sass'
6. type FieldType = {
7.     bannername?: string;
8. };
10. const SearchForm = (props: any) => {
11.     const [form] = Form.useForm();
12.     const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
13.         props.SumbitSearch(values.bannername);
14.     };
15.     const onReset = () => {
16.         form.resetFields();
17.         onFinish(form.getFieldsValue())
18.     };
20.     //新增轮播图弹窗
21.     const addBannerModal = () => {
22.         // 弹窗显示
23.         props.SumbitAdd(true)
24.     }
25.     useEffect(() => {
26.         form.setFieldsValue({
27.             bannername: ''
28.         })
29.     }, [])
30.     return (
31.         <>
32.             <Form
33.                 name="basic"
34.                 labelCol={{ span: 4 }}
35.                 wrapperCol={{ span: 20 }}
36.                 onFinish={onFinish}
37.                 autoComplete="off"
38.                 form={form}
39.             >
40.                 <Row gutter={24}>
41.                     <Col span={12}>
42.                         <Form.Item<FieldType>
43.                             label="轮播图名称"
44.                             name="bannername"
45.                         >
46.                             <Input />
47.                         </Form.Item></Col>
48.                     <Col span={12}>
49.                         <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
50.                             <Button type="primary" htmlType="submit">
51.                                 <SearchOutlined />  搜索
52.                             </Button>
53.                             <Button className='banner_button' onClick={onReset}>
54.                                 <RedoOutlined />重置
55.                             </Button>
56.                             <Button className='banner_button' type="primary" onClick={addBannerModal}>
57.                                 <PlusOutlined />  新增轮播图
58.                             </Button>
59.                         </Form.Item></Col>
60.                 </Row>
61.             </Form>
62.         </>
63.     )
64. }
65. export default SearchForm;

复制代码

pages/BannerList/BannerAddOrEdit.tsx

1. import React, { useState, useEffect } from 'react';
2. import { Modal, Button, message, Upload, Input, Form, Image } from 'antd';
3. import { UploadOutlined } from '@ant-design/icons';
4. import type { UploadProps } from 'antd';
5. import { getBannerAdd, getBannerUpdate, getBannerDetail } from '../../api/banner'
6. import { API_URL, getToken } from '../../../common'
7. import type { BannerAddOrEditProps, } from '../../types/banner'
9. const BannerAdd: React.FC<BannerAddOrEditProps> = ({ visible, onClose, onRefresh, id }) => {
10.   const [localVisible, setLocalVisible] = useState(visible);
11.   const [title, setTitle] = useState<string>('');
12.   const [url, setUrl] = useState<string>('');
13.   const [bannername, setBannername] = useState<string>('')
14.   const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
15.   const [form] = Form.useForm();
17.   useEffect(() => {
18.     setLocalVisible(visible);
19.     if (!id) {
20.       setBannername('')
21.       setUrl('')
22.     } else {
23.       getBannerDetail({
24.         id: id
25.       }).then((res: any) => {
26.         if (res.data.code === 200) {
27.           setTitle('修改轮播图')
28.           setBannername(res.data.data.bannername)
29.           setUrl(res.data.data.url)
30.           form.setFieldsValue({
31.             bannername: res.data.data.bannername,
32.             url: res.data.data.url,
33.           });
34.         }
35.       })
36.     }
37.   }, [visible]);
40.   useEffect(() => {
41.     if (id) {
42.       setTitle('修改轮播图')
43.     } else {
44.       setTitle('新增轮播图')
45.     }
46.   }, [id])
48.   const handleOk = () => {
49.     try {
50.       setConfirmLoading(true);
51.       if (id) {
52.         getBannerUpdate({
53.           id: id,
54.           bannername,
55.           url
56.         }).then((res: any) => {
57.           if (res.data.code === 200) {
58.             message.success(res.data.message);
59.             setConfirmLoading(false);
60.             setLocalVisible(false);
61.             onClose();
62.             onRefresh(); // 调用父组件传递的回调函数
63.           } else {
64.             message.error(res.data.message);
65.             setConfirmLoading(false);
66.           }
67.         })
68.       } else {
69.         getBannerAdd({
70.           bannername,
71.           url
72.         }).then((res: any) => {
73.           if (res.data.code === 200) {
74.             message.success(res.data.message);
75.             setConfirmLoading(false);
76.             setLocalVisible(false);
77.             onClose();
78.             onRefresh(); // 调用父组件传递的回调函数
79.           } else {
80.             message.error(res.data.message);
81.             setConfirmLoading(false);
82.           }
83.         })
84.       }
85.     } catch (err: any) {
86.       message.error(err);
87.     }
88.   };
90.   const handleCancel = () => {
91.     setLocalVisible(false);
92.     onClose();
93.   };
95.   const props: UploadProps = {
96.     name: 'file',
97.     action: API_URL + '/banner/upload',
98.     headers: {
99.       Authorization: getToken() || 'defaultTokenValue',
100.     },
101.     onChange(info) {
102.       if (info.file.status !== 'uploading') {
103.         // console.log(info.file, info.fileList);
104.       }
105.       if (info.file.status === 'done') {
106.         message.success(`${info.file.name} file uploaded successfully`);
107.         setUrl(info.file.response.data.url);
108.       } else if (info.file.status === 'error') {
109.         message.error(`${info.file.name} file upload failed.`);
110.       }
111.     },
112.   };
114.   return (
115.     <div>
116.       <Modal title={title} open={localVisible} onOk={handleOk} onCancel={handleCancel} confirmLoading={confirmLoading} footer={
117.         [
118.           <Button key="cancel" onClick={handleCancel}>取消</Button>,
119.           <Button key="confirm" type="primary" onClick={handleOk} loading={confirmLoading}>确认</Button>
120.         ]
121.       }>
122.         <Form layout="vertical" form={form}>
123.           <Form.Item label="轮播图名称" name="bannername" rules={[{ required: true, message: '请输入轮播图名称' }]}>
124.             <Input placeholder="请输入轮播图名称" value={bannername} onChange={(e) => setBannername(e.target.value)}></Input>
125.           </Form.Item>
126.           <Form.Item label="轮播图" name="url" rules={[{ required: true, message: '请上传轮播图' }]}>
127.             <Upload {...props} maxCount={1} showUploadList={false}>
128.               <Button icon={<UploadOutlined />}>上传</Button>
129.             </Upload>
130.           </Form.Item>
131.           {
132.             url ? <Form.Item label="轮播图预览" name="url">
133.               <Image width={200} src={url} />
134.             </Form.Item> : ''
135.           }
136.         </Form>
137.       </Modal>
138.     </div>
139.   )
140. }
142. export default BannerAdd;

复制代码

 pages/BannerList/index.sass

1. .banner_button
2.     margin-left: 10px
3. .banner_opertion
4.     display: flex
5.     justify-content: space-evenly
6.     align-items: center
7.     cursor: pointer
8.     color: #26a0f1

复制代码

完备代码

   看本人git地址啦

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。