学生信息管理系统(4)
完结
这次尝试使用Springboot+Mybatis-plus+Vue做一个前后端分离的学生管理系统，初步看来效果很满意，还有很多功能没有加，注册，登录后端写好了，前端页面没有，感觉不是很需要了，主要是时间不够了，以后有机会可能会完善吧。
部分主要代码：
前端：
1 <template> 2 <div> 3 <div class="all"> 4 <table class="table table-hover"> 5 <caption class="caption1"> 6 <el-input style="width: 150px;" placeholder="请输入学号" v-model="searchStudent.number"></el-input> 7 <el-input style="width: 150px;" placeholder="请输入学生姓名" v-model="searchStudent.name"></el-input> 8 <el-input style="width: 150px;" placeholder="请输入学生年龄" v-model="searchStudent.age"></el-input> 9 <el-input style="width: 150px;" placeholder="请输入学生地址" v-model="searchStudent.place"></el-input> 10 11 <el-button type="success" icon="el-icon-search" circle @click="search"></el-button> 12 <el-button type="warning" icon="el-icon-plus" circle @click="dialogVisible = true"></el-button> 13 <!-- 增加弹窗 --> 14 <el-dialog title="添加信息" :visible="dialogVisible"> 15 <el-form :model="newStudent"> 16 <el-form-item label="学号" :label-width="formLabelWidth"> 17 <el-input v-model="newStudent.number" autocomplete="off"></el-input> 18 </el-form-item> 19 <el-form-item label="姓名" :label-width="formLabelWidth"> 20 <el-input v-model="newStudent.name" autocomplete="off"></el-input> 21 </el-form-item> 22 <el-form-item label="年龄" :label-width="formLabelWidth"> 23 <el-input v-model="newStudent.age" autocomplete="off"></el-input> 24 </el-form-item> 25 <el-form-item label="地址" :label-width="formLabelWidth"> 26 <el-input v-model="newStudent.place" autocomplete="off"></el-input> 27 </el-form-item> 28 </el-form> 29 <div slot="footer" class="dialog-footer"> 30 <el-button @click="dialogVisible = false">取 消</el-button> 31 <el-button type="primary" @click="addStudent">确 定</el-button> 32 </div> 33 </el-dialog> 34 </caption> 35 <thead> 36 <tr> 37 <th>学号</th> 38 <th>姓名</th> 39 <th>年龄</th> 40 <th>地址</th> 41 <th>操作</th> 42 </tr> 43 </thead> 44 <tbody> 45 <tr v-for="student in students" :key="student.id" > 46 <td>{{student.number}}</td> 47 <td>{{student.name}}</td> 48 <td>{{student.age}}</td> 49 <td>{{student.place}}</td> 50 <td> 51 <el-button type="primary" round @click="openDialog(student)">修改</el-button> 52 <!-- 修改弹窗 --> 53 <el-dialog title="修改信息" :visible="isDialogOpen(student)"> 54 <el-form :model="student"> 55 <el-form-item label="学号" :label-width="formLabelWidth"> 56 <el-input v-model="student.number" autocomplete="off"></el-input> 57 </el-form-item> 58 <el-form-item label="姓名" :label-width="formLabelWidth"> 59 <el-input v-model="student.name" autocomplete="off"></el-input> 60 </el-form-item> 61 <el-form-item label="年龄" :label-width="formLabelWidth"> 62 <el-input v-model="student.age" autocomplete="off"></el-input> 63 </el-form-item> 64 <el-form-item label="地址" :label-width="formLabelWidth"> 65 <el-input v-model="student.place" autocomplete="off"></el-input> 66 </el-form-item> 67 </el-form> 68 <div slot="footer" class="dialog-footer"> 69 <el-button @click="closeDialog(student)">取 消</el-button> 70 <el-button type="primary" @click="confirm(student)">确 定</el-button> 71 </div> 72 </el-dialog> 73 74 <el-button type="danger" round @click="openDelete(student)">删除</el-button> 75 </td> 76 </tr> 77 </tbody> 78 </table> 79 </div> 80 <!-- 分页 --> 81 <div class="all"> 82 <el-pagination 83 background 84 @size-change="handleSizeChange" 85 @current-change="handleCurrentChange" 86 :current-page="currentPage" 87 :page-sizes="[5, 10, 20, 50]" 88 :page-size="pageSize" 89 layout="total, sizes, prev, pager, next, jumper" 90 :total="total"> 91 </el-pagination> 92 </div> 93 </div> 94 </template> 95 96 <script> 97 import axios from 'axios' 98 export default { 99 data(){ 100 return{ 101 students:[], 102 newStudent:{ 103 number:"", 104 name:"", 105 age:"", 106 place:"", 107 }, 108 searchStudent:{ 109 number:"", 110 name:"", 111 age:"", 112 place:"", 113 }, 114 formLabelWidth: '120px', 115 openDialogStudent: null, 116 dialogVisible: false, 117 currentPage: 1, // 初始页码 118 pageSize: 5, // 每页的数据 searchList.size 119 total: 0, // 总记录数 120 }; 121 }, 122 methods:{ 123 search(){ 124 axios({ 125 url: "http://localhost:8080/search", 126 method: "POST", 127 data: this.searchStudent, 128 }).then(res=>{ 129 console.log(res.data); 130 this.total = res.data.length; 131 console.log(this.total); 132 this.students = res.data.splice( 133 (this.currentPage - 1) * this.pageSize, 134 this.pageSize 135 ) 136 }); 137 }, 138 addStudent(){ 139 axios({ 140 url: "http://localhost:8080/add", 141 method: "POST", 142 data: this.newStudent, 143 }); 144 this.dialogVisible = false; 145 window.location.reload(); 146 }, 147 update(student){ 148 axios({ 149 url: "http://localhost:8080/update", 150 method: "POST", 151 data: student, 152 }) 153 }, 154 deleteStudent(student){ 155 axios({ 156 url: "http://localhost:8080/delete", 157 method: "POST", 158 data: student, 159 }); 160 window.location.reload(); 161 }, 162 //删除提示 163 openDelete(student) { 164 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { 165 confirmButtonText: '确定', 166 cancelButtonText: '取消', 167 type: 'warning', 168 center: true 169 }).then(() => { 170 this.deleteStudent(student); 171 this.$message({ 172 type: 'success', 173 message: '删除成功!' 174 }); 175 }).catch(() => { 176 this.$message({ 177 type: 'info', 178 message: '已取消删除' 179 }); 180 }); 181 }, 182 //修改确认 183 confirm(student){ 184 this.openDialogStudent = null; 185 this.update(student) 186 }, 187 //打开弹窗 188 openDialog(student) { 189 this.openDialogStudent = student; 190 }, 191 //判断身份 192 isDialogOpen(student) { 193 return this.openDialogStudent === student; 194 }, 195 //关闭弹窗 196 closeDialog(){ 197 this.openDialogStudent = null; 198 }, 199 // 每页大小变更处理函数 200 handleSizeChange: function (size) { 201 this.pageSize = size; 202 console.log("每页大小:" + this.pageSize); //每页下拉显示数据 203 this.search(); 204 }, 205 // 页码变更处理函数 206 handleCurrentChange: function (currentPage) { 207 this.currentPage = currentPage; 208 console.log("当前页码:" + this.currentPage); //点击第几页 209 this.search(); 210 }, 211 }, 212 mounted() { 213 // 初始化加载学生数据 214 this.search(); 215 } 216 }; 217 </script> 218 219 <style> 220 .caption1{ 221 text-align: center; 222 caption-side: top; 223 } 224 .all{ 225 text-align: center; 226 } 227 </style>
后端：
1 package org.example.controller; 2 3 import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; 4 import com.google.gson.Gson; 5 import lombok.val; 6 import org.example.mapper.StudentMapper; 7 import org.example.mapper.UserMapper; 8 import org.example.pojo.Student; 9 import org.example.pojo.User; 10 import org.springframework.beans.factory.annotation.Autowired; 11 import org.springframework.web.bind.annotation.*; 12 13 import java.util.List; 14 15 //响应所有请求 16 @CrossOrigin(origins = { "*" , "null" }) 17 //不显示错误 18 @SuppressWarnings("all") 19 @RestController 20 public class StudentController { 21 22 @Autowired 23 StudentMapper studentMapper; 24 25 private Gson gson = new Gson(); 26 @GetMapping("/select") 27 public String selectList() 28 { 29 List<Student> studentList = studentMapper.selectList(null); 30 return gson.toJson(studentList); 31 } 32 @PostMapping("delete") 33 public void delete(@RequestBody Student student){ 34 studentMapper.deleteById(student); 35 } 36 @PostMapping("update") 37 public void update( @RequestBody Student student){ 38 studentMapper.updateById(student); 39 } 40 @PostMapping("/add") 41 public void add(@RequestBody Student student){ 42 studentMapper.insert(student); 43 } 44 // 根据姓名模糊查询学生 45 @PostMapping("search") 46 public String search(@RequestBody Student student){ 47 // QueryWrapper<Student>studentQueryWrapper = new QueryWrapper<>(); 48 // studentQueryWrapper.like("name",student.getName()); 49 String number = student.getNumber(); 50 String name = student.getName(); 51 String place = student.getPlace(); 52 int age1 = student.getAge(); 53 Integer age = (age1 != 0) ? Integer.valueOf(age1) : null; 54 55 if(number==null && name==null && age==null && place==null) 56 { 57 return selectList(); 58 } 59 List<Student> studentList = studentMapper.searchByKeywords(number,name,age,place); 60 return gson.toJson(studentList); 61 } 62 }
全部代码上传github：applpine/Student_information_system (github.com)
