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

其他 2021-01-12 09:55:34 阅读次数: 0

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

学生信息查询实现

前端实现

使用了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布局容器
在这里插入图片描述

在这里插入图片描述

面包屑

在这里插入图片描述
在学生信息管理这里加了下拉菜单
放在页面容器的el-header中(el-header见Element官网Element布局容器)
Element面包屑
说明：
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的表单组件 表单组件
在这里插入图片描述
两个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的表格组件 表格组件

在这里插入图片描述

在这里插入图片描述

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

代码中有注释 如下

		<!--       表格 数据展示-->
        <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//总页面
      }

在这里插入图片描述
使用了Element的分页组件 分页组件

代码如下

<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

目前的进度

在这里插入图片描述

依赖

		<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是自定义的返回数据格式

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;

数据查询接口

在这里插入图片描述

@Repository
public interface StudentRepository extends JpaRepository<Student,Integer> {
    
    

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

}

开启跨域

在这里插入图片描述

接口实现

@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：推荐不温卜火 一定要看哦
一些插件的使用等

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

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

猜你喜欢

转载自blog.csdn.net/qq_42027681/article/details/112287522
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022