Vue项目之学生管理系统实例详解
作者：陶然同学。 发布时间：2024-04-28 09:31:57
标签：Vue,项目,学生管理系统
查询学生
步骤1：设置导航
步骤2：添加路由
步骤3：创建页面
步骤：
步骤1：准备2个变量（pageInfo、studentVo）
步骤2：编写查询condition函数，接收参数num
步骤3：页面加载成功时，查询第一页
步骤4：遍历结果
<template>
<div>
班级： <select v-model = "studentVo.cid">
<option value="" disabled>--请选择--</option>
<option :value="classes.cid" v-for = "(classes,index) in classesList" :key = "index">{{classes.cname}}</option>
</select>
姓名：<input type="text" v-model = "studentVo.studentName">
年龄：<input type="text" v-model = "studentVo.startAge">——<input type="text" v-model = "studentVo.endAge">
<input type="button" value = "查询" @click = "conditionStudent()">
<table border="1">
<tr>
<td>ID</td>
<td>班级</td>
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr v-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-link to="" @click.native.prevent = "deleteStudent(student.sid)">删除</router-link>
</td>
</tr>
</table>
<!-- 分页 start -->
当前第 {{pageInfo.pageNum}}页，共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条,
每页 <select v-model = "pageInfo.pageSize" @change = "conditionStudent(1)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>条
<a href="" v-if = "!pageInfo.isFirstPage" @click.prevent = "conditionStudent(1)">首页</a>
<a href="" v-if = "pageInfo.hasPreviousPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">上一页</a>
<a href="" v-for = "(num,index) in pageInfo.pages" @click.prevent = "conditionStudent(num)" :key="index">{{num}}</a>
<a href="" v-if = "pageInfo.hasNextPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">下一页</a>
<a href="" v-if = "!pageInfo.isLastPage" @click.prevent = "conditionStudent(pageInfo.pages)">尾页</a>
跳转到 <input v-model = "pageInfo.pageNum" placeholder="enter跳转" @keyup.enter = "conditionStudent()"> 页
<!-- 分页 end -->
</div>
</template>
<script>
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();
}
}
</script>
<style>
</style>
添加学生
步骤1：设置导航
步骤2：添加路由
步骤3：创建页面
步骤：
创建数据 班级数组 和 学生对象
班级数据跟select绑定 table绑定学生对象
发送post请求添加学生
<template>
<div>
<table border="1">
<tr>
<td>ID</td>
<td>
<input type="text" v-model = "student.sid">
</td>
</tr>
<tr>
<td>班级</td>
<td>
<select v-model = "student.cid">
<option value="">--请选择--</option>
<option :value="classes.cid" v-for = "(classes,index) in classesList" :key="index">{{classes.cname}}</option>
</select>
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" v-model = "student.sname">
</td>
</tr>
<tr>
<td>年龄</td>
<td>
<input type="text" v-model = "student.age">
</td>
</tr>
<tr>
<td>生日</td>
<td>
<input type="date" v-model = "student.birthday">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" v-model = "student.gender" value = "1"> 男
<input type="radio" v-model = "student.gender" value = "0"> 女
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value = "添加学生" @click = "addStudent()">
</td>
</tr>
</table>
</div>
</template>
<script>
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();
}
}
</script>
<style>
</style>
修改学生
步骤1：设置导航
步骤2：添加路由
步骤3：创建页面
步骤：
先获得路由传参传过来的参数 存储到data数据区域 cid
根据cid查询到学生 存储到student table对student进行数据双向关联
修改学生信息 发送ajax请求
<template>
<div>
<table border = "1">
<tr>
<td>编号</td>
<td>
{{ classes.cid }}
</td>
</tr>
<tr>
<td>班级名称</td>
<td>
<input type="text" v-model = "classes.cname">
</td>
</tr>
<tr>
<td>班级描述</td>
<td>
<textarea name="" id="" cols="30" rows="10" v-model = "classes.desc"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="text" value = "修改" @click = "editClasses()">
</td>
</tr>
</table>
</div>
</template>
<script>
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();
}
}
</script>
<style>
</style>
删除学生
步骤1：设置导航
步骤2：添加方法
步骤：
根据cid发送ajax删除学生
<template>
<div>
班级： <select v-model = "studentVo.cid">
<option value="" disabled>--请选择--</option>
<option :value="classes.cid" v-for = "(classes,index) in classesList" :key = "index">{{classes.cname}}</option>
</select>
姓名：<input type="text" v-model = "studentVo.studentName">
年龄：<input type="text" v-model = "studentVo.startAge">——<input type="text" v-model = "studentVo.endAge">
<input type="button" value = "查询" @click = "conditionStudent()">
<table border="1">
<tr>
<td>ID</td>
<td>班级</td>
<td>姓名</td>
<td>年龄</td>
<td>生日</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr v-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-link to="" @click.native.prevent = "deleteStudent(student.sid)">删除</router-link>
</td>
</tr>
</table>
<!-- 分页 start -->
当前第 {{pageInfo.pageNum}}页，共{{pageInfo.pages}}页, 总计数{{pageInfo.total}}条,
每页 <select v-model = "pageInfo.pageSize" @change = "conditionStudent(1)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select>条
<a href="" v-if = "!pageInfo.isFirstPage" @click.prevent = "conditionStudent(1)">首页</a>
<a href="" v-if = "pageInfo.hasPreviousPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">上一页</a>
<a href="" v-for = "(num,index) in pageInfo.pages" @click.prevent = "conditionStudent(num)" :key="index">{{num}}</a>
<a href="" v-if = "pageInfo.hasNextPage" @click.prevent = "conditionStudent(pageInfo.pageNum - 1)">下一页</a>
<a href="" v-if = "!pageInfo.isLastPage" @click.prevent = "conditionStudent(pageInfo.pages)">尾页</a>
跳转到 <input v-model = "pageInfo.pageNum" placeholder="enter跳转" @keyup.enter = "conditionStudent()"> 页
<!-- 分页 end -->
</div>
</template>
<script>
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();
}
}
</script>
<style>
</style>
后端
链接：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<Student> 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());
}
}
}
来源：https://blog.csdn.net/weixin_45481821/article/details/123193534
0
投稿猜你喜欢
python寻找主串中所有指定子串下标该函数可实现显示字符串中指定子串所有下标（首字下标）def subStrIndex(substr,st- 1:php地址 http://127.0.0.6/?c=json2:java 输出的结果是[{"i
- 一、版本对比首先要说的是，Python的版本，目前主要分为两大类：Python 2.x的版本的，被称为Python2：是目前用的最广泛的，比
- 一、取得数据表 i 行 j 列的值 &n
- 模块的相关概念 1. 什么是模块模块就好比是工具包，要想使用这个工具包中的工具(就好比函数)，就需要导入这个模块模块的英文名叫：
- 总结大家都知道，在开发中提供用户登录以及维护用户的登录状态，是一个拥有用户系统的软件应用普遍需要做的事情。像微信这样的一个社交平台，如果做一
- PHP chunk_split() 函数实例在每个字符后分割一次字符串，并在每个分割后添加 "."：<?php $
- APNS 是苹果为IOS设备提供的推送服务，全称是(Apple Push Notification service)。 如果你有接触移动互联
- 索引是以表列为基础的数据库对象。索引中保存着表中排序的索引列，并且纪录了索引列在数据库表中的物理存储位置，实现了表中数据的逻辑排序。通过索引
- 图片优化1、图片大小优化，部分图片使用WebP（需要考虑webp兼容性）在线生成，如智图、又拍云gulp生成，gulp-webp或gulp-
- python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误。你可以使用该功能来调试python程序。异常处理: 本站
- request获取post请求中的json数据def hello(request): data = json.loads(request.b
- PHP crc32() 函数实例输出 crc32() 的结果：<?php $str = crc32("Hello World
- 我们的浏览器访问网站时，默认为发送了一个HTTP的GET请求。在浏览网站时，会经常填写表单，比如填写用户名密码。点击登录后，会跳转到我们的主
- 格式化在逻辑中非常常用。使用格式化函数，要注意写法：fmt.Sprintf(格式化样式, 参数列表…)格式化样式：字符
- 程序需要多进程见共享内存，使用了Manager的dict。最初代码如下：from multiprocessing import Proces
- 是在CSDN论坛看到的一个问题，平常我也没有注意，或者说没有这样用吧。看代码 <body id="ww
- Visio 是一款专门绘制流程示意图的办公软件。该软件能够把复杂信息、系统和流程进行可视化图表处理，从而利于用户进行分析交流和业务决策。鉴于
- 项目：基于Pymysql的专家随机抽取系统引入库函数：>>> import treelib>>> fro
- 小编今天写下关于后台管理员权限的分配自己的思路想法<?php /**reader * 小编的思想比较简单实现的功能
