前端(Cursor)-部门管理

简介: 根据部门管理原型图与接口文档,完成增删改查功能开发,调用后端API实现数据交互,注意替换内网地址并临时关闭登录校验以确保接口连通,前端通过Axios请求数据,实现页面动态渲染与操作响应。

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

  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次数不多了,这里不再持续优化,大家自行安

相关文章
|
6月前
|
SQL 人工智能 Java
30分钟轻松掌握Cursor,快速提升开发效率和体验
本文通过在WebX老项目中实践,验证了Cursor利用AI大模型可高效生成符合老旧项目规范的代码框架,显著提升开发效率与体验。
30分钟轻松掌握Cursor,快速提升开发效率和体验
|
存储 SQL Linux
MinIO客户端安装教程(Window版)
MinIO客户端安装教程(Window版)
2286 0
|
测试技术 Windows
umi如何配置环境变量
umi如何配置环境变量
1075 0
|
5月前
|
存储 SQL 人工智能
Windows Server 2025 中文版、英文版下载 (2025 年 10 月更新)
Windows Server 2025 中文版、英文版下载 (2025 年 10 月更新)
857 0
|
3月前
|
设计模式 前端开发 JavaScript
写在最后
本文整理全网前端面试高频考点,系统涵盖JavaScript、框架原理、网络协议、算法、数据结构等核心知识,助力求职者高效备战。附18条进阶建议,助你斩获Offer,前程似锦。(239字)
|
3月前
|
缓存 前端开发 JavaScript
美团面经
前端面试高频题库,涵盖HTML语义化、CSS布局(BFC、Flex、Grid)、JavaScript核心(原型链、闭包、事件循环)、DOM操作、异步编程(Promise、async/await)、HTTP协议、浏览器原理、Vue响应式、性能优化等全栈知识点,助力系统掌握前端技术体系。
|
10月前
|
druid Java 关系型数据库
Spring Boot与Druid升级解决方案
好的,我需要帮助用户解决他们遇到的数据库连接问题,并升级项目的依赖。首先,用户提供的错误信息是关于Spring Boot应用在初始化数据源时抛出的异常,具体是Druid连接池验证连接失败。同时,用户希望升级项目的依赖版本。
984 10
|
存储 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(13)-- 基于ElementPlus的上传组件进行封装,便于项目使用
基于SqlSugar的开发框架循序渐进介绍(13)-- 基于ElementPlus的上传组件进行封装,便于项目使用
|
安全 Ubuntu Linux
在DVWA靶机上从渗透到控制(weevely和中国蚁剑)
本文介绍如何使用Weevely工具对Ubuntu系统上的DVWA进行渗透测试,通过上传Webshell获取远程服务器控制权。实验环境为靶机IP 192.168.1.37(DVWA低安全等级)和攻击机Kali Linux IP 10.211.55.29。详细步骤包括Weevely安装、Webshell生成与上传、命令执行及提权尝试,并结合中国蚁剑进一步操作。文中强调合法授权和隐蔽性的重要性。
1760 0
在DVWA靶机上从渗透到控制(weevely和中国蚁剑)
|
机器学习/深度学习 人工智能 算法
AI辅助医疗影像:提高诊断准确性
【10月更文挑战第2天】医学影像技术是现代医学诊断的关键手段,但传统方法依赖医生经验,存在误诊风险。AI辅助医疗影像通过自动化图像识别、疾病预测和辅助诊断决策,显著提升了诊断准确性与效率。利用深度学习、数据增强及迁移学习等技术,AI不仅能快速分析影像,还能提供个性化诊疗建议,并实时监测疾病变化。尽管面临数据质量、算法可解释性和伦理法律等挑战,但多模态影像分析、跨学科合作及VR融合等趋势将推动AI在医疗影像领域的广泛应用,助力实现更精准、高效的医疗服务。
1197 3