前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >管理系统类毕设(三)---学生信息查询实现(包括前后端以及分页的实现)

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

作者头像
代码哈士奇
发布于 2021-01-26 15:33:48
9970
发布于 2021-01-26 15:33:48
举报
文章被收录于专栏：dmhsq_csdn_blogdmhsq_csdn_blog

效果如下 今天落枕了 没有写太多 查询目前就实现了学号查询 不过其它都类似 文章最后附代码

在这里插入图片描述
在这里插入图片描述

学生信息查询实现

前端实现

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

数据说明

代码语言：javascript
复制
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布局容器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

面包屑

在这里插入图片描述
在这里插入图片描述

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

代码语言：javascript
复制
<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>

表单

数据说明

代码语言：javascript
复制
formInline: {//表单数据
        userId: "",//学号
        userName: "",//姓名
        grade: ""//年级
      }

用到Element的表单组件 表单组件

在这里插入图片描述
在这里插入图片描述

两个el-input组件 姓名和学号 一个选择器el-select组件 所在年级 一个滑块el-switch组件 是否毕业 一个按钮el-button组件 查询

具体代码如下

代码语言：javascript
复制
		<!--        表单-->
        <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>

表格

数据说明

代码语言：javascript
复制
tableData: []//查询返回的数据

Element的表格组件 表格组件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

代码中有注释 如下

代码语言：javascript
复制
		<!--       表格 数据展示-->
        <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>

分页

数据说明

代码语言：javascript
复制
currentPage: {//分页数据
        page: 1,//当前页
        size: 10,//每页大小
        totalNum:0,//数据总数
        totalPage:0//总页面
      }
在这里插入图片描述
在这里插入图片描述

使用了Element的分页组件 分页组件

代码如下

代码语言：javascript
复制
<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=

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

页面代码

代码语言：javascript
复制
<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

目前的进度

在这里插入图片描述
在这里插入图片描述

依赖

代码语言：javascript
复制
		<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>

数据返回格式

在这里插入图片描述
在这里插入图片描述

RespBean是自定义的返回数据格式

代码语言：javascript
复制
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 或者直接自动生成

代码语言：javascript
复制
	@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;

数据查询接口

在这里插入图片描述
在这里插入图片描述
代码语言：javascript
复制
@Repository
public interface StudentRepository extends JpaRepository<Student,Integer> {

    Page<Student> findAllByUserIdLike(Pageable pageable, String string);

}

开启跨域

在这里插入图片描述
在这里插入图片描述

接口实现

代码语言：javascript
复制
@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类型 所以在浏览器就可以测试

在这里插入图片描述
在这里插入图片描述

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

未经本人允许，禁止转载

在这里插入图片描述
在这里插入图片描述

后续会推出

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

大学之道亦在自身，努力学习，热血青春

本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-01-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
容器
spring
javascript
node.js
vue.js

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ，欢迎热爱写作的你一起参与！

容器
spring
javascript
node.js
vue.js
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 学生信息查询实现
  • 前端实现
    • 数据说明
      • 页面布局
        • 面包屑
        • 表单
        • 表格
        • 分页
      • 页面功能
        • 页面代码
    • 后端实现
      • SpringBoot
        • 依赖
          • 数据返回格式
            • 实体类
              • 数据查询接口
                • 开启跨域
                  • 接口实现
                    • 测试
                    相关产品与服务
                    容器服务
                    腾讯云容器服务（Tencent Kubernetes Engine, TKE）基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务，覆盖 Serverless、边缘计算、分布式云等多种业务部署场景，业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者，主导开源项目Crane，全面助力客户实现资源优化、成本控制。
                    产品介绍产品文档
                    精选特惠 用云无忧
                    领券

                    腾讯云开发者

                    扫码关注腾讯云开发者

                    扫码关注腾讯云开发者

                    领取腾讯云代金券

                    热门产品

                    热门推荐

                    更多推荐

                    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

                    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

                    腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

                    Copyright © 2013 - 2024 Tencent Cloud.

                    All Rights Reserved. 腾讯云 版权所有

                    登录 后参与评论