您的位置: 首页  >  文章  >  react demo:人员表实现笔记

react demo:人员表实现笔记

分类: 文章 • 2025-07-13 08:26:22

1.功能概览

  1. 人员基本信息列表展示
  2. 人员录入及删除
  3. 人员详细信息查看
  4. 人员信息编辑
  5. 根据人员身份筛选
  6. 根据人员属性排序
  7. 根据人员姓名、年龄、身份、性别关键字进行搜索

2.划分UI component

界面模块划分如下：

react demo:人员表实现笔记

组件名称和介绍：

  1. ManageSystem    最外层容器，容纳整个应用
  2. StaffHeader    负责接受用户检索，筛选，排序操作
  3. StaffItem    负责展示一条人员基本信息
  4. StaffPannel    负责展示所有基于用户操作结果的条目
  5. StaffFooter    负责新人员的添加
  6. StaffDetail    负责展示和编辑人员详细信息

框架结构：

ManageSystem

    StaffHeader

    StaffPannel

        StaffItem

        StaffItem

        StaffItem...

    StaffFooter

    StaffDetail

3.构建静态版的react应用

  1. 就是编写各个组件的js页面，最后用managerSystem.js串起来。

4.编译打包

  1. npm init，生成package.json文件;
  2. npm修改script命令，改为webpack打包；
  3. 在package.json中添加依赖；
  4. 编辑webpack.config.js配置文件；
  5. 最后npm start打包；

5.添加STAFF类

  1. 将数据封装在STAFF类中，并且实现具体的用户操作函数

6.完成新增人员功能

  1. 修改StafFooter.js：添加onClick事件绑定在addStaff上；
  2. 修改managerSystem.js：配置staffFooter中的addStaff属性方法为本地addStaff方法（实际上是引用this.staff的方法）
  3. 修改STAFF.js：addStaff方法的具体实现；

7.完成关键字搜索功能

  1. 同上一步（6）差不多，具体实现逻辑为字符串匹配。

8.其他功能

相关推荐