web-第8次课后作业

本次作业是在第7次作业的基础上补充前端部分包括接口文档。一、项目文件结构更新pj4/ ├── pom.xml # Maven 配置声明依赖 ├── init.sql # 数据库初始化脚本 ├── mvnw / mvnw.cmd # Maven Wrapper无需本地装 Maven ├── src/ │ ├── main/ │ │ ├── java/com/example/pj4/ │ │ │ ├── Pj4Application.java # Spring Boot 启动入口 │ │ │ ├── pojo/ │ │ │ │ └── User.java # 实体类POJO一张表对应一个类 │ │ │ ├── mapper/ │ │ │ │ └── UserMapper.java # MyBatis Mapper 接口定义数据库操作 │ │ │ └── controller/ │ │ │ └── UserController.java # 【新增】REST 控制器提供 JSON 接口 │ │ └── resources/ │ │ └── application.properties # 数据库连接配置 │ └── test/java/com/example/pj4/ │ └── Pj4ApplicationTests.java # 单元测试 ├── frontend/ # 【新增】前端项目目录 │ ├── index.html # HTML 入口 │ ├── package.json # 前端依赖声明 │ ├── vite.config.js # Vite 构建配置 │ └── src/ │ ├── main.js # Vue 应用入口 │ ├── App.vue # 主页面表格 搜索 弹窗 │ └── api/ │ └── user.js # Axios 封装5 个 API 调用函数 └── target/ # 编译输出目录自动生成不用管二、用户管理 REST API 接口文档基础信息项目内容Base URLhttp://localhost:8080Content-Typeapplication/json字符编码UTF-8统一响应格式所有接口返回格式如下{code:200,message:success,data:...}code含义200成功404资源不存在500服务器内部错误接口列表1. 查询用户列表支持搜索项目内容方法GETURL/api/users参数keyword— 搜索关键词按姓名模糊匹配可选请求示例GET /api/users GET /api/users?keyword王响应示例{code:200,message:success,data:[{id:1,name:白眉鹰王,age:55,gender:1,phone:18800000000},{id:2,name:金毛狮王,age:45,gender:1,phone:18800000001},{id:3,name:青翼蝠王,age:38,gender:1,phone:18800000002}]}2. 按 ID 查询用户项目内容方法GETURL/api/users/{id}路径参数id— 用户 ID整数请求示例GET /api/users/1成功响应{code:200,message:success,data:{id:1,name:白眉鹰王,age:55,gender:1,phone:18800000000}}失败响应{code:404,message:用户不存在,data:null}3. 新增用户项目内容方法POSTURL/api/users请求体{name:张无忌,age:22,gender:1,phone:19900000000}字段说明字段类型必填说明namestring是姓名agenumber是年龄1-150gendernumber是性别1男2女phonestring是手机号11 位注意id字段不需要传数据库自增生成插入成功后会回填到响应中。响应示例{code:200,message:新增成功,data:{id:7,name:张无忌,age:22,gender:1,phone:19900000000}}4. 更新用户项目内容方法PUTURL/api/users/{id}路径参数id— 要更新的用户 ID请求体{name:殷天正,age:60,gender:1,phone:18800000000}成功响应{code:200,message:更新成功,data:null}失败响应{code:404,message:用户不存在,data:null}5. 删除用户项目内容方法DELETEURL/api/users/{id}路径参数id— 要删除的用户 ID请求示例DELETE /api/users/7成功响应{code:200,message:删除成功,data:null}失败响应{code:404,message:用户不存在,data:null}数据模型User 对象{id:1,name:白眉鹰王,age:55,gender:1,phone:18800000000}字段类型说明idnumber主键自增namestring姓名agenumber年龄gendernumber1男2女phonestring手机号数据库表结构SQL ServerCREATETABLE[user](idINTIDENTITY(1,1)PRIMARYKEY,name NVARCHAR(100)NULL,ageTINYINTNULL,genderTINYINTNULL,phone NVARCHAR(11)NULL);前端调用示例Axios 封装importaxiosfromaxiosconstapiaxios.create({baseURL:http://localhost:8080/api,timeout:5000})// 查询全部支持搜索exportconstgetUsers(keyword)api.get(/users,{params:{keyword}})// 按 ID 查询exportconstgetUserById(id)api.get(/users/${id})// 新增exportconstaddUser(user)api.post(/users,user)// 更新exportconstupdateUser(id,user)api.put(/users/${id},user)// 删除exportconstdeleteUser(id)api.delete(/users/${id})调用示例// 查询全部constresawaitgetUsers()console.log(res.data.data)// 用户数组// 搜索constresawaitgetUsers(王)console.log(res.data.data)// 姓名包含王的用户// 新增constresawaitaddUser({name:张无忌,age:22,gender:1,phone:19900000000})console.log(res.data.data.id)// 回填的 ID// 更新awaitupdateUser(1,{name:殷天正,age:60,gender:1,phone:18800000000})// 删除awaitdeleteUser(7)错误码汇总codemessage触发条件200success / 新增成功 / 更新成功 / 删除成功操作成功404用户不存在查询、更新、删除时 ID 不存在500服务器内部错误数据库连接失败等异常