前端(Cursor)-部门管理

简介: 根据部门管理原型图及接口文档,完成增删改查功能开发。接口基于HTTP协议,使用GET、POST、PUT、DELETE方法操作部门数据,前端通过axios调用后端服务(地址:http://zxyf-management.ns-682s7u7w.svc.cluster.local:8080),需注意关闭登录拦截以确保通信正常。

提示语编写
● 注意换成自己的后端服务器内网地址
请根据提供的部门管理的页面原型图,和接口文档完成部门管理的功能开发,包括:增加、修改、删除、查询部门的功能。

  1. 具体的接口信息如下:
    1.1 部门列表查询
    请求路径:/depts
    请求方式:GET
    请求参数:无
    响应数据格式:

      {
        "code": 1,
        "msg": "success",
        "data": [
          {
            "id": 1,
            "name": "学工部",
            "createTime": "2022-09-01T23:06:29",
            "updateTime": "2022-09-01T23:06:29"
          },
          {
            "id": 2,
            "name": "教研部",
            "createTime": "2022-09-01T23:06:29",
            "updateTime": "2022-09-01T23:06:29"
          }
        ]
      }
    

    1.2 删除部门

     请求路径:/depts/{id}
     请求方式:DELETE
     请求参数:id ,为路径参数
     请求样例:/depts/1, /depts/2
     响应数据格式:
         {
             "code":1,
             "msg":"success",
             "data":null
         }
    

    1.3 添加部门

     请求路径:/depts
     请求方式:POST
     请求样例:{"name": "教研部"}
     响应数据格式:
         {
             "code":1,
             "msg":"success",
             "data":null
         }
    

    1.4 根据ID查询

     请求路径:/depts/{id}
     请求方式:GET
     请求参数:id ,为路径参数
     请求样例:/depts/1, /depts/2
     响应数据格式:
         {
           "code": 1,
           "msg": "success",
           "data": {
             "id": 1,
             "name": "学工部",
             "createTime": "2022-09-01T23:06:29",
             "updateTime": "2022-09-01T23:06:29"
           }
         }
    

    1.5 修改部门

     请求路径:/depts
     请求方式:PUT
     请求样例:
         {
             "id": 1,
             "name": "教研部"
         }
     响应数据格式:
         {
             "code":1,
             "msg":"success",
             "data":null
         }
    
  2. 前端要访问的服务端的访问地址为: http://zxyf-management.ns-682s7u7w.svc.cluster.local:8080

代码运行与测试
注意他的代码生成,是需要借助到axios,所以我们需要点击安装

然后运行

可以看到,的确有布局、有按钮,但是提示网络错误

借助于F12,我们可以看到有如下报错,聪明的小伙伴你肯定知道该怎么做了

我直接将这个图复制给Cursor,同时声明一下描述信息

阅读一下修正代码,然后我们接受,再去浏览器访问

这是因为我们前面在后端做了登录校验,此时我们到后端工程,做一个提示优化。一定要看生成的代码
不做登录拦截的校验,临时注释一些代码
可以看到其做法是注释部分代码,注释后我们重启工程

此时,我们就有了后端的数据

你可以依次验证一下,发现功能都是好用的。
目前前端页面还可以继续优化,但是我的Cursor次数不多了,这里不再持续优化,大家

相关文章
uniapp中uview组件库丰富的tab标签
uniapp中uview组件库丰富的tab标签
432 0
|
3月前
|
前端开发
前端(Cursor)-员工管理
根据页面原型与接口文档,完成员工管理功能开发,实现增删改查及分页查询。按要求调整新增员工表单布局为六行结构,宽度800px,包含用户名、姓名、性别、手机号、职位、薪资、部门、入职日期、头像上传及可动态增删的工作经历项,确保界面与交互符合设计。
|
前端开发 开发者
类组件(Class component)和 函数式组件(Functional component) 之间有何区别?
类组件(Class component)和 函数式组件(Functional component) 之间有何区别?
372 0
|
3月前
|
Web App开发 JavaScript 前端开发
nvm安装、下载使用详情 - node版本管理工具
nvm是一个node的版本管理工具,可以简单操作node版本的切换、安装、查看。。。等等,与npm不同的是,npm是依赖包的管理工具。
1281 5
|
5月前
|
人工智能 数据可视化 数据库连接
保姆级教程 | 0代码,用n8n一键打通微信、钉钉与数据库,效率提升500%
n8n是一款开源可视化自动化工具,无需编程即可连接微信、钉钉、数据库等400+服务。通过拖拽节点搭建工作流,实现数据同步、消息通知等自动化,效率提升500%。支持免费私有部署,安全可控,零成本开启高效办公新体验。
|
JavaScript
Js判断是否包含特殊字符的方法
Js判断是否包含特殊字符的方法
466 0
|
移动开发 HTML5
input只读,禁用,必填,提示词(占位符)属性分别是什么?
input只读,禁用,必填,提示词(占位符)属性分别是什么?
410 0
input只读,禁用,必填,提示词(占位符)属性分别是什么?
|
前端开发 JavaScript 开发者
深入理解JavaScript中的Promise:用法与最佳实践
【10月更文挑战第8天】深入理解JavaScript中的Promise:用法与最佳实践
1354 0
|
JavaScript 前端开发 测试技术
[新手入门]todolist增删改查:vue3+ts版本!
【10月更文挑战第15天】[新手入门]todolist增删改查:vue3+ts版本!
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
816 0