WEB前端14-Element UI(学生查询表案例/模糊查询/分页查询)

news2025/1/29 13:58:34

Vue2-Element UI

1.可重用组件的开发
  • 可重用组件

我们一般将可重复使用的组件放在components目录之下，以便父组件的灵活调用

<!--可重用组件一般与css密切相关，使用可重用组件的目的是，将相似的组件放在一起，方便使用-->

<template>
    <div class="类名" :class="[类名1， 类名2]">
        //这里我们控制类名使得组件呈现不同的样式
    </div>
</template>

<script>
const options = {
    
};
export default options;
</script>

<style>
	组件的css样式
</style>

使用 Props 传递数据

在 Vue.js 中，props 允许父组件向子组件传递数据，使得组件更加灵活和通用。

props数组中存放的是父组件自定义的属性，通过此属性，父组件可以向子组件传递数据值，子组件通过获取数据，进行属性绑定，以实现对组件样式的变化

<template>
    <div class="类名" :class="[自定义属性1,自定义属性2]">
    </div>
</template>
<script>
const options = {
    props: ["自定义属性1", "自定义属性2"]
};
export default options;
</script>

插槽（Slots）增强组件灵活性

插槽允许父组件将内容插入到子组件的特定位置，增强了组件的复用性和灵活性。

<template>
    <div class="button" :class="[type,size]">
        <slot></slot>
    </div>
</template>
<script>
const options = {
    props: ["type", "size"]
};
export default options;
</script>

事件处理

子组件可以通过 $emit 方法触发事件，向父组件传递数据，实现组件间的通信。

<!-- MyButton.vue -->
<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('button-clicked', '点击了按钮');
    }
  }
}
</script>
  • 使用组件
//1.第一步将子组件导入到父组件中
import MyButton from '../components/MyButton.vue'
//2.设置components属性指出要加载的组件
const options = {
    components: {
        MyButton
    }
};
export default options;
</script>
//3.调用组件：组件名即组件标签，可以通过组件标签调用
<template>
    <div>
		<my-button></my-button>
	</div>
</template>
//4.自定义标签属性(与子组件互联)
<my-button type="primary" size="small">1</my-button>
2.Element UI组件库

安装

npm install element-ui -S

引入组件

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)

<el-button>按钮</el-button>
  • 案例：学生查询表

image-20240801101157083

前端代码：

准备工作

首先，确保你的项目已经集成了 Vue.js 和 Element UI。如果没有，你可以参考官方文档进行安装和配置。

组件结构

我们的页面将包含以下组件：

  • 输入框 (<el-input>)：用于输入学生姓名。
  • 下拉选择框 (<el-select>)：用于选择学生性别。
  • 搜索按钮 (<el-button>)：用于触发搜索功能。
  • 表格 (<el-table>)：用于展示学生列表。
  • 分页器 (<el-pagination>)：用于分页控制。

页面代码

<template>
  <div>
    <!-- 搜索条件部分 -->
    <el-input placeholder="请输入姓名" size="mini" v-model="name" clearable></el-input>
    <el-select placeholder="请选择性别" size="mini" v-model="sex" clearable>
      <el-option label="男" value="男"></el-option>
      <el-option label="女" value="女"></el-option>
      <el-option label="不限" value=""></el-option>
    </el-select>
    <el-button type="primary" round size="mini" @click="sendRequest">搜索</el-button>
    
    <!-- 学生列表部分 -->
    <el-table :data="students">
      <el-table-column prop="id" label="编号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
    </el-table>
    
    <!-- 分页部分 -->
    <el-pagination
      :total="total"
      :page-size="size"
      :current-page="page"
      layout="prev, pager, next, jumper, sizes, ->, total"
      :page-sizes="[5, 10, 15]"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      page: 1, // 当前页码
      size: 5, // 每页记录数
      total: 0, // 总记录数
      students: [], // 学生列表数据
      name: "", // 搜索条件：姓名
      sex: "", // 搜索条件：性别
    };
  },
  mounted() {
    this.sendRequest(); // 页面加载时发送请求，获取学生列表
  },
  methods: {
    async sendRequest() {
      try {
        const response = await axios.get("/management_system/getStudentsByPageServlet", {
          params: {
            name: this.name,
            sex: this.sex,
            page: this.page,
            size: this.size,
          },
        });
        this.students = response.data.list; // 更新学生列表数据
        this.total = response.data.total; // 更新总记录数
      } catch (error) {
        console.error("Error fetching students", error);
      }
    },
    sizeChange(size) {
      this.size = size;
      this.page = 1; // 每次改变每页记录数时，回到第一页
      this.sendRequest(); // 重新请求数据
    },
    currentChange(page) {
      this.page = page;
      this.sendRequest(); // 页码改变时，重新请求数据
    },
  },
};
</script>

<style scoped>
.el-input,
.el-select {
  width: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>

解释与说明

  1. 组件结构：
    • 搜索条件部分：包含一个输入框和一个下拉选择框，用户可以输入姓名或选择性别进行搜索。
    • 学生列表部分：使用 <el-table> 显示学生数据，包括编号、姓名和性别。
    • 分页部分：使用 <el-pagination> 实现分页功能，可以根据用户选择的每页记录数和当前页码展示相应的学生数据。
  2. 数据与方法：
    • data 属性中包含了页面需要的状态数据，如当前页码 (page)、每页记录数 (size)、总记录数 (total)、学生列表数据 (students) 以及搜索条件 (name 和 sex)。
    • mounted 钩子函数在页面加载时调用 sendRequest 方法，获取初始的学生数据。
    • sendRequest 方法使用 Axios 发送 HTTP 请求，根据当前的搜索条件和分页信息从服务器获取学生数据，并更新到页面中。
    • sizeChange 方法响应用户改变每页记录数的操作，重新设置 size 和 page，并调用 sendRequest 方法获取对应的数据。
    • currentChange 方法响应用户改变页码的操作，重新设置 page，并调用 sendRequest 方法获取对应的数据。
  3. 样式：
    • 使用 <style scoped> 标签来定义组件内部的样式，使样式只在当前组件内生效。

后端代码：

StudentDao

//分页查询学生
    public ResultSet selectStudent(int page, int size, String name, String sex) {
        Connection conn = DBUtil.getConnection();
        PreparedStatement ps = null;

        String sql = "";
        //普通分页查询
        if ("".equals(name) && "".equals(sex)) {
            sql = "select  * from student LIMIT ?, ?";
        } else if (!"".equals(name) && "".equals(sex)) {
            //根据名字查询
            sql = "SELECT * FROM student WHERE name LIKE \'%" + name + "%\' LIMIT ?, ?";
        } else if (!"".equals(sex) && "".equals(name)) {
            //根据性别查询
            sql = "SELECT * FROM student WHERE sex = \'" + sex + "\' LIMIT ?, ?";
        } else {
            sql = "SELECT * FROM student WHERE name LIKE \'%" + name + "%\' AND sex = \'" + sex + "\' LIMIT ?, ?";
        }
        try {
            ps = conn.prepareStatement(sql);
            ps.setInt(1, (page - 1) * size);
            ps.setInt(2, size);
            //执行sql语句
            return ps.executeQuery();
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }
    }

StudentService

public List<Student> getAllStudentByPage(int page, int size, String name, String sex) {
        List<Student> students = new ArrayList<>();
        ResultSet rs = userDao.selectStudent(page, size, name, sex);
        while (true) {
            try {
                while (rs.next()) {
                    Student sd = new Student();
                    sd.setId(rs.getInt("id"));
                    sd.setName(rs.getString("name"));
                    sd.setSex(rs.getString("sex"));
                    students.add(sd);
                }
                return students;
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
    }

GetStudentsByPageServlet

package com.tyut.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.tyut.entity.Student;
import com.tyut.service.StudentService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("/getStudentsByPageServlet")
public class GetStudentsByPageServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        response.addHeader("Access-Control-Allow-Origin", "http://localhost:7070");
        request.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();

        int page = Integer.parseInt(request.getParameter("page"));
        int size = Integer.parseInt(request.getParameter("size"));
        String name = request.getParameter("name");
        String sex = request.getParameter("sex");

        StudentService studentService = new StudentService();
        List<Student> allStudent = studentService.getAllStudentByPage(page, size, name, sex);

        // 创建 ObjectMapper 对象
        ObjectMapper objectMapper = new ObjectMapper();

        // 将集合转换为 JSON 字符串
        String jsonString = objectMapper.writeValueAsString(allStudent);

        out.write(jsonString);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1969695.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SYD88xx代码复位不成功和解决办法

SYD88xx代码复位不成功和解决办法

原来的复位代码如下: void ota_manage(void){#ifdef _OTA_if(ota_state){switch(ota_state){case 1 : #if defined(_DEBUG_) || defined(_SYD_RTT_DEBUG_)dbg_printf("start FwErase\r\n");#endifCmdFwErase();#if defined(_DEBUG_) || defined(_SYD_RTT_DEBUG_)db…
阅读更多...
计算机毕业设计选题推荐-社区停车信息管理系统-Java/Python项目实战

计算机毕业设计选题推荐-社区停车信息管理系统-Java/Python项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…
阅读更多...
Linux 内核块设备

Linux 内核块设备

磁盘&#xff08;disk&#xff09;是指利用磁记录技术存储数据的存储器。 磁盘是计算机主要的存储介质&#xff0c;可以存储大量的二进制数据&#xff0c;并且断电后也能保持数据不丢失。早期计算机使用的磁盘是软磁盘&#xff08;Floppy Disk&#xff0c;简称软盘&#xff09;…
阅读更多...
能交易场外个股期权标的有哪些？

能交易场外个股期权标的有哪些？

目前国内的期权市场能交易场外个股期权标的有除去ST类股票外&#xff0c;一般包括沪深3000多只个股以及股票指数&#xff0c;在交易日内且个股开盘的情况下可以报价购买。不过&#xff0c;由于场外个股期权是非标准化合约&#xff0c;具体的可交易股票名单可能会根据需求有所不…
阅读更多...
请转告HPC计算AI计算单位，选对存储事半功倍

请转告HPC计算AI计算单位，选对存储事半功倍

U.2 NVMe全闪混合统一存储GS 5000U是Infortrend产品中一款高性能机型。得益于搭载强劲的第五代IntelXeon处理器&#xff0c;以及支持PCIe 5.0、NVMe-oF、100GbE等多种特点&#xff0c;GS 5000U单台块级性能可达50 GB/s的读、20 GB/s的写&#xff0c;以及1300K的IOPS&#xff1b…
阅读更多...
数据透视表（四）

数据透视表（四）

文章目录 可视化数据条与切片器串联所有的数据透视表插入数据透视图创建组合图数据的结构化展示如何设置标签 可视化数据条与切片器 插入切片器-在切片器中点击不同的筛选项让透视表与之联动 如果某一栏没有数据显示&#xff0c;点击透视表切片器工具下选项中的切片器设置&…
阅读更多...
Java家政自营单商户系统小程序源码

Java家政自营单商户系统小程序源码

​&#x1f3e0;家政新风尚&#xff1a;揭秘自营单商户系统的魅力与便捷&#xff01; &#x1f3e1;开篇&#xff1a;家政服务的新篇章 在快节奏的现代生活中&#xff0c;家政服务成为了许多家庭的必需品。而“家政自营单商户系统”的兴起&#xff0c;更是为这个行业带来了前…
阅读更多...
C ——— 指针笔试题（最终篇）

C ——— 指针笔试题（最终篇）

指针加减整数和解引用的笔试题 boss题&#xff1a; char* c[] { "ENTER","NEW","POINT","FIRST" }; char** cp[] { c 3,c 2,c 1,c }; char*** cpp cp;printf("%s\n", **cpp); printf("%s\n", *-- * cpp …
阅读更多...
Vue项目如何打包失败(图解)

Vue项目如何打包失败(图解)

目录 案例分析 打包失败 package.json 修正文件 打包测试 打包成功 案例分析 打包失败 package.json {"name": "diaryui","version": "0.0.0","private": true,"type": "module","scripts&…
阅读更多...
树组件 el-tree 数据回显

树组件 el-tree 数据回显

树组件 el-tree 数据回显 树型结构的数据回显问题&#xff1a; 这里我只放了核心代码&#xff0c;主要是如何获取选中的树节点的id集合和如何根据树节点的id集合回显数据 大家根据需要自行更改&#xff01; <el-tree ref"authorityRef" node-key"id" …
阅读更多...
springboot“智慧识堂”微信小程序-计算机毕业设计源码26647

springboot“智慧识堂”微信小程序-计算机毕业设计源码26647

摘 要 基于微信的“智慧识堂”是利用微信中的小程序功能来实现&#xff0c;自2011年微信诞生以来&#xff0c;微信的使用越来越普遍&#xff0c;尤其最近几年微信旗下的微信小程序因其不占内存&#xff0c;用完即走的特点吸引越来越多用户&#xff0c;使用微信小程序设计的系统…
阅读更多...
5分钟完成视频会议私有化部署

5分钟完成视频会议私有化部署

在当今快速发展的商业环境中&#xff0c;企业迫切需要一种既高效又安全的视频会议系统以提升工作效率并确保敏感信息的安全。私有化部署会议服务器作为一种高效的数据交换与协作解决方案&#xff0c;正逐渐成为众多企业的首选。然而&#xff0c;对于那些对数据安全性和隐私保护…
阅读更多...
基于python的百度迁徙迁入、迁出数据分析（五）

基于python的百度迁徙迁入、迁出数据分析（五）

终于在第五篇文章我们进入了这个系列的正题&#xff1a;数据分析 这里我选择上海2024年5月1日——5月5日的迁入、迁出数据作为分析的基础&#xff0c;首先选择节假日的数据作为分析的原因呢&#xff0c;主要是节假日人们出行目的比较单一&#xff08;出游、探亲&#xff09;&a…
阅读更多...
RepoAgent：基于大型语言模型的开源框架，主动生成、维护和更新代码文档

RepoAgent：基于大型语言模型的开源框架，主动生成、维护和更新代码文档

人工智能咨询培训老师叶梓 转载标明出处 开发者通常花费约58%的时间在程序理解上&#xff0c;高质量的代码文档在减少这一时间上扮演着重要角色。然而&#xff0c;维护代码文档同样消耗大量的时间、金钱和人力。为了减轻维护代码文档的负担&#xff0c;早期尝试自动文档生成的方…
阅读更多...
【学术会议征稿】2024年环境保护与污染控制国际学术会议 （EPPC 2024）

【学术会议征稿】2024年环境保护与污染控制国际学术会议 （EPPC 2024）

2024年环境保护与污染控制国际学术会议 &#xff08;EPPC 2024&#xff09; 2024 International Conference on Environmental Protection and Pollution Control (EPPC 2024) 2024年环境保护与污染控制国际学术会议将于2024年11月22-24日于中国西安举行。随着全球环境问题日…
阅读更多...
【C语言】C语言期末突击/考研--数据的输入输出

【C语言】C语言期末突击/考研--数据的输入输出

目录 一、printf()输出函数介绍 二、scanf读取标准输入 &#xff08;一&#xff09;scanf函数的原理 &#xff08;二&#xff09;多种数据类型混合输入 三、练习题 今天我们学习printf和scanf读取标准输入。下面我们开始正式的学习吧。 C语言中有很多内置函数&#xff0c;今…
阅读更多...
【项目管理进阶】如何制定进度计划

【项目管理进阶】如何制定进度计划

前言 项目管理进阶系列又又又又更新了… 作为Team leader或者Project Manager&#xff0c;你们最怕什么&#xff1f;&#xff08;文末有投票&#xff0c;踊跃参加O&#xff09;~ 甲说&#xff0c;我具备多年的项目管理经验&#xff0c;秉持“兵来将挡&#xff0c;水来土掩”的…
阅读更多...
开机WiFi没了只能宽带，连声音都有问题，服务里系统还原等一堆错误无法调试！——DHCP服务器常见的故障影响这么大？

开机WiFi没了只能宽带，连声音都有问题，服务里系统还原等一堆错误无法调试！——DHCP服务器常见的故障影响这么大？

错误呈现&#xff1a; 因为问题解决了所以就剩最开始开机直观看到的问题截图&#xff1a; 最崩溃的网络出现问题&#xff1a; 针对网络问题解决结果失败&#xff1a; 问题描述 1&#xff0c;刚开始声音有问题自以为是驱动连接或者声卡硬件有错。 2&#xff0c;后面发现输入…
阅读更多...
DB-GPT_0.5.10安装__部署Qwen2-72b模型（Ubuntu）——报错记录

DB-GPT_0.5.10安装__部署Qwen2-72b模型（Ubuntu）——报错记录

官网地址在这里——源码部署 (yuque.com)&#xff0c;英文地址——Source Code Deployment | DB-GPT (dbgpt.site) 官网给了三种部署方式&#xff1a;源码部署、Docker部署、Docker-Compose部署&#xff0c;这里我选择的部署方式是源码部署&#xff0c;Docker部署的教程我感觉…
阅读更多...
18. Lammps命令学习-4之units

18. Lammps命令学习-4之units

来源&#xff1a; “码农不会写诗”公众号 链接&#xff1a;Lammps命令学习-4之units units style 使用read data或create box命令定义模拟框之前设置用于模拟的单位类型   https://docs.lammps.org/units.html Syntax units styleDescription **设置用于模拟的单位类型&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023