-
Vue+ElementUI+Bootstrap+Fetch实现学生信息修改页面，并与后端交互修改数据库信息
前言：本文重点在Vue+ElementUI+Bootstrap+Fetch的前端涉及思路，后端项目我们不做分析，直接运行后端程序。
一、后端:
后端项目地址：https://download.csdn.net/download/m0_53881899/86893079
下载后进入存放 studentmanager.jar 的目录，运行以下命令即可启动后端，无需额外安装、配置步骤：
java -jar .\studentmanager-0.0.1-SNAPSHOT.jar二、前端：
1.功能：
- 采用前后端分离的开发模式，前后端通过JSON格式交换数据。
- 打开页面发送请求，后端根据学号获取该学生信息，打包成JSON数据后发送给前段，前端对数据进行渲染，进行页面展示。
- 选择专业后自动获取该专业下所有班级信息，实现联想功能。
- 可以修改页面信息，点击提交按钮将页面信息打包成JSON数据后发送给后端，后端更新该学生信息。
2.具体设计：
（1）学生信息修改界面：
效果图：
代码及说明：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js">script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <fieldset class="mb-4" id="app"> <legend>基本信息legend> <div class="row gx-2 gy-3"> <div class="col-md-6"> <label for="textboxName" class="form-label">姓名：label> <input type="text" name="" id="textboxName" class="form-control" v-model="student.name"> div> <div class="col-md-6"> <label for="textboxName" class="form-label">学号：label> <input type="text" name="" id="textboxStuNum" class="form-control" v-model="student.studentNo" readonly> div> <div class="col-md-6"> <label for="radioGender">性别：label> <div class="p-2"> <div class="form-check-inline"> <input type="radio" value="男" class="form-check-input" name="radioGender" id="genderMale" v-model="student.gender" > <label class="form-check-label" for="genderMale">男label> div> <div class="form-check-inline"> <input type="radio" value="女" class="form-check-input" name="radioGender" id="genderFemale" v-model="student.gender" > <label class="form-check-label" for="genderFemale">女label> div> div> div> <div class="col-md-6"> <label for="dob-datepicker" class="form-label">出生日期：label> <div> <el-date-picker v-model="student.dob" type="date" placeholder=" 请选择出生日期">el-date-picker> div> div> div> <legend>专业班级legend> <div class="row gx-2 gy-3"> <div class="col-md-6"> <label for="textboxName" class="form-label" >专业：label> <select class="form-select" aria-label="Default select example" @change="Subjectchange" v-model="selectedSubjectId"> <option v-for="(item,index) in subjects" v-bind:value="item.id" >{{item.name}}option> select> div> <div class="col-md-6"> <label for="textboxName" class="form-label">班级：label> <select class="form-select" aria-label="Default select example" v-model="selectedclassId"> <option v-for="(item,index) in classes" v-bind:value="item.id" >{{item.name}}option> select> div> <div class="col-md-6"> <label for="textboxName" class="form-label">电话：label> <input type="text" name="" id="textboxTelephone" class="form-control" v-model="student.telephone"> div> <div class="col-md-6"> <label for="textboxName" class="form-label">Email：label> <input type="text" name="" id="textboxEmail" class="form-control" v-model="student.email"> div> div> <div class="d-flex justify-content-center"> <input type="submit" class="btn btn-primary" @click="submitData" v-on:submit.prevent="handler">input> div> fieldset> <script> var vm = new Vue({ el:'#app', created(){ //getStudent，getSubjects，getStudentClassesBySubject三个方法在页面加载完毕的生命周期函数中进行异步串行调用 this.getStudent()//1.首先获取学生信息，获取学生信息后才能获取所有专业的信息。 .then(function (response){//这里才处理JSON数据 vm.student = response;//给属性student赋值，代表该学生的所有信息 vm.selectedSubjectId = response.studentClass.subject.id;//给属性selectedSubjectId赋值，代表该学生的专业ID vm.selectedclassId = response.studentClass.id;//给属性selectedclassId赋值，代表该学生的班级ID return vm.getSubjects()//2.获取所有专业信息 .then(function (response){ vm.subjects = response;//给属性subjects赋值，代表所有专业信息 return vm.getStudentClassesBySubject()//获取该学生的专业下所有班级的信息，只有获取了该学生信息才能发送这个请求获取对应班级信息，因为该请求URL拼接了vm.selectedSubjectId .then(function (response){ vm.classes = response;//给属性classes赋值，代表该专业下所有班级信息 }); }); }); }, data:{ //当前选中的专业ID selectedSubjectId:"", //当前选中的班级ID selectedclassId:"", //存放当前学生的信息，是一个json格式的对象，使用v-model student:"", //存放所有专业信息 subjects:"", //存放当前选中专业下所有班级信息（专业和班级联动显示） classes:"" }, methods:{ //发送fetch请求获取学号为20141113002的学生信息，但在该方法中不要处理返回的 JSON 数据，只处理响应 getStudent(){ var promise1 = fetch("http://localhost:8080/students/20141113002",{mode:'cors'})//Fetch API 默认不允许发起跨域请求，调用 fetch() 函数时需要添加 mode 配置项并将其值设为'cors' var promise2 = promise1.then(function(response){ return response.json(); }); return promise2;//返回Promise异步操作对象,用于下一步实现promise的异步串行请求 }, //获取所有专业的信息，也是不处理返回的JSON数据，只处理响应 getSubjects(){ var promise1 = fetch("http://localhost:8080/subjects/",{mode:'cors'}) var promise2 = promise1.then(function (response){ return response.json(); }); return promise2;//返回Promise异步操作对象,用于下一步实现promise的异步串行请求 }, //根据selectedSubjectId已选中的专业ID获取该专业下所有班级，不处理JSON数据，只处理响应 getStudentClassesBySubject(){ var promise1 = fetch("http://localhost:8080/student-classes/find-by-subject?subject-id="+vm.selectedSubjectId,{mode:'cors'}) var promise2 = promise1.then(function (response){ return response.json(); }); return promise2;//返回Promise异步操作对象,用于下一步实现promise的异步串行请求 }, //当专业下拉列表框改变时，执行该函数 Subjectchange(){ //因为当我们改变下拉列表框时，v-model双向绑定的selectedSubjectId会改变，所以我们可以直接调用getStudentClassesBySubject向后端发送请求获取改变后的专业对应的所有班级信息 vm.getStudentClassesBySubject() .then(function (response){ //处理JSON数据，并修改classes，classes改变了，班级下拉列表框的信息会重新进行v-for循环渲染，新的classes信息会被渲染到班级下拉列表框 vm.classes = response; }) }, //点击提交按钮时，执行该函数 submitData(){ fetch("http://localhost:8080/students/update",{//发送请求 mode:"cors", method:"POST",//post方式发送 headers: { "Content-Type":"application/json"//发送的数据类型是json }, /*这里我们首先分析：我们需要将页面上修改的学生信息传给后端做更新操作，如何获取页面上这些新的信息呢？ 1.回想一下我们的姓名、学号、性别、出生日期、电话、Email是不是都使用的v-model跟我们student属性中的信息进行绑定了？ 而v-model的特性就是可以双向修改信息，所以只要我们页面上的数据变了，v-model命令就会自动更新student的信息。 2.但是我们的专业、班级不是与student进行的双向绑定，而是与selectedSubjectId和selectedclassId进行的双向绑定， 所以新的专业、班级信息不是在student中，而是在selectedSubjectId和selectedclassId中的。 */ //这里的是传给后端的数据，我们规定的前后端数据传输格式是这样的，所以不能随意修改格式 //将页面上的数据赋值给这个JSON对象 body: JSON.stringify( { "studentNo": vm.student.studentNo, "name": vm.student.name, "telephone": vm.student.telephone, "gender": vm.student.gender, "dob": vm.student.dob, "email": vm.student.email, "studentClassId": vm.selectedclassId } ) }) .then(function (response){ //如果返回200 ok，弹窗提示修改成功 if (response.ok) { alert("修改成功"); } }); } }, }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
（2）学生列表界面：
效果图：
代码（这部分太简单，不作说明）：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .button-trash{ display: inline-block; border: 0; width: 2rem; height: 1rem; outline: 0; background-image:url( "data:image/svg+xml," ); background-repeat: no-repeat; background-size: 1rem 1rem; background-color: transparent; } .button-trash:focus { border: 0; outline: 0; } style> head> <body> <div class="container" id="app"> <h2>学生信息列表h1> <table class="table table-striped"> <thead> <tr> <th scope="col">#th> <th scope="col">学号th> <th scope="col">姓名th> <th scope="col">性别th> <th scope="col">出生日期th> <th scope="col">班级th> <th scope="col">Emailth> tr> thead> <tbody> <tr id="index" v-for="(item,index) in students"> <td>{{index}}td> <td>{{item.studentNo}}td> <td>{{item.name}}td> <td>{{item.gender}}td> <td>{{item.dob|formatDate}}td> <td>{{item.studentClass.name}}td> <td>{{item.email}}td> tr> tbody> table> div> <script text="text/javascript"> var vm = new Vue({ el:'#app', data:{ students:"" }, created(){ fetch("http://localhost:8080/students/?page=0&page-size=10",{mode:'cors'}) .then(function(response){ return response.json(); }) .then(function(students){ vm.students = students.content; console.log(vm.students); }); }, filters:{ formatDate(value){ let newdate = new Date(value).toISOString(); return newdate.substring(0,10); } } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
-
相关阅读:
多线程涉及的其它知识(死锁(等待唤醒机制),内存可见性问题以及定时器)
【从零开始学微服务】04.微服务架构的特点
【ROS入门】ROS的核心概念
UniApp集成微信小程序原生分包
ConcurrentHashMap为什么不允许插入null值？
Command 实用小工具
Qt-FFmpeg开发-音频解码为PCM文件（9）
实战：docker式部署frp内网穿透-2024.7.13(测试成功)
【多服务场景化解决方案】AR虚拟技术助力智能家装
【编程之路】面试必刷TOP101：链表（06-10，Python实现）
- 原文地址：https://blog.csdn.net/m0_53881899/article/details/127675735