背景

最近经常有开发前端的需求，就记录下自己是如何一步一步开发一个增删改查的

主要思路

  1. 创建项目
  2. 运行项目
  3. 准备后端API
  4. 调用API 【分页列表】
  5. 调用API 【新增】
  6. 调用API 【修改】
  7. 调用API 【删除】
  8. 环境配置
  9. 容器发布

    一. 创建项目

    TIPS：建议直接通过命令行创建，最近使用vscode插件创建的项目无法启动
    1. yarn create ice ice-demo
    ```latex yarn create v1.22.10 warning package.json: No license field [1/4] 🔍 Resolving packages… [2/4] 🚚 Fetching packages… [3/4] 🔗 Linking dependencies… [4/4] 🔨 Building fresh packages…

success Installed “create-ice@1.7.5” with binaries:

  1.   - create-ice

[#####################################################################] 139/139create-ice version: 1.7.5 create-ice args ice-demo undefined ? Please select a template (Use arrow keys) ❯ TypeScript + No UI Components TypeScript + Ant Design TypeScript + Fusion Design TypeScript + Fusion Design Pro JavaScript + Fusion Design ice.js plugin development template.

  1. 控制键盘上下， 选择 TypeScript + Fusion Design Pro
  2. ```latex
  3. ? Please select a template TypeScript + Fusion Design Pro
  4. download tarballURL https://registry.npmmirror.com/@alifd/fusion-design-pro/-/fusion-design-pro-0.5.1.tgz
  5. ✔ download npm tarball successfully.
  6. clean package.json...
  8. Initialize project successfully.
  10. Starts the development server.
  12.     cd ice-demo
  13.     npm install
  14.     npm start
  17. We have prepared develop toolkit for you.
  18. See: https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks
  20. ✨  Done in 134.63s.

安装依赖

  1. $ cd ice-demo
  2. $ yarn

等待启动

二. 运行项目

  1. $ yarn start

yarn run v1.22.10 warning ../../../../package.json: No license field $ icejs start ice.js 2.6.4 > Local: http://localhost:3333/ > Network: http://172.100.80.35:3333/ [vite:css] @charset must precede all other statements 4 | body { 5 | -webkit-font-smoothing: antialiased; 6 | } | ^ 7 |

会自动打开浏览器 打开项目 效果图
image.png

三. 准备后端API

使用ApiPost 提供的Mock
https://console-docs.apipost.cn/preview/eb2002184dcd9d95/bd10a0fd2f1333a2?target_id=da14b01d-4617-4448-f662-781a7adecea0#da14b01d-4617-4448-f662-781a7adecea0

四. 调用API 【分页列表】

1. 创建Page

  1. import * as React from 'react';
  2. import { ResponsiveGrid } from '@alifd/next';
  3. import PageHeader from '@/components/PageHeader';
  5. const { Cell } = ResponsiveGrid;
  7. const NewsListPage = () => {
  8.   return (
  9.     <ResponsiveGrid gap={20}>
  10.       <Cell colSpan={12}>
  11.         <PageHeader
  12.           title="新闻列表"
  13.           breadcrumbs={[
  14.             { name: '新闻管理' },
  15.             { name: '新闻列表' },
  16.           ]}
  17.           description="展示近期得新闻列表"
  18.         />
  19.       </Cell>
  21.       <Cell colSpan={12}>
  22.         666
  23.       </Cell>
  24.     </ResponsiveGrid>
  25.   );
  26. };
  28. export default NewsListPage;

2. 配置路由页面

  1. const NewsListPage = lazy(() => import('@/pages/NewsListPage'));
  2. // 找到routerConfig 添加
  3. const routerConfig: IRouterConfig[] = [
  4.   {
  5.     path: '/',
  6.     component: BasicLayout,
  7.     children: [
  8.       {
  9.         path: '/news/list',
  10.         component: NewsListPage,
  11.       },
  12.     ]
  13.   }
  14. ]

3. 配置菜单和路由

  1. const asideMenuConfig = [
  2.   {
  3.     name: '新闻管理',
  4.     path: '/',
  5.     icon: 'chart-news',
  6.     children: [
  7.       {
  8.         name: '新闻列表',
  9.         path: '/news/list',
  10.       },
  11.     ],
  12.   },
  13. ]

4. 查看效果

image.png

5. 核心组件代码

  1. import React, { useCallback } from 'react';
  2. import { Button, Field, Table, Card, Pagination, Message, Dialog } from '@alifd/next';
  3. import { useFusionTable } from 'ahooks';
  4. import { request } from 'ice';
  6. /*
  7.  * 获取表格数据
  8.  * @param current 第几页
  9.  * @param pageSize 每页条数
  10.  * @param formData 表格数据
  11.  */
  12. const getTableData = (
  13.   { current, pageSize }: { current: number; pageSize: number },
  14.   formData: { status: 'normal' | 'empty' | 'exception' },
  15. ): Promise<any> => {
  16.   if (!formData.status || formData.status === 'normal') {
  17.     let query = `page=${current}&pageSize=${pageSize}`;
  18.     Object.entries(formData).forEach(([key, value]) => {
  19.       if (value) {
  20.         query += `&${key}=${value}`;
  21.       }
  22.     });
  23.     return request(`/api/news?${query}`)
  24.       .then(res => ({
  25.         total: res.data.total,
  26.         list: res.data.list.slice(0, 10),
  27.       }));
  28.   }
  29.   if (formData.status === 'empty') {
  30.     return Promise.resolve([]);
  31.   }
  32.   if (formData.status === 'exception') {
  33.     return new Promise((resolve, reject) => {
  34.       setTimeout(() => {
  35.         reject(new Error('data exception'));
  36.       }, 1000);
  37.     });
  38.   }
  40.   return Promise.resolve([]);
  41. };
  43. const NewsDialogTable: React.FC = () => {
  44.   const field = Field.useField([]);
  45.   const { paginationProps, tableProps, search, error, refresh } = useFusionTable(getTableData, {
  46.     field,
  47.   });
  48.   const { reset } = search;
  50.   const handleDelete = useCallback((data: any) => {
  51.     if (!data) {
  52.       return;
  53.     }
  54.     Dialog.confirm({
  55.       title: '删除提醒',
  56.       content: `确定删除 ${data.title} 吗`,
  57.       onOk() {
  58.         request({
  59.           url: `/api/news/${data.id}`,
  60.           method: 'DELETE',
  61.         })
  62.           .then(res => {
  63.             Message.success(`${data.title} 删除成功!`);
  64.             reset();
  65.           });
  66.       },
  67.     });
  68.   }, [reset]);
  70.   const cellOperation = (...args: any[]): React.ReactNode => {
  71.     const record = args[2];
  72.     return (
  73.       <div>
  74.         <Button
  75.           text
  76.           type="primary"
  77.           onClick={() => handleDelete(record)}
  78.         >
  79.           删除
  80.         </Button>
  81.       </div>
  82.     );
  83.   };
  85.   return (
  86.     <div>
  87.       <Card free>
  88.         <Card.Content>
  89.           <Table
  90.             {...tableProps}
  91.             // onResizeChange={onResizeChange}
  92.             // emptyContent={error ? <ExceptionBlock onRefresh={refresh} /> : <EmptyBlock />}
  93.             primaryKey="email"
  94.           >
  95.             <Table.Column title="标题" dataIndex="title" resizable />
  96.             <Table.Column title="作者" dataIndex="author" resizable />
  97.             <Table.Column title="预览地址" dataIndex="url" resizable />
  98.             <Table.Column title="归属地" dataIndex="ip" resizable />
  99.             <Table.Column title="内容" dataIndex="content" resizable />
  100.             <Table.Column
  101.               title="操作"
  102.               resizable
  103.               cell={cellOperation}
  104.             />
  105.           </Table>
  106.           <Pagination
  107.             style={{ marginTop: 16, textAlign: 'right' }}
  108.             totalRender={(total) => (
  109.               <>
  110.                 共{' '}
  111.                 <Button text type="primary">
  112.                   {total}
  113.                 </Button>{' '}
  114.                 个记录
  115.               </>
  116.             )}
  117.             {...paginationProps}
  118.           />
  119.         </Card.Content>
  120.       </Card>
  121.     </div>
  122.   );
  123. };
  125. export default NewsDialogTable;
  1.  <Cell colSpan={12}>
  2.   <NewsDialogTable />
  3. </Cell>

配置全局请求路径

  1. const appConfig: IAppConfig = {
  2.   request: {
  3.     baseURL: 'https://console-mock.apipost.cn/app/mock/project/035500cd-6c40-4d49-be88-c3f3fbcd28d3',
  4.   },
  5. };
  6. runApp(appConfig);

6. 效果预览

image.png
image.png

案例代码

参考资源