企业官网建设流程全解析

本次作业是在第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 接口文档

基础信息

统一响应格式

所有接口返回格式如下：

{"code":200,"message":"success","data":...}

接口列表

1. 查询用户列表（支持搜索）

请求示例：

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 查询用户

请求示例：

GET /api/users/1

成功响应：

{"code":200,"message":"success","data":{"id":1,"name":"白眉鹰王","age":55,"gender":1,"phone":"18800000000"}}

失败响应：

{"code":404,"message":"用户不存在","data":null}

3. 新增用户

请求体：

{"name":"张无忌","age":22,"gender":1,"phone":"19900000000"}

字段说明：

注意：id字段不需要传，数据库自增生成，插入成功后会回填到响应中。

响应示例：

{"code":200,"message":"新增成功","data":{"id":7,"name":"张无忌","age":22,"gender":1,"phone":"19900000000"}}

4. 更新用户

请求体：

{"name":"殷天正","age":60,"gender":1,"phone":"18800000000"}

成功响应：

{"code":200,"message":"更新成功","data":null}

失败响应：

{"code":404,"message":"用户不存在","data":null}

5. 删除用户

请求示例：

DELETE /api/users/7

成功响应：

{"code":200,"message":"删除成功","data":null}

失败响应：

{"code":404,"message":"用户不存在","data":null}

数据模型

User 对象

{"id":1,"name":"白眉鹰王","age":55,"gender":1,"phone":"18800000000"}

数据库表结构（SQL Server）

CREATETABLE[user](idINTIDENTITY(1,1)PRIMARYKEY,name NVARCHAR(100)NULL,ageTINYINTNULL,genderTINYINTNULL,phone NVARCHAR(11)NULL);

前端调用示例

Axios 封装

importaxiosfrom'axios'constapi=axios.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}`)

调用示例

// 查询全部constres=awaitgetUsers()console.log(res.data.data)// 用户数组// 搜索constres=awaitgetUsers('王')console.log(res.data.data)// 姓名包含"王"的用户// 新增constres=awaitaddUser({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)

错误码汇总