学生信息管理系统(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 }