【react】特种兵之react.tsx列表页面搭建

背景

方便系统运维、不用每次初始化数据都走数据订正

这是第一次毕业之后，用前端语言新建一个页面，过程自然是极其曲折。情绪也是跌宕起伏，从页面显示到数据展渲染展示，每次成功完成一个功能点，内心的喜悦值都上升一个点。当然脑花拧成团，甚至打结也难以知道怎么开发，代码怎么写。开发页面过程中，多次向前端同学请教，也多次借助GPT，帮助我熟悉React的语法格式。本来大学前端网课就一节没听，全靠特种兵之0基础的勇气 (~~不是，疫情期间谁在家学网课啊~~ ）。好在结果是好的，历时四天-前后端都开发完成✅，新技能即将get (一点点皮毛)~~

了解工程架构

Study
-moke
--index.js

-src
--config
---routes.js

--pages
---Calendar
----index.js

--services
---calendar.js

moke 包用来moke后端接口返回的数据
config包用来写整个工程的页面路由
pages包用来写整个工程的所有页面代码
services包用来写后端接口的请求路径

我可开始了啊

了解一些前端相关知识：
–npm （和后端的maven差不多，管理依赖的一个工具）
–node.js（相当于一个运行环境和后端的javac差不多）
–tsx、jsx为React页面文件类型
（初次了解只知道tsx可以和react很好的扩展语法，更好的实现前端页面。）

GPT官方回答

npm（Node Package Manager）是 Node.js 的包管理器，它允许开发者轻松共享和重复使用代码，以及安装和管理依赖项。npm 也提供了一个终端命令行工具，可以方便地安装、升级、卸载和搜索包。

Node.js 是一个运行 JavaScript 的开源环境，它使用了 Chrome V8 引擎来解析和执行 JavaScript 代码。Node.js 具有事件驱动、非阻塞 I/O 和单线程等特点，使得它能够高效地处理大量并发请求。Node.js 可以用于构建服务器端应用程序、命令行工具和桌面应用程序等。

TSX是TypeScript XML的缩写，它是一种在React应用中使用TypeScript的语法扩展。TSX扩展了JSX语法，使得React组件可以使用TypeScript进行类型检查，提高了代码的可靠性和可维护性。

JSX是一种JavaScript的语法扩展，它被React用于描述UI组件的结构和行为。而TSX通过在JSX中添加类型注解，使得React组件的Props和State等属性可以进行类型检查，从而避免了许多类型错误。

TSX的使用需要先安装TypeScript，并在项目中配置相应的TSX编译器。常见的TSX编译器有babel、ts-loader等。

新建一个页面

在pages下新建一个包 Calendar，新建一个文件index.tsx。

怎么写？

第一步先把页面各部分架子搭起来

const IndexPage = () => {
// 定义列头

// 渲染页面数据

return(
// 前端页面代码
)
};
export default IndexPage;

第二步先把页面渲染出来,后面会分步解释

import * as React from 'react';
import {
  ProTable,
  useProTable,
  PageHeader,
  Page,
  Card,
  CardSection,
  Filter,
  ProFormItem,
  Select,
  ProTableRowSelectionInstance,
  ProTableColumnProps,
  Dialog,
  Message,
  Input,
  ProForm,
} from '@alife/whale-ui';
import request from '@alife/whale-request';
import { useRef, useState } from 'react';
import { getList } from '@/services/calendar';

class Props {
  /**
   * id
   */
  id: bigint;

  /**
   * 类别编码
   */
  categoryCode: String;

  /**
   * 帐期
   */
  accountingPeriod: String;

  /**
   * 帐期编码
   */
  code: String;

  /**
   * 月结日期
   */
  date: String;

  /**
   * 描述
   */
  description: String;
};

const IndexPage = () => {
  const rowSelectionRef = useRef<ProTableRowSelectionInstance>();
  const [editVisible, setEditVisible] = useState(false);
  const [formInfo, setFormInfo] = useState<Props>();
  const [isEdit, setIsEdit] = useState(false);

  // 定义列头
  const columns: ProTableColumnProps[] = React.useMemo(
    () => [
      {
        dataIndex: 'categoryCode',
        width: 60,
        align: 'left',
        title: '类别编码',
      },
      {
        dataIndex: 'code',
        width: 80,
        align: 'left',
        title: '帐期编码 ',
      },
      {
        dataIndex: 'accountingPeriod',
        width: 80,
        align: 'left',
        title: '帐期',
      },
      {
        dataIndex: 'date',
        align: 'left',
        width: 100,
        title: '对应日期',
        formatType: 'date',
      },
      {
        dataIndex: 'description',
        width: 100,
        align: 'left',
        title: '描述',
      },
    ],
    [],
  );

  // 渲染页面数据
  const { tableProps, filterProps, refresh } = useProTable(
    // 请求后端数据
    getList(),
    {
      onParamsChange: () => {
        // 当参数改变时清空选中行
        rowSelectionRef.current &&
        rowSelectionRef.current.selectAllPages(false);
      },
    },
  );

  return (
    <Page>
      <PageHeader
        breadcrumbProps={{
          dataSource: [
            { children: '月结日历-特殊日期' },
            { children: '月结日历列表' },
          ],
        }}
      />

      <Page>
        <Dialog cardMode title={isEdit ? '编辑数据' : '新增数据'} visible={editVisible}
                onClose={() => {
                  setEditVisible(false);
                  setFormInfo(undefined);
                }}
                onCancel={() => {
                  setEditVisible(false);
                  setFormInfo(undefined);
                }}
                onOk={() => {
                  request({
                    url: `/caijing-ops/api/calendar/special/day/createOrUpdate`,
                    method: 'POST',
                    data: {
                      id: formInfo.id,
                      categoryCode: formInfo.categoryCode,
                      accountingPeriod: formInfo.accountingPeriod,
                      code: formInfo.code,
                      date: formInfo.date,
                      description: formInfo.description,
                    },
                  }).then(() => {
                    Message.success(isEdit ? '编辑成功' : '新增成功');
                    setFormInfo(undefined);
                  });
                  setEditVisible(false);
                }}
        >
          <Card segmentLine>
            <CardSection>
              <ProForm isPreview layoutMode='responsive' value={formInfo}>
                <ProFormItem isPreview={false} required={true} colSpan={1} label='类别编码'>
                  <Select name='categoryCode' defaultValue={'MEC'} hasSelectAll showSearch
                          dataSource={[
                            {
                              label: 'MEC',
                              value: 'MEC',
                            },
                            {
                              label: 'ANT',
                              value: 'ANT',
                            },
                          ]} />
                </ProFormItem>
                <ProFormItem isPreview={false} colSpan={1} label='帐期' explanation={'格式为 年份-月份 eg：2023-01'}>
                  <Input name={'accountingPeriod'} />
                </ProFormItem>
                <ProFormItem isPreview={false} colSpan={1} label='帐期编码' explanation={'格式为 类别_D? eg：MEC_D1'}>
                  <Input name={'code'} />
                </ProFormItem>
                <ProFormItem isPreview={false} colSpan={1} label='月结日期' explanation={'格式为 年-月-日? eg：2023-03-01'}>
                  <Input name={'date'} />
                </ProFormItem>
                <ProFormItem isPreview={false} colSpan={1} label='描述' explanation={'格式为 年-月 月结D? eg：2023-01 月结D1'}>
                  <Input name={'description'} />
                </ProFormItem>
              </ProForm>
            </CardSection>
          </Card>
        </Dialog>
      </Page>
      <Card segmentLine={true}>
        <CardSection>
          <Filter enableForm enableFilterConfiguration {...filterProps}>
            <ProFormItem label='类别'>
              <Select name='categoryCode' defaultValue={'MEC'} hasSelectAll showSearch
                      dataSource={[
                        {
                          label: 'MEC',
                          value: 'MEC',
                        },
                        {
                          label: 'ANT',
                          value: 'ANT',
                        },
                      ]}
              />
            </ProFormItem>
            <ProFormItem label='帐期'>
              <Select name='accountingPeriod' showSearch filterLocal={false} requestConfig={{
                service: ({ params }) => ({
                  url: '/caijing-ops/api/calendar/special/day/selectCode',
                  method: 'GET',
                  params,
                }),
              }}
              />
            </ProFormItem>
            <ProFormItem label='帐期编码'>
              <Select name='code' showSearch filterLocal={false} requestConfig={{
                service: ({ params }) => ({
                  url: '/caijing-ops/api/calendar/special/day/selectAccountingPeriod',
                  method: 'GET',
                  params,
                }),
              }}
              />
            </ProFormItem>
          </Filter>
        </CardSection>
        <CardSection>
          <ProTable
            columns={columns}
            {...tableProps}
            actionBarButtons={{
              dataSource: [
                {
                  children: '新增',
                  type: 'primary',
                  onClick: (e, payload) => {
                    setEditVisible(true);
                  },
                },
              ],
            }}
            actionColumnButtons={{
              dataSource: [
                {
                  children: '编辑',
                  type: 'primary',
                  onClick: (e, payload) => {
                    setEditVisible(true);
                    setIsEdit(true);
                    setFormInfo({
                      id: payload.rowRecord.id,
                      categoryCode: payload.rowRecord.categoryCode,
                      accountingPeriod: payload.rowRecord.accountingPeriod,
                      code: payload.rowRecord.code,
                      date: payload.rowRecord.date,
                      description: payload.rowRecord.description,
                    });
                    console.log(formInfo);
                  },
                },
                {
                  children: '删除',
                  onClick: (e, payload) => {
                    Dialog.confirm({
                      title: `是否确认删除 "${payload.rowRecord.description}"数据?`,
                      onOk: () => {
                        request({
                          url: `/caijing-ops/api/calendar/special/day/delete?id=${payload.rowRecord.id}`,
                          method: 'GET',
                        }).then(() => {
                          Message.success('删除成功');
                          refresh(); // 使用 refresh 刷新当前页
                        });
                      },
                    });
                  },
                },
              ],
            }}
          />
        </CardSection>
      </Card>;
    </Page>
  )
    ;
};

export default IndexPage;

routes.js 此处定义的是前端路由

const CalendarSpecialDayList = React.lazy(() => import('@/pages/Calendar/ListPage'));

const routerConfig=[
  {
    path: '/operation',
    title: '运维管理',
    component: Layout,
    children: [
      {
        path: '/list',
        title: '月结日历运维',
        component: CalendarSpecialDayList,
      }
    ],
  },
]

export default routerConfig;

calendar.js 此处为后端接口路径

export function getList() {
  return async ({ current, pageSize, filterParams }) => {
    const res = await request({
      url: `/list`,
      method: 'POST',
      data: {
        accountingPeriod: filterParams.accountingPeriod,
        code: filterParams.code,
        pageNum: current,
        pageSize: pageSize,
      },
      crossOrigin: true,
    });
    return {
      total: res.count,
      dataSource: res.data,
    };
  };
}

前端代码编写思路

1.设置 Dialog弹窗状态,初始化关闭，在点击新增/编辑时更新为true

  const [editVisible, setEditVisible] = useState(false);

2.设置编辑弹窗内的数据值，用于回显数据
3.在点击确定、取消时关闭弹窗（即把 Dialog弹窗状态update即可）
在这里插入图片描述
4.在定义回显数据时，先定义一个类

class Props {
  /**
   * id
   */
  id: bigint;

  /**
   * 类别编码
   */
  categoryCode: String;

  /**
   * 帐期
   */
  accountingPeriod: String;

  /**
   * 帐期编码
   */
  code: String;

  /**
   * 月结日期
   */
  date: String;

  /**
   * 描述
   */
  description: String;
};

 const [formInfo, setFormInfo] = useState<Props>();

5.Get/Post如何传参
post传参为JSON格式

url: `/list`,
      method: 'POST',
      data: {
        accountingPeriod: filterParams.accountingPeriod,
        code: filterParams.code,
        pageNum: current,
        pageSize: pageSize,
      },

GET传参为拼接URL方式

  url: `/delete?id=${payload.rowRecord.id}`,
  method: 'GET',

感触

前后端交互逻辑独立熟悉编写，感觉react和Java逻辑编写时类似。希望以后能进一步学习，由简到杂，向全栈进军！