备案控制台
开发者社区 开发与运维 文章 正文

Vue项目：学生管理系统

2022-09-22 130
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue项目：学生管理系统

查询学生

步骤1：设置导航

image.png

步骤2：添加路由

image.png

步骤3：创建页面

image.png

  • 步骤：
  • 步骤1：准备2个变量（pageInfo、studentVo）
  • 步骤2：编写查询condition函数，接收参数num
  • 步骤3：页面加载成功时，查询第一页
  • 步骤4：遍历结果
1.<template><div>班级：<selectv-model="studentVo.cid"><optionvalue=""disabled>--请选择--</option><option :value="classes.cid"v-for="(classes,index) in classesList" :key="index">{{classes.cname}}</option></select>姓名：<inputtype="text"v-model="studentVo.studentName">年龄：<inputtype="text"v-model="studentVo.startAge">——<inputtype="text"v-model="studentVo.endAge"><inputtype="button"value="查询"@click="conditionStudent()"><tableborder="1"><tr><td>ID</td><td>班级</td><td>姓名</td><td>年龄</td><td>生日</td><td>性别</td><td>操作</td></tr><trv-for="(student,index) in pageInfo.list" :key="index"><td>{{student.sid}}</td><td>{{student.classes==null?student.cname : student.classes.cname}}</td><td>{{student.sname}}</td><td>{{student.age}}</td><td>{{student.birthday}}</td><td>{{student.gender==1?'男' : '女'}}</td><td><router-link :to="{path:'/studentEdit',query:{sid : student.sid}}">修改</router-link><router-linkto=""@click.native.prevent="deleteStudent(student.sid)">删除</router-link></td></tr></table><!--分页start-->当前第 {{pageInfo.pageNum}}页，共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条,
每页<selectv-model="pageInfo.pageSize"@change="conditionStudent(1)"><optionvalue="1">1</option><optionvalue="2">2</option><optionvalue="3">3</option><optionvalue="5">5</option><optionvalue="10">10</option></select>条<ahref=""v-if="!pageInfo.isFirstPage"@click.prevent="conditionStudent(1)">首页</a><ahref=""v-if="pageInfo.hasPreviousPage"@click.prevent="conditionStudent(pageInfo.pageNum - 1)">上一页</a><ahref=""v-for="(num,index) in pageInfo.pages"@click.prevent="conditionStudent(num)" :key="index">{{num}}</a><ahref=""v-if="pageInfo.hasNextPage"@click.prevent="conditionStudent(pageInfo.pageNum - 1)">下一页</a><ahref=""v-if="!pageInfo.isLastPage"@click.prevent="conditionStudent(pageInfo.pages)">尾页</a>跳转到<inputv-model="pageInfo.pageNum"placeholder="enter跳转"@keyup.enter="conditionStudent()">页<!--分页end--></div></template><script>importaxiosfrom'axios'exportdefault {
data() {
return {
classesList:[],
studentVo: {
cid:''            },
pageInfo:{
pageNum:1,
pageSize:2            }
        }
    },
methods:{
asyncselectClasses(){
let { data: baseResult } =awaitaxios.get("http://localhost:8888/classes");  
this.classesList=baseResult.data        },
asyncconditionStudent(num){
if(num){
this.pageInfo.pageNum=num            }
varurl=`http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`;let {data: baseResult} =awaitaxios.post(url,this.studentVo);
this.pageInfo=baseResult.data        },
    },
mounted(){
//查询所有班级this.selectClasses();
//查询所有学生this.conditionStudent();
    }
}
</script><style></style>


添加学生

步骤1：设置导航


image.png

步骤：

  • 创建数据 班级数组 和 学生对象
  • 班级数据跟select绑定 table绑定学生对象
  • 发送post请求添加学生
<template><div><tableborder="1"><tr><td>ID</td><td><inputtype="text"v-model="student.sid"></td></tr><tr><td>班级</td><td><selectv-model="student.cid"><optionvalue="">--请选择--</option><option :value="classes.cid"v-for="(classes,index) in classesList" :key="index">{{classes.cname}}</option></select></td></tr><tr><td>姓名</td><td><inputtype="text"v-model="student.sname"></td></tr><tr><td>年龄</td><td><inputtype="text"v-model="student.age"></td></tr><tr><td>生日</td><td><inputtype="date"v-model="student.birthday"></td></tr><tr><td>性别</td><td><inputtype="radio"v-model="student.gender"value="1">男<inputtype="radio"v-model="student.gender"value="0">女</td></tr><tr><tdcolspan="2"><inputtype="button"value="添加学生"@click="addStudent()"></td></tr></table></div></template><script>importaxiosfrom'axios'exportdefault {
data() {
return {
classesList:[],
student:{}
    }
  },
methods:{
asyncselectClasses(){
let {data:baseResult} =awaitaxios.get(`http://localhost:8888/classes`);this.classesList=baseResult.data      },
asyncaddStudent(){
varurl="http://localhost:8888/student";
let { data: baseResult } =awaitaxios.post(url,this.student);
if(baseResult.code==20000){
this.$router.push('/studentList')
        }else{
alert(baseResult.message)
        }
      }
  },
mounted(){
//查询所有班级this.classesList=this.selectClasses();
  }
}
</script><style></style>

修改学生

步骤1：设置导航

image.png

步骤：

  • 先获得路由传参传过来的参数 存储到data数据区域 cid
  • 根据cid查询到学生 存储到student table对student进行数据双向关联
  • 修改学生信息 发送ajax请求
<template><div><tableborder="1"><tr><td>编号</td><td>                    {{ classes.cid }}
</td></tr><tr><td>班级名称</td><td><inputtype="text"v-model="classes.cname"></td></tr><tr><td>班级描述</td><td><textareaname=""id=""cols="30"rows="10"v-model="classes.desc"></textarea></td></tr><tr><tdcolspan="2"><inputtype="text"value="修改"@click="editClasses()"></td></tr></table></div></template><script>importaxiosfrom'axios';
exportdefault {
data() {
return {
classes:{},
cid:'',
        };
    },
methods:{
asyncselectClassesById(){
leturl=`http://localhost:8888/classes/${this.cid}`;let { data: baseResult } =awaitaxios.get(url);
this.classes=baseResult.data        },
asynceditClasses(){
varurl=`http://localhost:8888/classes`;let { data: baseResult } =awaitaxios.put(url,this.classes);
if(baseResult.code==20000){
this.$router.push("/classesList");
            }else{
alert(baseResult.message);
            }
        }
    },
mounted(){
//获得cidthis.cid=this.$route.params.cid;
//根据id查询班级信息this.selectClassesById();
    }
}
</script><style></style>

删除学生

步骤1：设置导航

image.png

步骤：

  • 根据cid发送ajax删除学生
<template><div>班级：<selectv-model="studentVo.cid"><optionvalue=""disabled>--请选择--</option><option :value="classes.cid"v-for="(classes,index) in classesList" :key="index">{{classes.cname}}</option></select>姓名：<inputtype="text"v-model="studentVo.studentName">年龄：<inputtype="text"v-model="studentVo.startAge">——<inputtype="text"v-model="studentVo.endAge"><inputtype="button"value="查询"@click="conditionStudent()"><tableborder="1"><tr><td>ID</td><td>班级</td><td>姓名</td><td>年龄</td><td>生日</td><td>性别</td><td>操作</td></tr><trv-for="(student,index) in pageInfo.list" :key="index"><td>{{student.sid}}</td><td>{{student.classes==null?student.cname : student.classes.cname}}</td><td>{{student.sname}}</td><td>{{student.age}}</td><td>{{student.birthday}}</td><td>{{student.gender==1?'男' : '女'}}</td><td><router-link :to="{path:'/studentEdit',query:{sid : student.sid}}">修改</router-link><router-linkto=""@click.native.prevent="deleteStudent(student.sid)">删除</router-link></td></tr></table><!--分页start-->当前第 {{pageInfo.pageNum}}页，共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条,
每页<selectv-model="pageInfo.pageSize"@change="conditionStudent(1)"><optionvalue="1">1</option><optionvalue="2">2</option><optionvalue="3">3</option><optionvalue="5">5</option><optionvalue="10">10</option></select>条<ahref=""v-if="!pageInfo.isFirstPage"@click.prevent="conditionStudent(1)">首页</a><ahref=""v-if="pageInfo.hasPreviousPage"@click.prevent="conditionStudent(pageInfo.pageNum - 1)">上一页</a><ahref=""v-for="(num,index) in pageInfo.pages"@click.prevent="conditionStudent(num)" :key="index">{{num}}</a><ahref=""v-if="pageInfo.hasNextPage"@click.prevent="conditionStudent(pageInfo.pageNum - 1)">下一页</a><ahref=""v-if="!pageInfo.isLastPage"@click.prevent="conditionStudent(pageInfo.pages)">尾页</a>跳转到<inputv-model="pageInfo.pageNum"placeholder="enter跳转"@keyup.enter="conditionStudent()">页<!--分页end--></div></template><script>importaxiosfrom'axios'exportdefault {
data() {
return {
classesList:[],
studentVo: {
cid:''            },
pageInfo:{
pageNum:1,
pageSize:2            }
        }
    },
methods:{
asyncselectClasses(){
let { data: baseResult } =awaitaxios.get("http://localhost:8888/classes");  
this.classesList=baseResult.data        },
asyncconditionStudent(num){
if(num){
this.pageInfo.pageNum=num            }
varurl=`http://localhost:8888/student/condition/${this.pageInfo.pageSize}/${this.pageInfo.pageNum}`;let {data: baseResult} =awaitaxios.post(url,this.studentVo);
this.pageInfo=baseResult.data        },
asyncdeleteStudent(sid){
if(!confirm("您确定要删除么？")){
return            }
let {data : baseResult} =awaitaxios.delete(`http://localhost:8888/student/${sid}`)if(baseResult.code==20000){
this.conditionStudent(1);
            }else {
alert(baseResult.message)
            }
        }
    },
mounted(){
//查询所有班级this.selectClasses();
//查询所有学生this.conditionStudent();
    }
}
</script><style></style>

后端

链接：https://pan.baidu.com/s/1032Wkr58iZfPJ7baJSsqiw 

密码：2002        

后端部分代码：

packagecom.czxy.controller;
importcom.czxy.domain.Student;
importcom.czxy.service.StudentService;
importcom.czxy.vo.BaseResult;
importcom.czxy.vo.StudentVo;
importcom.github.pagehelper.PageInfo;
importorg.springframework.web.bind.annotation.*;
importjavax.annotation.Resource;
/*** @Author 刘嘉俊* @Date 2022/2/21*/@RestController@RequestMapping("/student")
@CrossOriginpublicclassStudentController {
@ResourceprivateStudentServicestudentService;
@PostMapping("/condition/{pageSize}/{pageNum}")
publicBaseResultcondition(
@PathVariable("pageSize") IntegerpageSize,
@PathVariable("pageNum") IntegerpageNum,
@RequestBodyStudentVostudentVo) {
// 查询PageInfo<Student>pageInfo=studentService.condition(pageSize,pageNum,studentVo);
// 返回结果returnBaseResult.ok("查询成功", pageInfo);
    }
@GetMapping("/{sid}")
publicBaseResultselectById(@PathVariable("sid") Stringsid){
Studentstudent=studentService.selectById(sid);
returnBaseResult.ok("查询成功",student);
    }
@PutMappingpublicBaseResultupdate(@RequestBodyStudentstudent){
System.out.println(student);
try {
booleanresult=studentService.update(student);
if(result){
returnBaseResult.ok("更新成功");
            }else{
returnBaseResult.error("更新失败");
            }
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@DeleteMapping("/{sid}")
publicBaseResultdelete(@PathVariable("sid")Stringsid){
System.out.println("sid"+sid);
try {
booleanresult=studentService.delete(sid);
if(result){
returnBaseResult.ok("删除成功");
            }
returnBaseResult.error("删除失败");
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
@PostMappingpublicBaseResultaddStudent(@RequestBodyStudentstudent){
try {
booleanresult=studentService.addStudent(student);
if(result){
returnBaseResult.ok("添加成功");
            }
returnBaseResult.error("添加失败");
        } catch (Exceptione) {
e.printStackTrace();
returnBaseResult.error(e.getMessage());
        }
    }
}

源码获取

image.png

image.png

文章标签：
JavaScript
前端开发
数据安全/隐私保护
存储
关键词：
VUE.js项目
管理系统VUE.js
vue管理系统VUE.js
VUE.js学生管理系统
VUE.js项目学生管理系统
陶然同学
目录
相关文章
爱你三千遍斯塔克
|
2天前
|
JavaScript 前端开发
Vue，如何引入样式文件
Vue，如何引入样式文件
爱你三千遍斯塔克
17 5
爱你三千遍斯塔克
|
2天前
|
JavaScript
Vue如何配置@
Vue如何配置@
爱你三千遍斯塔克
19 3
爱你三千遍斯塔克
|
1天前
|
JavaScript 开发工具 git
大事件项目40---Vue代码里如何引入相对路径图片
大事件项目40---Vue代码里如何引入相对路径图片
爱你三千遍斯塔克
6 1
你都不懂
|
2天前
|
JavaScript
vue滚动到页面底部时加载
vue滚动到页面底部时加载
你都不懂
5 1
蓝色流星86
|
2天前
|
JavaScript 前端开发
一个好看的vue admin模板
这是一个关于Vue管理模板的引用，提到了[PanJiaChen](https://github.com/PanJiaChen/vue-admin-template)在GitHub上的`vue-admin-template`项目。该项目是一个前端管理模板，链接指向了详细的资源。页面中还包含了一张图片，但markdown格式中无法直接显示。简而言之，这是关于一个基于Vue的后台管理界面模板的参考信息。
蓝色流星86
8 0
米诺斯
|
2天前
|
资源调度 JavaScript API
Vue-treeselect：为Vue应用程序提供强大选择器的指南
Vue-treeselect：为Vue应用程序提供强大选择器的指南
米诺斯
6 0
谢妹纸
|
2天前
|
JavaScript
vue知识点
vue知识点
谢妹纸
5 0
爱你三千遍斯塔克
|
2天前
|
JavaScript
Vue生命周期函数
Vue生命周期函数
爱你三千遍斯塔克
9 0
爱你三千遍斯塔克
|
2天前
|
JavaScript
Vue搭配ELEMENT之后，右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后，右侧点击栏点击跳转到空白页解决方法
爱你三千遍斯塔克
5 0
爱你三千遍斯塔克
|
3天前
|
JavaScript 前端开发 API
Vue如何做一个左边栏
Vue如何做一个左边栏
爱你三千遍斯塔克
5 1