效果如下
今天落枕了沒有寫太多查詢目前就實作了學號查詢不過其它都類似
文章最后附代碼

學生資訊查詢實作

前端實作
- 資料說明
- 頁面布局
- - 面包屑
  - 表單
  - 表格
  - 分頁
- 頁面功能
- - 頁面代碼
后端實作
- SpringBoot
- 依賴
- 資料回傳格式
- 物體類
- 資料查詢介面
- 開啟跨域
- 介面實作
- 測驗

前端實作

使用了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
在這里插入圖片描述

有問題可以下方留言，看到了會回復哦

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/245719.html

標籤：其他

上一篇：Java之HTTP網路編程（下篇：網頁瀏覽器程式設計）

下一篇：平凡的學習，平凡的我

管理系統類畢設(三)---學生資訊查詢實作(包括前后端以及分頁的實作)

學生資訊查詢實作

前端實作

資料說明

頁面布局

面包屑

表單

表格

分頁

頁面功能

頁面代碼

后端實作

SpringBoot

依賴

資料回傳格式

物體類

資料查詢介面

開啟跨域

介面實作

測驗