管理系统类毕设(三)---学生信息查询实现(包括前后端以及分页的实现)

矫情吗；* 2023-01-03 01:44 110阅读 0赞

> 效果如下  
> 今天落枕了 没有写太多 查询目前就实现了学号查询 不过其它都类似  
> 文章最后附代码  
> ![在这里插入图片描述][20210106184444878.gif]

### 学生信息查询实现 ###

*  前端实现
 *   *  数据说明
     *  页面布局
     *   *  面包屑
         *  表单
         *  表格
         *  分页
     *  页面功能
     *   *  页面代码
 *  后端实现
 *   *  SpringBoot
     *  依赖
     *  数据返回格式
     *  实体类
     *  数据查询接口
     *  开启跨域
     *  接口实现
     *  测试

# 前端实现 #

使用了Element组件库 好看还实用  
Element官网 [Element官网][Element]

## 数据说明 ##

data() { 
        return { 
          currentPage: { //分页数据
            page: 1,//当前页
            size: 10,//每页大小
            totalNum:0,//数据总数
            totalPage:0//总页面
          },
          loading: false,//是否加载中
          value: true,//滑块控制
          formInline: { //表单数据
            userId: "",//学号
            userName: "",//姓名
            grade: ""//年级
          },
          tableData: []//查询返回的数据
        };
      },

## 页面布局 ##

用到了Element的面包屑 表格 表单 下拉菜单 开关组件  
Element官网 [Element官网][Element]

页面布局使用了Element的布局容器 [Element布局容器][Element 1]  
![在这里插入图片描述][2021010618024162.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]

### 面包屑 ###

![在这里插入图片描述][20210106180312831.png]  
在学生信息管理这里加了下拉菜单  
放在页面容器的el-header中(el-header见Element官网[Element布局容器][Element 1])  
[Element面包屑][Element 2]  
说明：  
disabled使菜单不可选  
@click.native点击事件  
如果只有@click在Element组件中会失效

<el-header>
            
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <b>学生信息管理</b ><i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="$router.push('/student/new')" >新增</el-dropdown-item >
                    <el-dropdown-item disabled>查询</el-dropdown-item>
                    <el-dropdown-item @click.native="$router.push('/student/change')" >修改</el-dropdown-item >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-breadcrumb-item>
              
              <el-breadcrumb-item><a>查询学生信息</a></el-breadcrumb-item>
            </el-breadcrumb>
          </el-header>

### 表单 ###

数据说明

formInline: {//表单数据
            userId: "",//学号
            userName: "",//姓名
            grade: ""//年级
          }

用到Element的表单组件 [表单组件][Link 1]  
![在这里插入图片描述][20210106181355655.png]  
两个el-input组件 姓名和学号  
一个选择器el-select组件 所在年级  
一个滑块el-switch组件 是否毕业  
一个按钮el-button组件 查询

具体代码如下

<el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="姓名">
                
                <el-input v-model="formInline.userName" placeholder="学生姓名" @keyup.enter.native="onSubmit" ></el-input>
              </el-form-item>
              
              <el-form-item label="学号">
                <el-input v-model="formInline.userId" placeholder="学生学号" @keyup.enter.native="onSubmit" ></el-input>
              </el-form-item>
              <el-form-item label="所在年级">
                
                <el-select v-model="formInline.grade" placeholder="年级" @keyup.enter.native="onSubmit" >
                  <el-option label="高一" value="one"></el-option>
                  <el-option label="高二" value="two"></el-option>
                  <el-option label="高三" value="three"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否毕业">
                
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" >
                </el-switch>
              </el-form-item>
              <el-form-item>
                
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>

### 表格 ###

数据说明

tableData: []//查询返回的数据

Element的表格组件 [表格组件][Link 2]

![在这里插入图片描述][20210106184332954.png]

![在这里插入图片描述][20210106182251921.png]

操作那一块 还有没有写 落枕 后天有考试

代码中有注释 如下

<el-table v-loading="loading" :data="tableData" border style="width: 100%" >
              <el-table-column prop="userId" label="学号" sortable width="150">
              </el-table-column>
              <el-table-column prop="userName" sortable label="姓名" width="120">
              </el-table-column>
              <el-table-column prop="grade" sortable label="年级" width="100">
              </el-table-column>
              <el-table-column prop="classes" sortable label="班级" width="120">
              </el-table-column>
              <el-table-column sortable label="老师" width="120">
                
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>姓名: {
       { scope.row.teacher }}</p>
                    <p>电话: {
       { scope.row.teacherPhone }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{
       { scope.row.teacher }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column sortable label="联系方式" width="250">
                
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>姓名: {
       { scope.row.contact }}</p>
                    <p>电话: {
       { scope.row.contactPhone }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{
       { scope.row.contact }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="address" sortable label="家庭地址" min-width="200" >
              </el-table-column>
              <el-table-column label="操作"> </el-table-column>
            </el-table>

### 分页 ###

数据说明

currentPage: {//分页数据
            page: 1,//当前页
            size: 10,//每页大小
            totalNum:0,//数据总数
            totalPage:0//总页面
          }

![在这里插入图片描述][20210106182732525.png]  
使用了Element的分页组件 [分页组件][Link 3]

代码如下

<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="currentPage.totalNum" >
            </el-pagination>

## 页面功能 ##

主要为分页和查询  
axios发送请求  
本地接口  
axios  
.get(  
`http://localhost:8086/edusys/test?userId=${this.formInline.userId}&currentPage=${this.currentPage.page}&pageSize=${this.currentPage.size}`  
)

如果评论有需求 会搞个云函数 提供练习

### 页面代码 ###

<template>
      <div>
        <el-container>
          <el-header>
            
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <b>学生信息管理</b ><i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="$router.push('/student/new')" >新增</el-dropdown-item >
                    <el-dropdown-item disabled>查询</el-dropdown-item>
                    <el-dropdown-item @click.native="$router.push('/student/change')" >修改</el-dropdown-item >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-breadcrumb-item>
              
              <el-breadcrumb-item><a>查询学生信息</a></el-breadcrumb-item>
            </el-breadcrumb>
          </el-header>
          <el-main>
            
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="姓名">
                
                <el-input v-model="formInline.userName" placeholder="学生姓名" @keyup.enter.native="onSubmit" ></el-input>
              </el-form-item>
              
              <el-form-item label="学号">
                <el-input v-model="formInline.userId" placeholder="学生学号" @keyup.enter.native="onSubmit" ></el-input>
              </el-form-item>
              <el-form-item label="所在年级">
                
                <el-select v-model="formInline.grade" placeholder="年级" @keyup.enter.native="onSubmit" >
                  <el-option label="高一" value="one"></el-option>
                  <el-option label="高二" value="two"></el-option>
                  <el-option label="高三" value="three"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否毕业">
                
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" >
                </el-switch>
              </el-form-item>
              <el-form-item>
                
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
            
            <el-table v-loading="loading" :data="tableData" border style="width: 100%" >
              <el-table-column prop="userId" label="学号" sortable width="150">
              </el-table-column>
              <el-table-column prop="userName" sortable label="姓名" width="120">
              </el-table-column>
              <el-table-column prop="grade" sortable label="年级" width="100">
              </el-table-column>
              <el-table-column prop="classes" sortable label="班级" width="120">
              </el-table-column>
              <el-table-column sortable label="老师" width="120">
                
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>姓名: {
       { scope.row.teacher }}</p>
                    <p>电话: {
       { scope.row.teacherPhone }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{
       { scope.row.teacher }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column sortable label="联系方式" width="250">
                
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <p>姓名: {
       { scope.row.contact }}</p>
                    <p>电话: {
       { scope.row.contactPhone }}</p>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{
       { scope.row.contact }}</el-tag>
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column prop="address" sortable label="家庭地址" min-width="200" >
              </el-table-column>
              <el-table-column label="操作"> </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="currentPage.totalNum" >
            </el-pagination>
          </el-main>
        </el-container>
      </div>
    </template>
    
    <script> import axios from "axios"; export default { name: "Search", data() { return { currentPage: { page: 1, size: 10, totalNum:0, totalPage:0 }, loading: false, value: true, formInline: { userId: "", userName: "", grade: "" }, tableData: [] }; }, methods: { handleSizeChange(val) { this.currentPage.size = val; this.searchStudent(); console.log(`每页 ${ val} 条`); }, handleCurrentChange(val) { this.currentPage.page = val; this.searchStudent(); console.log(`当前页: ${ val}`); }, searchStudent() { this.loading = true; let vm = this; axios .get( `http://localhost:8086/edusys/test?userId=${ this.formInline.userId}&currentPage=${ this.currentPage.page}&pageSize=${ this.currentPage.size}` ) .then(res => { vm.currentPage.totalNum = res.data.data.totalElements; vm.currentPage.totalPage = res.data.data.totalPages; vm.tableData = res.data.data.content; console.log(res.data.data); vm.loading = false; }); }, onSubmit() { this.currentPage.page = 1; this.searchStudent(); } } }; </script>
    
    <style scoped></style>

# 后端实现 #

## SpringBoot ##

目前的进度

![在这里插入图片描述][20210106183253464.png]

## 依赖 ##

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-data-jpa</artifactId>
            </dependency>
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>5.1.48</version>
            </dependency>

## 数据返回格式 ##

![在这里插入图片描述][2021010618360792.png]  
RespBean是自定义的返回数据格式

public class RespBean { 
        /** * 状态码 */
        private Integer status;
    
        /** * 返回信息 */
        private String msg=null;
    
        /** * 返回数据 */
        private Object data;
    
        public static RespBean ok(String msg){ 
            return new RespBean(200,null,null);
        }
    
        public static RespBean ok(String msg,Object obj){ 
            return new RespBean(200,msg,obj);
        }
    
        public static RespBean error(String msg){ 
            return new RespBean(500,null,null);
        }
    
        public static RespBean error(String msg,Object obj){ 
            return new RespBean(500,msg,obj);
        }
    
        private RespBean(){ 
        }
    
        private RespBean(Integer status, String msg, Object data) { 
            this.status = status;
            this.msg = msg;
            this.data = data;
        }
    
        public Integer getStatus() { 
            return status;
        }
    
        public void setStatus(Integer status) { 
            this.status = status;
        }
    
        public String getMsg() { 
            return msg;
        }
    
        public void setMsg(String msg) { 
            this.msg = msg;
        }
    
        public Object getData() { 
            return data;
        }
    
        public void setData(Object obj) { 
            this.data = obj;
        }
    }

## 实体类 ##

学生

记得自动生成getter setter  
toString 的话可以使用 lombok  
或者直接自动生成

@Id
        private String userId;
    
        private String userName;
    
        private String grade;
    
        private String classes;
    
        private String teacher;
    
        private Integer teacherPhone;
    
        private String contact;
    
        private Integer contactPhone;
    
        private String address;

## 数据查询接口 ##

![在这里插入图片描述][20210106183558912.png]

@Repository
    public interface StudentRepository extends JpaRepository<Student,Integer> { 
    
        Page<Student> findAllByUserIdLike(Pageable pageable, String string);
    
    }

## 开启跨域 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]

## 接口实现 ##

@RestController
    public class EduSysController { 
    
        @Autowired
        private StudentRepository studentRepository;
    
    
        @GetMapping("/test")
        public RespBean Systest(@RequestParam("userId") String userId,
                                @RequestParam("currentPage") Integer currentPage,
                                @RequestParam("pageSize") Integer pagesize){ 
            Pageable pageable = PageRequest.of(currentPage-1,pagesize);
            RespBean ok = RespBean.ok("成功",studentRepository.findAllByUserIdLike(pageable,userId+"%"));
            return ok;
        }
    
    }

## 测试 ##

由于是get类型 所以在浏览器就可以测试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

前端：vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 4] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

有问题可以下方留言，看到了会回复哦

[20210106184444878.gif]: /images/20221119/9133a17b4ae6406cb28d78a9638c4577.png
[Element]: https://element.eleme.cn/#/zh-CN
[Element 1]: https://element.eleme.cn/#/zh-CN/component/container
[2021010618024162.png]: /images/20221119/327a9cc138da4bb4b70e861f3771277c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221119/dd0f917234d64100a0caad4f791ed384.png
[20210106180312831.png]: /images/20221119/f89b594cc03143f79ba5c0ad14f743ea.png
[Element 2]: https://element.eleme.cn/#/zh-CN/component/breadcrumb
[Link 1]: https://element.eleme.cn/#/zh-CN/component/form
[20210106181355655.png]: /images/20221119/52f2600e153c4d49900b221085fce79d.png
[Link 2]: https://element.eleme.cn/#/zh-CN/component/table
[20210106184332954.png]: /images/20221119/b32b22c95cba45beb2b3bc183b2de345.png
[20210106182251921.png]: /images/20221119/b310e346cf174c459b98cd149fb786f6.png
[20210106182732525.png]: /images/20221119/8b3959126f434a31b425b58040013dcf.png
[Link 3]: https://element.eleme.cn/#/zh-CN/component/pagination
[20210106183253464.png]: /images/20221119/5d103369e02f48e49f964e2194950b2f.png
[2021010618360792.png]: /images/20221119/8a02860eb25942b18191c99ebe2f552e.png
[20210106183558912.png]: /images/20221119/dfe00dd5800e4e21a91035edca722d07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221119/6510994fbb884080a1ba5e7dea3aab1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: /images/20221119/492470e1a70b4ec088bb4cec6fbd7dd2.png
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: /images/20221119/222171d5a6404cbf8c34bf86b925197c.png
[Link 4]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/28b0798193d34c3d919d13a2e9ce5425.png