Vue项目之学生管理系统实例详解

查询学生

步骤1:设置导航

Vue项目之学生管理系统实例详解_第1张图片

 步骤2:添加路由

Vue项目之学生管理系统实例详解_第2张图片

步骤3:创建页面

Vue项目之学生管理系统实例详解_第3张图片

步骤:

  • 步骤1:准备2个变量(pageInfo、studentVo)
  • 步骤2:编写查询condition函数,接收参数num
  • 步骤3:页面加载成功时,查询第一页
  • 步骤4:遍历结果


添加学生

步骤1:设置导航

步骤2:添加路由

步骤3:创建页面

Vue项目之学生管理系统实例详解_第4张图片

步骤:

  • 创建数据 班级数组 和 学生对象
  • 班级数据跟select绑定 table绑定学生对象
  • 发送post请求添加学生


修改学生

步骤1:设置导航

步骤2:添加路由

  步骤3:创建页面

Vue项目之学生管理系统实例详解_第5张图片

步骤:

  • 先获得路由传参传过来的参数 存储到data数据区域 cid
  • 根据cid查询到学生 存储到student table对student进行数据双向关联
  • 修改学生信息 发送ajax请求


删除学生

步骤1:设置导航

步骤2:添加方法

Vue项目之学生管理系统实例详解_第6张图片

步骤:

  • 根据cid发送ajax删除学生


后端

链接:https://pan.baidu.com/s/1GlS7hxzuwttHAp8bh1fbKQ

密码:hvac     

后端部分代码:

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")
@CrossOrigin
public 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());
        }
    }
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!   

你可能感兴趣的:(Vue项目之学生管理系统实例详解)