前端(Cursor)-员工管理

简介: 根据页面原型与接口文档,完成员工管理功能开发,实现增删改查及分页查询。按要求调整新增员工表单布局为六行结构,宽度800px,包含用户名、姓名、性别、手机号、职位、薪资、部门、入职日期、头像上传及可动态增删的工作经历项,确保界面与交互符合设计。

编写提示词
请根据提供的员工管理的页面原型图 ,和接口文档完成员工管理的功能开发 ,包括:增加、修改、删除、查询员工的功能。

  1. 具体的接口信息如下:
    1.1 员工列表查询
      请求路径:/emps
      请求方式:GET
      请求参数:
          name: 姓名,可选
          gender: 性别,可选
          begin: 入职日期的开始时间,可选
          end: 入职日期的结束时间,可选
          page: 页码,默认1
          pageSize: 每页展示记录数,默认10
      请求样例:
          /emps?page=1&pageSize=10
          /emps?name=张&page=1&pageSize=10
          /emps?gender=1&page=1&pageSize=10
          /emps?name=张&gender=1&page=1&pageSize=10
          /emps?name=张&gender=1&begin=2007-09-01&end=2022-09-01&page=1&pageSize=10
      响应数据格式:
          {
            "code": 1,
            "msg": "success",
            "data": {
              "total": 2,
              "rows": [
                 {
                  "id": 1,
                  "username": "jinyong",
                  "name": "金庸",
                  "gender": 1,
                  "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2022-09-02-00-27-53B.jpg",
                  "position": 2,
                  "salary": 8000,
                  "hireDate": "2015-01-01",
                  "deptId": 2,
                  "deptName": "教研部",
                  "createTime": "2022-09-01T23:06:30",
                  "updateTime": "2022-09-02T00:29:04"
                },
                {
                  "id": 2,
                  "username": "zhangwuji",
                  "name": "张无忌",
                  "gender": 1,
                  "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2022-09-02-00-27-53B.jpg",
                  "position": 2,
                  "salary": 6000,
                  "hireDate": "2015-01-01",
                  "deptId": 2,
                  "deptName": "教研部",
                  "createTime": "2022-09-01T23:06:30",
                  "updateTime": "2022-09-02T00:29:04"
                }
              ]
            }
          }
       响应数据含义: 
         id: 员工ID
         username: 用户名
         name: 姓名
         gender: 性别 , 1 男 ; 2 女
         image: 图像
         position: 职位, 说明: 1 班主任,2 讲师, 3 学工主管, 4 教研主管, 5 咨询师
         salary: 薪资
         hireDate: 入职日期
         deptId: 部门ID
         deptName: 部门名称
         createTime: 创建时间
         updateTime: 更新时间
    
    1.2 删除员工
        请求路径:/emps
        请求方式:DELETE
        请求参数:ids ,为路径参数
        请求样例:
            /emps?ids=1
            /emps?ids=1,2,3
        响应数据格式:
            {
                "code":1,
                "msg":"success",
                "data":null
            }

    1.3 添加员工
        请求路径:/emps
        请求方式:POST
        请求样例:
            {
              "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2022-09-03-07-37-38222.jpg",
              "username": "linpingzhi",
              "name": "林平之",
              "gender": 1,
              "position": 1,
              "hireDate": "2022-09-18",
              "deptId": 1,
              "phone": "18809091234",
              "salary": 8000,
              "exprList": [
                  {
                     "company": "百度科技股份有限公司",
                     "position": "java开发",
                     "startDate": "2012-07-01",
                     "endDate": "2019-03-03"
                  },
                  {
                     "company": "阿里巴巴科技股份有限公司",
                     "position": "架构师",
                     "startDate": "2019-03-15",
                     "endDate": "2023-03-01"
                  }
               ]
            }
        请求数据说明: 
            username: 用户名
            name: 姓名
            phone: 手机号
            gender: 性别 , 1 男 ; 2 女
            image: 图像
            position: 职位, 说明: 1 班主任,2 讲师, 3 学工主管, 4 教研主管, 5 咨询师
            salary: 薪资
            hireDate: 入职日期
            deptId: 部门ID
            exprList: 员工工作经历列表
                company: 公司
                position: 职位
                startDate: 工作经历开始时间
                endDate: 工作经历开始时间

        响应数据格式:
            {
                "code":1,
                "msg":"success",
                "data":null
            }

    1.4 根据ID查询
        请求路径:/emps/{id}
        请求方式:GET
        请求参数:id ,为路径参数
        请求样例:/emps/1, /emps/2
        响应数据格式:
            {
              "code": 1,
              "msg": "success",
              "data": {
                "id": 2,
                "username": "zhangwuji",
                "name": "张无忌",
                "gender": 1,
                "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2022-09-02-00-27-53B.jpg",
                "position": 2,
                "salary": 8000,
                "hireDate": "2015-01-01",
                "deptId": 2,
                "createTime": "2022-09-01T23:06:30",
                "updateTime": "2022-09-02T00:29:04",
                "exprList": [
                  {
                    "id": 1,
                    "startDate": "2012-07-01",
                    "endDate": "2019-03-03"
                    "company": "百度科技股份有限公司"
                    "position": "java开发",
                    "empId": 2
                  },
                  {
                    "id": 2,
                    "startDate": "2019-3-15",
                    "endDate": "2023-03-01"
                    "company": "阿里巴巴科技股份有限公司"
                    "position": "架构师",
                    "empId": 2
                  }
                ]
              }
            }

    1.5 修改员工
        请求路径:/emps
        请求方式:PUT
        请求样例:
            {
                "id": 2,
                "username": "zhangwuji",
                "password": "123456",
                "name": "张无忌",
                "gender": 1,
                "image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2022-09-02-00-27-53B.jpg",
                "position": 2,
                "salary": 8000,
                "hireDate": "2015-01-01",
                "deptId": 2,
                "createTime": "2022-09-01T23:06:30",
                "updateTime": "2022-09-02T00:29:04",
                "exprList": [
                  {
                    "id": 1,
                    "startDate": "2012-07-01",
                    "endDate": "2015-06-20"
                    "company": "中软国际股份有限公司"
                    "position": "java开发",
                    "empId": 2
                  },
                  {
                    "id": 2,
                    "startDate": "2015-07-01",
                    "endDate": "2019-03-03"
                    "company": "百度科技股份有限公司"
                    "position": "java开发",
                    "empId": 2
                  },
                  {
                    "id": 3,
                    "startDate": "2019-3-15",
                    "endDate": "2023-03-01"
                    "company": "阿里巴巴科技股份有限公司"
                    "position": "架构师",
                    "empId": 2
                  }
                ]
              }
        响应数据格式:
            {
                "code":1,
                "msg":"success",
                "data":null
            }
  1. 请严格根据员工管理的页面原型 和 接口文档开发

代码运行与测试
跟之前都一样,遇到错误就粘贴提示

我就遇到这一个错误,修复后增删改查都正常。当然你也可以进一步优化,这里我考虑到次数问题就不再优化
员工管理的基本页面布局已经有了,但是新增员工的表单需要调整,表单的宽度调整为800px。然后根据提供的页面原型图,调整新增员工表单的布局,表单的具体要求如下:
第一行, 展示 用户名 和 姓名。
第二行,展示 性别 和 手机号。
第三行,展示 职位 和 薪资。
第四行,展示 所属部门 和 入职日期。
第五行,展示 头像,是一个文件上传框。
第六行,展示工作经历,在工作经历这个表单项里展示的是一个 "新增工作经历" 的按钮。 每点击一次 新增工作经历, 就需要增加一条工作经历。 工作经历所有的表单项,设置的小一些,一共三个表单项:时间(包括开始时间和结束时间)、公司、职位,表单项的名字也需要展示出来。在每一个工作经历条目后面都有一个删除按钮,点击删除按钮之后,可以删除掉当前这条工作经历。

相关文章
|
4天前
|
存储 API 索引
队列/栈基本原理 ❗前置知识
本文介绍队列和栈两种“操作受限”的数据结构:队列遵循先进先出(FIFO),只能队尾入、队头出;栈遵循先进后出(FILO),仅在栈顶进行增删操作。二者底层多由数组或链表实现,核心API包括push、pop、peek和size,是后续复杂数据结构的基础。
|
4天前
|
Java 索引 容器
单/双链表代码实现
本文详解双链表与单链表的 MyLinkedList 实现,重点介绍三个关键优化:1)同时持有头尾节点引用,提升尾部操作效率;2)使用虚拟头尾节点简化边界处理;3)解析链表删除中的内存泄露误区,并强调指针置空的良好编程习惯。
|
4天前
|
存储 缓存 运维
一场FullGC故障排查
本文记录了一次JDOS容器CPU告警的排查过程,通过分析发现实际为JVM Full GC引发CPU占用升高。结合泰山与SGM监控,定位到堆内存中大对象导致老年代频繁占满。经JPofiler分析,确认问题源于将Excel数据以List<Map<String, String>>形式加载至内存,造成严重内存膨胀。最终提出优化方案:避免大对象驻留JVM或改用高效存储结构,降低GC压力。
|
3天前
|
消息中间件 Kubernetes 网络协议
别老想着怎么用好 RPC 框架,你得多花时间琢磨原理
2011年加入京东,亲历技术演进,现任技术架构部首席架构师。主导微服务、消息中间件等核心系统研发,深耕分布式架构。课程涵盖RPC基础、进阶与高级实战,带你掌握网络通信核心,构建高效可靠分布式系统。(238字)
|
3天前
|
算法 Java 索引
双指针技巧秒杀七道数组题目
本文介绍双指针技巧在数组和链表中的应用,重点解析快慢指针如何实现原地修改。通过LeetCode经典题如删除有序数组/链表重复项,展示如何用慢指针记录结果、快指针遍历数据,高效完成去重,时间复杂度O(N),避免频繁数据搬移。
|
3天前
|
算法
双指针技巧秒杀七道链表题目
本文总结单链表七大技巧:合并有序链表、链表分解、合并K个有序链表、找倒数第k个节点、找中点、判断环及起点、判断相交及交点,均基于双指针思想,涵盖LeetCode多道经典题目,助你系统掌握链表算法核心。
|
3天前
|
JSON 前端开发 Java
另外几个接口文档
提供班级与学员信息管理功能,支持班级列表分页查询、添加、修改、删除及详情查看,同时支持学员信息条件查询,涵盖基本信息、班级关联、学历等字段,便于高效管理教学资源。
|
3天前
|
Java
多叉树的递归/层序遍历
多叉树是二叉树的扩展,节点可有多个子节点。遍历方式与二叉树类似,DFS无中序位置,BFS通过队列实现,支持按层遍历并记录深度,代码结构清晰,易于扩展。
|
3天前
|
算法
二叉树的递归/层序遍历
递归遍历(DFS)按固定顺序访问节点,前/中/后序取决于代码位置。层序遍历(BFS)借助队列实现,可逐层访问,常见写法能记录层数,适用于求深度、分层处理等场景。
|
3天前
|
存储 算法 Java
二叉树基础及常见类型
二叉树是数据结构的核心,不仅是红黑树、堆、图等的基础,更体现了递归思维。掌握二叉树,等于掌握算法与数据结构的关键。本文详解满二叉树、完全二叉树、二叉搜索树及其实现方式,助你彻底理解其原理与应用,为后续算法学习打下坚实基础。