4.7 前端(Cursor)-部门管理

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

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