- 个人主页:陶然同学
- 版权:本文由【陶然同学】原创、在CSDN首发、需要转载请联系博主
- 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
- 想寻找共同成长的小伙伴，请点击【Java全栈开发社区】
查询学生
步骤1：设置导航
步骤2：添加路由
步骤3：创建页面
步骤：
步骤1：准备2个变量（pageInfo、studentVo）
步骤2：编写查询condition函数，接收参数num
步骤3：页面加载成功时，查询第一页
步骤4：遍历结果
班级： --请选择-- {{classes.cname}} 姓名： 年龄：—— ID 班级 姓名 年龄 生日 性别 操作 {{student.sid}} {{student.classes == null ? student.cname : student.classes.cname}} {{student.sname}} {{student.age}} {{student.birthday}} {{student.gender == 1 ? '男' : '女'}} 修改 删除
当前第 {{pageInfo.pageNum}}页，共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条, 每页 1 2 3 5 10 条 首页 上一页 {{num}} 下一页 尾页 跳转到 页 import axios from 'axios'export default { data() { return { classesList:[], studentVo: { cid:'' }, pageInfo:{ pageNum:1, pageSize:2 } } }, methods:{ async selectClasses(){ let { data: baseResult } = await axios.get("http://localhost:8888/classes"); this.classesList = baseResult.data }, async conditionStudent(num){ if(num){ this.pageInfo.pageNum = num } var url = `http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`; let {data: baseResult} = await axios.post(url,this.studentVo); this.pageInfo = baseResult.data }, }, mounted(){ //查询所有班级 this.selectClasses(); //查询所有学生 this.conditionStudent(); }}添加学生
步骤1：设置导航
步骤2：添加路由
步骤3：创建页面
步骤：
- 创建数据 班级数组和 学生对象
- 班级数据跟select绑定 table绑定学生对象
- 发送post请求添加学生
ID 班级 --请选择-- {{classes.cname}} 姓名 年龄 生日 性别 男 女
import axios from 'axios'export default { data() { return { classesList:[], student:{} } }, methods:{ async selectClasses(){ let {data:baseResult} = await axios.get(`http://localhost:8888/classes`); this.classesList = baseResult.data }, async addStudent(){ var url = "http://localhost:8888/student"; let { data: baseResult } = await axios.post(url,this.student); if(baseResult.code == 20000){ this.$router.push('/studentList') }else{ alert(baseResult.message) } } }, mounted(){ //查询所有班级 this.classesList = this.selectClasses(); }}修改学生
步骤1：设置导航
步骤2：添加路由
步骤3：创建页面
步骤：
- 先获得路由传参传过来的参数 存储到data数据区域 cid
- 根据cid查询到学生 存储到student table对student进行数据双向关联
- 修改学生信息 发送ajax请求
编号 {{ classes.cid }} 班级名称 班级描述
import axios from 'axios';export default { data() { return { classes:{}, cid:'', }; }, methods:{ async selectClassesById(){ let url = `http://localhost:8888/classes/${this.cid}`; let { data: baseResult } = await axios.get(url); this.classes = baseResult.data }, async editClasses(){ var url = `http://localhost:8888/classes`; let { data: baseResult } = await axios.put(url,this.classes); if(baseResult.code == 20000){ this.$router.push("/classesList"); }else{ alert(baseResult.message); } } }, mounted(){ //获得cid this.cid = this.$route.params.cid; //根据id查询班级信息 this.selectClassesById(); }}删除学生
步骤1：设置导航
步骤2：添加方法
步骤：
- 根据cid发送ajax删除学生
班级： --请选择-- {{classes.cname}} 姓名： 年龄：—— ID 班级 姓名 年龄 生日 性别 操作 {{student.sid}} {{student.classes == null ? student.cname : student.classes.cname}} {{student.sname}} {{student.age}} {{student.birthday}} {{student.gender == 1 ? '男' : '女'}} 修改 删除
当前第 {{pageInfo.pageNum}}页，共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条, 每页 1 2 3 5 10 条 首页 上一页 {{num}} 下一页 尾页 跳转到 页 import axios from 'axios'export default { data() { return { classesList:[], studentVo: { cid:'' }, pageInfo:{ pageNum:1, pageSize:2 } } }, methods:{ async selectClasses(){ let { data: baseResult } = await axios.get("http://localhost:8888/classes"); this.classesList = baseResult.data }, async conditionStudent(num){ if(num){ this.pageInfo.pageNum = num } var url = `http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`; let {data: baseResult} = await axios.post(url,this.studentVo); this.pageInfo = baseResult.data }, async deleteStudent(sid){ if(!confirm("您确定要删除么？")){ return } let {data : baseResult} = await axios.delete(`http://localhost:8888/student/${sid}`) if(baseResult.code == 20000){ this.conditionStudent(1); }else { alert(baseResult.message) } } }, mounted(){ //查询所有班级 this.selectClasses(); //查询所有学生 this.conditionStudent(); }}后端
链接：https://pan.baidu.com/s/1032Wkr58iZfPJ7baJSsqiw
密码：2002
后端部分代码：
package com.czxy.controller;import com.czxy.domain.Student;import com.czxy.service.StudentService;import com.czxy.vo.BaseResult;import com.czxy.vo.StudentVo;import com.github.pagehelper.PageInfo;import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;/** * @Author 刘嘉俊 * @Date 2022/2/21 */@RestController@RequestMapping("/student")@CrossOriginpublic class StudentController { @Resource private StudentService studentService; @PostMapping("/condition/{pageSize}/{pageNum}") public BaseResult condition( @PathVariable("pageSize") Integer pageSize, @PathVariable("pageNum") Integer pageNum, @RequestBody StudentVo studentVo) { // 查询 PageInfo pageInfo = studentService.condition(pageSize,pageNum,studentVo); // 返回结果 return BaseResult.ok("查询成功", pageInfo); } @GetMapping("/{sid}") public BaseResult selectById(@PathVariable("sid") String sid){ Student student = studentService.selectById(sid); return BaseResult.ok("查询成功",student); } @PutMapping public BaseResult update(@RequestBody Student student){ System.out.println(student); try { boolean result = studentService.update(student); if(result){ return BaseResult.ok("更新成功"); }else{ return BaseResult.error("更新失败"); } } catch (Exception e) { e.printStackTrace(); return BaseResult.error(e.getMessage()); } } @DeleteMapping("/{sid}") public BaseResult delete(@PathVariable("sid")String sid){ System.out.println("sid" + sid); try { boolean result = studentService.delete(sid); if(result){ return BaseResult.ok("删除成功"); } return BaseResult.error("删除失败"); } catch (Exception e) { e.printStackTrace(); return BaseResult.error(e.getMessage()); } } @PostMapping public BaseResult addStudent(@RequestBody Student student){ try { boolean result = studentService.addStudent(student); if(result){ return BaseResult.ok("添加成功"); } return BaseResult.error("添加失败"); } catch (Exception e) { e.printStackTrace(); return BaseResult.error(e.getMessage()); } }}源码获取
