任务驱动实现自己项目中的一个增删改查的页面的查询和删除功能的页面。本项目建立生成系统的用户信息列表一、使用Apifox准备好json数据的mock地址在Apifox中新建项目新建接口以及设置地址、请求和响应{code:1,msg:success,data:[{id:1,username:刘永添,email:liuyongtianwust.edu.cn,phone:13812345678,role:admin,status:1,createdAt:2025-06-27},{id:2,username:张三,email:zhangsanexample.com,phone:13900001111,role:user,status:1,createdAt:2025-06-26}]}1浏览器 中测试云mock地址的数据是否我们想要的。https://m1.apifoxmock.com/m1/8502457-8276595-default/userfindAll二、编写基于vue的静态页面2.1 拷贝axios 和vue的被包含文件 脚本语言2.2 编写html文件前端启动成功三、前后端联调1、建立项目结构文件夹编写实体类Entity文件User.java对应数据库 sys_user 表路径D:\web.html\login\src\main\java\com\resume\login\entity\User.javaResult.java统一响应包装类路径D:\web.html\login\src\main\java\com\resume\login\entity\Result.java编写 Mapper 文件并测试 SQL 语句是否正确路径D:\web.html\login\src\main\java\com\resume\login\mapper\UserMapper.java编写 Service 文件UserService.java接口路径D:\web.html\login\src\main\java\com\resume\login\service\UserService.javaUserServiceImpl.java实现路径D:\web.html\login\src\main\java\com\resume\login\service\impl\UserServiceImpl.java编写 Controller 文件路径D:\web.html\login\src\main\java\com\resume\login\controller\UserController.java测试后端程序是否正确配置 application.yml路径D:\web.html\login\src\main\resources\application.ymlserver:port:8080spring:datasource:url:jdbc:mysql://localhost:3306/resume_db?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghaiusername:root password:driver-class-name:com.mysql.cj.jdbc.Drivermybatis:mapper-locations:classpath:mapper/*.xml type-aliases-package: com.resume.login.entity configuration: map-underscore-to-camel-case: true2.启动项目cd D:\web.html\loginmvnw spring-boot:run3. 浏览器测试接口plainhttp://localhost:8080/api/users/userfindAllJson前后端联调修改 user_list.html将 Mock 地址替换为后端真实接口并启用删除功能。路径D:\web.html\login\src\main\resources\static\user_list.html!DOCTYPEhtmlhtml langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0title用户列表管理/titlestylebody{font-family:MicrosoftYaHei,sans-serif;background:#f5f5f5;margin:0;padding:20px;}h1{text-align:center;color:#333;margin-bottom:20px;}.container{width:80%;margin:0auto;}.toolbar{text-align:right;margin-bottom:10px;}.toolbar a{color:#1890ff;text-decoration:none;font-size:14px;}table{margin:0auto;border-collapse:collapse;width:100%;background:#fff;box-shadow:02px8pxrgba(0,0,0,0.1);}th,td{border:1px solid #e0e0e0;padding:12px;text-align:center;}th{background:#1890ff;color:#fff;font-weight:600;}tr:hover{background:#f0f7ff;}.btn{padding:4px12px;border:none;border-radius:4px;cursor:pointer;font-size:12px;margin:02px;}.btn-del{background:#ff4d4f;color:#fff;}.btn:hover{opacity:0.8;}.tag-admin{background:#e6f7ff;color:#1890ff;padding:2px8px;border-radius:4px;font-size:12px;}.tag-user{background:#f5f5f5;color:#666;padding:2px8px;border-radius:4px;font-size:12px;}.status-on{color:#52c41a;}.status-off{color:#ff4d4f;}.link-edit{color:#1890ff;text-decoration:none;margin-right:8px;}/style/headscript src./js/vue.js/scriptscript src./js/axios-0.18.0.js/scriptbodyh1用户列表管理/h1div idappclasscontainerdivclasstoolbara hrefuser_add.html新增用户/a/divtabletrthID/thth用户名/thth邮箱/thth电话/thth角色/thth状态/thth创建时间/thth操作/th/trtr aligncenterv-foruser in tableDatatd{{user.id}}/tdtd{{user.username}}/tdtd{{user.email}}/tdtd{{user.phone}}/tdtdspan:classuser.role admin ? tag-admin : tag-user{{user.roleadmin?管理员:普通用户}}/span/tdtd:classuser.status 1 ? status-on : status-off{{user.status1?启用:禁用}}/tdtd{{user.createdAt?user.createdAt.replace(T, ):}}/tdtdaclasslink-edit:hrefuser_edit.html?id user.id修改/abuttonclassbtn btn-delclickdeleteUser(user.id)删除/button/td/tr/table/div/bodyscriptnewVue({el:#app,data(){return{tableData:[]}},mounted(){this.loadData();},methods:{loadData(){axios.get(/api/users/userfindAllJson).then(res{if(res.data.code1){this.tableDatares.data.data;}});},deleteUser(id){if(confirm(确定要删除该用户吗)){axios.post(/api/users/deletebyID?idid).then(res{alert(删除成功);this.loadData();});}}},created(){this.loadData();}});/script/htmladd和edit的暂时省略表单修改删除“张三”阶段复盘1.Apifox Mock 阶段步骤1目的 前端先不依赖后端用假数据把页面调通。关键操作新建接口 → 请求方法 GET → 路径 /userfindAll开启云端 Mock新建 Mock 期望 → 在 Body 里填自定义 JSON不是 Mock 脚本复制生成的 Mock 地址浏览器测试确认返回正确数据易错点不要直接请求 localhost:8080后端还没启动Mock 脚本区域只能写 JS不能直接贴 JSON建议关闭脚本用期望2.后端开发步骤3分层结构必须按这个顺序写entity → 实体类POJO映射数据库表mapper → Mapper Select/Insert/Update/Delete直接写 SQLservice → 业务层接口 impl 实现类加 Servicecontroller → RestController RequestMapping暴露 HTTP 接口关键注解Mapper让 MyBatis 生成代理类替代 XMLServiceSpring 容器管理Autowired自动注入依赖CrossOrigin(origins “*”)解决跨域RequestBody接收前端 JSON 参数新增/修改必须用两个查询接口的区别/userfindAll → 返回 List纯数组/userfindAllJson → 返回 Result{code, msg, data}统一包装前后端联调时前端用 /userfindAllJson通过 res.data.data 取列表。3.前端开发步骤2 4文件位置 src/main/resources/static/Spring Boot 默认静态资源目录核心依赖HTMLVue 生命周期created() / mounted()页面加载时调用 loadData() 拉取数据methods定义 deleteUser()、submit() 等交互逻辑Axios 请求写法JavaScript// 查询GETaxios.get(‘/api/users/userfindAllJson’).then(res { … })// 删除POST 参数拼 URLaxios.post(‘/api/users/deletebyID?id’ id).then(res { … })// 新增/修改POST JSON 体axios.post(‘/api/users/addUser’, this.user).then(res { … })时间格式化HTML{{user.createdAt ? user.createdAt.replace(‘T’, ’ ) : ‘’}}4.前后端联调步骤4切换点 把前端 axios.get 里的 Mock 地址换成后端真实地址表格阶段 前端请求地址Mock 阶段 https://m1.apifoxmock.com/m1/xxx/xxx-default/userfindAll联调阶段/api/users/userfindAllJson
)
