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

Vue2-Element UI

1.可重用组件的开发

• 可重用组件
  

我们一样平常将可重复使用的组件放在components目次之下，以便父组件的机动调用

1. <!--可重用组件一般与css密切相关，使用可重用组件的目的是，将相似的组件放在一起，方便使用-->
3. <template>
4.     <div class="类名" :class="[类名1， 类名2]">
5.         //这里我们控制类名使得组件呈现不同的样式
6.     </div>
7. </template>
9. <script>
10. const options = {
11.    
12. };
13. export default options;
14. </script>
16. <style>
17.         组件的css样式
18. </style>

复制代码

使用 Props 转达数据
在 Vue.js 中，props 允许父组件向子组件转达数据，使得组件更加机动和通用。
props数组中存放的是父组件自界说的属性，通过此属性，父组件可以向子组件转达数据值，子组件通过获取数据，举行属性绑定，以实现对组件样式的变化

1. <template>
2.     <div class="类名" :class="[自定义属性1,自定义属性2]">
3.     </div>
4. </template>
5. <script>
6. const options = {
7.     props: ["自定义属性1", "自定义属性2"]
8. };
9. export default options;
10. </script>

复制代码

插槽（Slots）增强组件机动性
插槽允许父组件将内容插入到子组件的特定位置，增强了组件的复用性和机动性。

1. <template>
2.     <div class="button" :class="[type,size]">
3.         <slot></slot>
4.     </div>
5. </template>
6. <script>
7. const options = {
8.     props: ["type", "size"]
9. };
10. export default options;
11. </script>

复制代码

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

1. <!-- MyButton.vue -->
2. <template>
3.   <button @click="handleClick">点击我</button>
4. </template>
6. <script>
7. export default {
8.   methods: {
9.     handleClick() {
10.       this.$emit('button-clicked', '点击了按钮');
11.     }
12.   }
13. }
14. </script>

复制代码

• 使用组件
  

1. //1.第一步将子组件导入到父组件中
2. import MyButton from '../components/MyButton.vue'
3. //2.设置components属性指出要加载的组件
4. const options = {
5.     components: {
6.         MyButton
7.     }
8. };
9. export default options;
10. </script>
11. //3.调用组件：组件名即组件标签，可以通过组件标签调用
12. <template>
13.     <div>
14.                 <my-button></my-button>
15.         </div>
16. </template>
17. //4.自定义标签属性(与子组件互联)
18. <my-button type="primary" size="small">1</my-button>

复制代码

2.Element UI组件库

安装

1. npm install element-ui -S

复制代码

引入组件

1. import Element from 'element-ui'
2. import 'element-ui/lib/theme-chalk/index.css'
4. Vue.use(Element)

复制代码

1. <el-button>按钮</el-button>

复制代码

• 案例：学生查询表
  

前端代码：
准备工作
起首，确保你的项目已经集成了 Vue.js 和 Element UI。假如没有，你可以参考官方文档举行安装和设置。
组件布局
我们的页面将包含以下组件：

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

页面代码

1. <template>
2.   <div>
3.     <!-- 搜索条件部分 -->
4.     <el-input placeholder="请输入姓名" size="mini" v-model="name" clearable></el-input>
5.     <el-select placeholder="请选择性别" size="mini" v-model="sex" clearable>
6.       <el-option label="男" value="男"></el-option>
7.       <el-option label="女" value="女"></el-option>
8.       <el-option label="不限" value=""></el-option>
9.     </el-select>
10.     <el-button type="primary" round size="mini" @click="sendRequest">搜索</el-button>
11.    
12.     <!-- 学生列表部分 -->
13.     <el-table :data="students">
14.       <el-table-column prop="id" label="编号"></el-table-column>
15.       <el-table-column prop="name" label="姓名"></el-table-column>
16.       <el-table-column prop="sex" label="性别"></el-table-column>
17.     </el-table>
18.    
19.     <!-- 分页部分 -->
20.     <el-pagination
21.       :total="total"
22.       :page-size="size"
23.       :current-page="page"
24.       layout="prev, pager, next, jumper, sizes, ->, total"
25.       :page-sizes="[5, 10, 15]"
26.       @size-change="sizeChange"
27.       @current-change="currentChange"
28.     >
29.     </el-pagination>
30.   </div>
31. </template>
33. <script>
34. import axios from "axios";
36. export default {
37.   data() {
38.     return {
39.       page: 1, // 当前页码
40.       size: 5, // 每页记录数
41.       total: 0, // 总记录数
42.       students: [], // 学生列表数据
43.       name: "", // 搜索条件：姓名
44.       sex: "", // 搜索条件：性别
45.     };
46.   },
47.   mounted() {
48.     this.sendRequest(); // 页面加载时发送请求，获取学生列表
49.   },
50.   methods: {
51.     async sendRequest() {
52.       try {
53.         const response = await axios.get("/management_system/getStudentsByPageServlet", {
54.           params: {
55.             name: this.name,
56.             sex: this.sex,
57.             page: this.page,
58.             size: this.size,
59.           },
60.         });
61.         this.students = response.data.list; // 更新学生列表数据
62.         this.total = response.data.total; // 更新总记录数
63.       } catch (error) {
64.         console.error("Error fetching students", error);
65.       }
66.     },
67.     sizeChange(size) {
68.       this.size = size;
69.       this.page = 1; // 每次改变每页记录数时，回到第一页
70.       this.sendRequest(); // 重新请求数据
71.     },
72.     currentChange(page) {
73.       this.page = page;
74.       this.sendRequest(); // 页码改变时，重新请求数据
75.     },
76.   },
77. };
78. </script>
80. <style scoped>
81. .el-input,
82. .el-select {
83.   width: 200px;
84.   margin-right: 10px;
85.   margin-bottom: 10px;
86. }
87. </style>

复制代码

表明与说明

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

后端代码：
StudentDao

1. //分页查询学生
2.     public ResultSet selectStudent(int page, int size, String name, String sex) {
3.         Connection conn = DBUtil.getConnection();
4.         PreparedStatement ps = null;
6.         String sql = "";
7.         //普通分页查询
8.         if ("".equals(name) && "".equals(sex)) {
9.             sql = "select  * from student LIMIT ?, ?";
10.         } else if (!"".equals(name) && "".equals(sex)) {
11.             //根据名字查询
12.             sql = "SELECT * FROM student WHERE name LIKE \'%" + name + "%\' LIMIT ?, ?";
13.         } else if (!"".equals(sex) && "".equals(name)) {
14.             //根据性别查询
15.             sql = "SELECT * FROM student WHERE sex = \'" + sex + "\' LIMIT ?, ?";
16.         } else {
17.             sql = "SELECT * FROM student WHERE name LIKE \'%" + name + "%\' AND sex = \'" + sex + "\' LIMIT ?, ?";
18.         }
19.         try {
20.             ps = conn.prepareStatement(sql);
21.             ps.setInt(1, (page - 1) * size);
22.             ps.setInt(2, size);
23.             //执行sql语句
24.             return ps.executeQuery();
25.         } catch (SQLException e) {
26.             throw new RuntimeException(e);
27.         }
28.     }

复制代码

StudentService

1. public List<Student> getAllStudentByPage(int page, int size, String name, String sex) {
2.         List<Student> students = new ArrayList<>();
3.         ResultSet rs = userDao.selectStudent(page, size, name, sex);
4.         while (true) {
5.             try {
6.                 while (rs.next()) {
7.                     Student sd = new Student();
8.                     sd.setId(rs.getInt("id"));
9.                     sd.setName(rs.getString("name"));
10.                     sd.setSex(rs.getString("sex"));
11.                     students.add(sd);
12.                 }
13.                 return students;
14.             } catch (SQLException e) {
15.                 throw new RuntimeException(e);
16.             }
17.         }
18.     }

复制代码

GetStudentsByPageServlet

1. package com.tyut.controller;
3. import com.fasterxml.jackson.databind.ObjectMapper;
4. import com.tyut.entity.Student;
5. import com.tyut.service.StudentService;
7. import javax.servlet.*;
8. import javax.servlet.http.*;
9. import javax.servlet.annotation.*;
10. import java.io.IOException;
11. import java.io.PrintWriter;
12. import java.util.List;
14. @WebServlet("/getStudentsByPageServlet")
15. public class GetStudentsByPageServlet extends HttpServlet {
16.     @Override
17.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
18.         response.setContentType("text/html;charset=utf-8");
19.         response.addHeader("Access-Control-Allow-Origin", "http://localhost:7070");
20.         request.setCharacterEncoding("utf-8");
21.         PrintWriter out = response.getWriter();
23.         int page = Integer.parseInt(request.getParameter("page"));
24.         int size = Integer.parseInt(request.getParameter("size"));
25.         String name = request.getParameter("name");
26.         String sex = request.getParameter("sex");
28.         StudentService studentService = new StudentService();
29.         List<Student> allStudent = studentService.getAllStudentByPage(page, size, name, sex);
31.         // 创建 ObjectMapper 对象
32.         ObjectMapper objectMapper = new ObjectMapper();
34.         // 将集合转换为 JSON 字符串
35.         String jsonString = objectMapper.writeValueAsString(allStudent);
37.         out.write(jsonString);
38.     }
40.     @Override
41.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
42.         this.doGet(request, response);
43.     }
44. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。