前端显示分页详解

news2024/11/16 17:49:51

       我们在浏览页面的时候，是不是经常看到网页经常是以页面的形式给我们展现出来的，我们以淘宝的页面为例（如下图），那这样按照页面呈现有什么好处呢？这篇文章让我们来深入探究了解这其中的奥秘。

 优点：分页可以减少数据库的搜索次数，降低数据库的压力，每次只需要查询该页的数据，不需要向原来一样每次查询都查询数据库里的全部的数据。

前端：

  1.我们在Element中找到对应组件

   2. 找到一个合适的组件，赋值粘贴到HTML中

		<div class="block">
		    <el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
		      :current-page="form.pageNum"
		      :page-sizes="[2, 4, 6, 10]"
		      :page-size="2"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		  </div>
     </el-card>
</template>

 后续操作后端说完再进行介绍

后端：

以前在数据库中，我们经常用limit进行分页

/*
分页；一个显示一部分数据，可以分页显示
      假定有5条数据，每一页想显示2条数据
     
      第一页查询前两条数据  limit 0,2
      第二页查询  limit 2,2
      第三页查询  limit 4,2
      
      在mysql数据库中可以使用limit实现分页功能
      
      需要掌握的条件：
      总共多少页：总条数（可以查出来的）/每页显示的数量 （前端可以计算）
      
      每页显示多少条数据（已知）
      当前页数：默认是第一页（已知）
      
*/

但是今天给大家介绍一个更加简便的方法进行分页

1.在poml.xml中添加相关的依赖

<!-- pagehelper依赖 -->
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper-spring-boot-starter</artifactId>
			<version>1.2.5</version>
		</dependency>

 2.在相关类中添加属性，并生成get、set方法

3..在Service类中添加以下代码：

具体的类以自己的为主，我这里的类是Admin

PageHelper.startPage(admin.getPageNum(),admin.getPageSize());//自动生成limit,添加到sql后面
        List<Admin> adminList = admindao.adminList(admin);//查询数据，拼接limit,还会自动的生成sql,查询总记录数
        PageInfo<Admin> pageInfo = new PageInfo<>(adminList);//把所有分页相关的数据封装到PageInfo对象中
        return pageInfo;

3.利用mybatis进行映射

<select id="adminList" resultType="Admin">
        SELECT * FROM admin WHERE TYPE=1
    </select>

注意：在映射时，会有映射失败的时候。有的属性为nul,这种情况又怎么回事呢？

映射的方法有两种：

  1. resultMap
  2. resultType

 resultMap:

<mapper namespace="com.ffyc.dao.RoleListDao">
    <resultMap id="RoleMap" type="Role">
        <id column="id" property="id"></id>
        <result column="name" property="name"></result>
        <result column="oper_time" property="oper_time"></result>
        <association property="admin" javaType="Admin">
            <result column="account" property="account"></result>
        </association>
    </resultMap>
    <select id="roleList"  parameterType="Role" resultMap="RoleMap">
    SELECT
    r.id,
    r.name,
    a.account,
    r.oper_time
    FROM ROLE r LEFT JOIN admin a ON r.adminid=a.id
    </select>

通过编写resultMap。如下，将数据库字段和实体类字段进行映射。其中，column为数据库字段，property为实体类字段。

resultType:

 <select id="adminList" resultType="Admin">
        SELECT * FROM admin WHERE TYPE=1
    </select>

此时resultType 指向具体的实体类。

映射成功需要满足两个条件

  1. 数据库中的表名要与实体类的对应字段相同+
  2. 如果数据库表名中包含有下划线-，那么实体类的对应字段必须要用驼峰命名，才可以映射成功

 

 在sprigboot要成功进行映射的话，必须要进行的一步：

#mybatis配置  创建SqlsessionFactory
mybatis:
   type-aliases-package: com.ffyc.model
   mapper-locations: classpath:mappers/*Mappers.xml
   configuration: #mybatis settings配置
     map-underscore-to-camel-case: true #自动映射
     cache-enabled: true

 还有一个错误需要大家小心

 在mybatis查询时，SQL语句对的情况下也未必能查到数据，例如上图

在映射的时候，是通过属性类型进行映射，类中的属性与映射的类型不一致时，也无法进行映射

 private Integer password;


public int getPassword() {
        return password;
    }

    public void setPassword(int password) {
        this.password = password;
    }

我们再说前端

//查询管理员列表  

findAdmins(){
                 this.$http.post("adminList",this.form).then((resp)=>{
                         this.adminlist = resp.data.data.list; //resp.commonResult.pageInfo.list;
                         this.total = resp.data.data.total;//把总条数赋分页组件,组件就可以计算总页数...
                 });
             }

下面给大家奉上前端代码

<template>
	<el-card class="box-card">
        <!-- 查询条件-->
		<el-row :gutter="20">
			<el-col :span="6">
				<el-input placeholder="请输入账号" v-model="form.account"></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" icon="el-icon-search" @click="findAdmins()" >查询</el-button>
			</el-col>
		 </el-row>
		 <br/>

		<el-table :data="adminlist" border style="width: 100%">
			<el-table-column prop="account" label="账号" width="100"></el-table-column>
			<el-table-column prop="account" label="操作人"></el-table-column>
			<el-table-column prop="operTime" label="操作时间" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini"  >编辑</el-button>
					<el-button size="mini" type="danger" >删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<div class="block">
		    <el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
		      :current-page="form.pageNum"
		      :page-sizes="[2, 4, 6, 10]"
		      :page-size="2"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		  </div>
     </el-card>
</template>

<script>
	export default {
		data() {
			return {
				adminlist: [],
				total:0,
				form:{ //都是每次向后端发送的值
					account:"",//查询条件 ,
					pageNum:1,//默认是第一页
					pageSize:2//默认每一页显示2条数据
				}
			}
		},
		methods: {
			//当改变下拉框页数大小时触发
             handleSizeChange(val) {
                 this.form.pageSize = val;
				 this.findAdmins();
             },
			 //当改变当前页数时触发
             handleCurrentChange(val) {
                 this.form.pageNum=val;
				 this.findAdmins();
             },
			 //查询管理员列表
			 findAdmins(){
				 this.$http.post("adminList",this.form).then((resp)=>{
					 console.log(resp);
				 	    this.adminlist = resp.data.data.list; //resp.commonResult.pageInfo.list;
				 		this.total = resp.data.data.total;//把总条数赋分页组件,组件就可以计算总页数...
				 });
			 }
		},
		mounted() {
			this.findAdmins();
		}
	}
</script>

<style>
</style>

以上分页是针对一对一查询，但是多对多查询时，又有些特殊的情况，下面让我们来了解多对多查询

多对多查询：

 一个人可以身兼数职，每个职位又有不同的功能，这所以让我们在查询数据库的时候要利用的多表查询

我们先从数据库入手

SELECT 
a.id,
a.account,
a.password,
a.gender,
a.phone,
oa.account,
r.name
FROM
admin a LEFT JOIN admin oa ON a.adminid=oa.id
LEFT JOIN admin_role ar ON a.id=ar.adminid
LEFT JOIN ROLE r ON r.id=ar.roleid
WHERE a.type=1

 

 前端页面：

       在数据库中，我们查出来14条数据，但是在前端分页只有7条数据，我们怎样才能使这14条数据变为7条数据呢？接下来给大家介绍两种方法：

1.直接在数据库进行处理

SELECT 
a.id,
a.account,
a.password,
a.gender,
a.phone,
oa.account oper_account,
GROUP_CONCAT(r.name)
FROM
admin a LEFT JOIN admin oa ON a.adminid=oa.id
LEFT JOIN admin_role ar ON a.id=ar.adminid
LEFT JOIN ROLE r ON r.id=ar.roleid
WHERE a.type=1
GROUP BY
a.id,
a.account,
a.password,
a.gender,
a.phone,
oa.account

 2.在mybatis中自己进行封装

在自己的类中定义一个集合进行封装

 private List<Role> roles;

  进行嵌套查询

<resultMap id="adminMap" type="Admin">
        <id column="id" property="id"></id>
        <result column="account" property="account"></result>
        <result column="gender" property="gender"></result>
        <result column="oper_time" property="operTime"></result>
        <result column="phone" property="phone"></result>
        <association property="admin" javaType="Admin">
            <result column="oper_account" property="account"></result>
        </association>
        <collection property="roles" javaType="list" ofType="Role" column="id" select="findAdminRoles">
        </collection>
    </resultMap>
 <select id="adminList" resultMap="adminMap">
        SELECT
        a.id,
        a.account,
        a.gender,
        a.oper_time,
        a.phone,
        oa.account oper_account
        FROM admin a inner JOIN admin oa ON a.adminid=oa.id
        WHERE a.type=1
        <if test="account!=null &amp;account!=''">
            and a.account=#{account}
        </if>
    </select>
    <select id="findAdminRoles" resultType="Role">
        select r.name from admin_role ar left join role r on ar.roleid=r.id
        where ar.adminid=#{id}
    </select>

在这里给大家在加点小知识：密码加密

在数据库中明码保存，危险性极高，极易发生事故，但是如果我们可以用一种方法使得它变成 

 这样就不易被人破解，它们是怎么来的呢？

 //密码加密  返回32位的字符串 得到一个字符串
 //DigestUtils.md5DigestAsHex("1111".getBytes());

 这里奉上前端代码

<template>
	<el-card class="box-card">
        <!-- 查询条件-->
		<el-row :gutter="20">
			<el-col :span="6">
				<el-input placeholder="请输入账号" v-model="form.account"></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" icon="el-icon-search" @click="findAdmins()" >查询</el-button>
			</el-col>
		 </el-row>
		 <br/>
<el-button type="primary" icon="el-icon-plus"  @click="openAddDialog()" >新增</el-button>
		<el-table :data="adminlist" border style="width: 100%">
			<el-table-column prop="account" label="账号" width="100"></el-table-column>
			<el-table-column prop="gender" label="性别" width="100"></el-table-column>
			<el-table-column prop="phone" label="电话" width="100"></el-table-column>
			<el-table-column prop="roles" label="角色" width="200">
				<template slot-scope="scope">
					<span v-for="role in scope.row.roles">{{role.name}}  </span>
				</template>
			</el-table-column>
			<el-table-column prop="admin.account" label="操作人"></el-table-column>
			<el-table-column prop="operTime" label="操作时间" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini"  >编辑</el-button>
					<el-button size="mini" type="danger" >删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<div class="block">
		    <el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
		      :current-page="form.pageNum"
		      :page-sizes="[2, 4, 6, 10]"
		      :page-size="2"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		  </div>
		  <adminAdd ref="adminAdd"></adminAdd>
     </el-card>
</template>

<script>
	import adminAdd from "./adminAdd.vue";
	export default {
		components:{
			adminAdd
		},
		data() {
			return {
				adminlist: [],
				total:0,
				form:{ //都是每次向后端发送的值
					account:"",//查询条件 ,
					pageNum:1,//默认是第一页
					pageSize:2//默认每一页显示2条数据
				}
			}
		},
		methods: {
			openAddDialog(){
							this.$refs.adminAdd.dialogVisible=true;
						},
			//当改变下拉框页数大小时触发
             handleSizeChange(val) {
                 this.form.pageSize = val;
				 this.findAdmins();
             },
			 //当改变当前页数时触发
             handleCurrentChange(val) {
                 this.form.pageNum=val;
				 this.findAdmins();
             },
			 //查询管理员列表
			 findAdmins(){
				 this.$http.post("admin/adminCtl/adminList",this.form).then((resp)=>{
					 console.log(resp);
				 	    this.adminlist = resp.data.data.list; //resp.commonResult.pageInfo.list;
				 		this.total = resp.data.data.total;//把总条数赋分页组件,组件就可以计算总页数...
				 });
			 }
		},
		mounted() {
			this.findAdmins();
		}
	}
</script>

<style>
</style>

 

//获取当前任的id
        int adminid= JWTUtil.getAdminid(adminToken);
        Admin operAdmin=new Admin();
        operAdmin.setId(adminid);
        admin.setAdmin(operAdmin);
        //密码加密  返回32位的字符串
        //DigestUtils.md5DigestAsHex("1111".getBytes());
        String password=DigestUtils.md5DigestAsHex(admin.getPhone().substring(5).getBytes());//截取手机号的后六位
        admin.setPassword(password);

        //将管理员的信息进行管理
       admindao.insertAdmin(admin);
        //保存管理员的角色之间的关系
        for(int roleid:admin.getRoleIds()){
           admindao.insertAdminRole(admin.getId(),roleid);

        }

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

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

相关文章

泛型自动装箱

泛型自动装箱

目录 前言 泛型 1.泛型的目的 2.泛型存在的意义和注意事项&#xff1a; 3.擦除机制 4.泛型的边界 5.泛型方法&#xff1a; 包装类&#xff1a; 前言 只要知道《》是啥意思&#xff0c;其他了解即可 泛型的上界 通配符简单知道就行 泛型 1.泛型的目的 指定当前的容器&am…
阅读更多...
【JVM】浅析程序计数器与虚拟机栈

【JVM】浅析程序计数器与虚拟机栈

文章目录1. 程序计数器2. 虚拟机栈3. 栈内存溢出1. 程序计数器 Program Counter Register 程序计数器&#xff08;寄存器&#xff09; 程序计数器的作用是什么&#xff1f; 是记录下一条JVM指令的执行地址行号 程序计数器有什么特点&#xff1f; 线程私有的不会存在内存溢出 …
阅读更多...
ADI Blackfin DSP处理器-BF533的开发详解59：DSP控制ADXL345三轴加速度传感器的应用2（含源码）

ADI Blackfin DSP处理器-BF533的开发详解59：DSP控制ADXL345三轴加速度传感器的应用2（含源码）

硬件准备 ADSP-EDU-BF533&#xff1a;BF533开发板 AD-HP530ICE&#xff1a;ADI DSP仿真器 软件准备 Visual DSP软件 硬件链接 MEMS三轴加速度传感器 我做了一个三轴加速度传感器的子卡&#xff0c;插在这个板子上&#xff0c;然后写了一些有意思的应用程序。 硬件实现原理…
阅读更多...
Linux——定制Linux

Linux——定制Linux

Linux启动流程 首先&#xff0c;Linux要通过自检&#xff0c;检查硬件设备有没有故障如果有多块启动盘的话&#xff0c;需要在BIOS选择启动磁盘启动MBR中的bootloader引导程序加载内核文件执行所有进程的父进程、老祖宗systemd欢迎界面 加载内核文件的关键文件 kernel文件&a…
阅读更多...
C#调用Python脚本训练并生成AI模型(以Paddle框架为例)

C#调用Python脚本训练并生成AI模型(以Paddle框架为例)

目录一. IronPython语言移植1.1 IronPython安装1.2 示例代码1.3 运行结果1.4 特点二. C#调用Python文件打包dll2.1 步骤2.2 限制三. C#命令行调用.py文件执行3.1 代码3.3 运行结果3.4 特点四. C#调用Python可执行exe4.1 步骤4.1.1 使用pyinstaller打包python程序4.1.2 在c#中调…
阅读更多...
入门：手动构建镜像

入门：手动构建镜像

前面我们已经了解了Docker镜像的结构&#xff0c;实际上所有常用的应用程序都有对应的镜像&#xff0c;我们只需要下载这些镜像然后就可以使用了&#xff0c;而不需要自己去手动安装&#xff0c;顶多需要进行一些特别的配置。当然要是遇到某些冷门的应用&#xff0c;可能没有提…
阅读更多...
【细胞分割】中值滤波+分水岭法细胞计数【含Matlab源码 640期】

【细胞分割】中值滤波+分水岭法细胞计数【含Matlab源码 640期】

⛄一、图像分割简介 理论知识参考&#xff1a;【基础教程】基于matlab图像处理图像分割【含Matlab源码 191期】 ⛄二、部分源代码 clear; close all; %------------------ %程序中定义图像变量说明 %Image->原图变量; %Image_BW->二值化图象; %Image_BW_medfilt->中…
阅读更多...
【实时数仓】DWM层跳出明细计算之需求分析、读取数据、通过Flink的CEP完成跳出判断、写回kafka、测试

【实时数仓】DWM层跳出明细计算之需求分析、读取数据、通过Flink的CEP完成跳出判断、写回kafka、测试

文章目录一 DWM层-跳出明细计算1 需求分析与思路&#xff08;1&#xff09;什么是跳出&#xff08;2&#xff09;计算跳出行为的思路&#xff08;3&#xff09;实现思路2 读取数据&#xff08;1&#xff09;代码编写&#xff08;2&#xff09;测试3 通过Flink的CEP完成跳出判断…
阅读更多...
【MATLAB100个实用小技巧】——数值分析(85-100)

【MATLAB100个实用小技巧】——数值分析(85-100)

文章目录前言系列文章85.86. 三次样条插值法87. NEWTON 插值88. hermite 插值89. newton 形式的 hermite 插值90. 平方根法91. gauss 消去法92. 三角分解法93. jacobi 迭代法94. gauss 迭代法95. sor 迭代法96. 最速下降法97. 共额梯度法98. newton 迭代法99. broyden 迭代法10…
阅读更多...
前端媒体查询@media示例详解和calc()函数的使用

前端媒体查询@media示例详解和calc()函数的使用

媒体查询media media 可以针对不同的屏幕尺寸设置不同的样式&#xff0c;特别是如果需要设置设计响应式的页面&#xff0c;media 是非常有用的。当重置浏览器大小的过程中&#xff0c;页面也会根据浏览器的宽度和高度重新渲染页面。 eg&#xff1a;如果文档宽度小于 500 像素…
阅读更多...
pytorch 自编码器实现图像的降噪

pytorch 自编码器实现图像的降噪

自编码器 自动编码器是一种无监督的深度学习算法&#xff0c;它学习输入数据的编码表示&#xff0c;然后重新构造与输出相同的输入。它由编码器和解码器两个网络组成。编码器将高维输入压缩成低维潜在(也称为潜在代码或编码空间) &#xff0c;以从中提取最相关的信息&#xff…
阅读更多...
SpringCloud之Hystrix

SpringCloud之Hystrix

复杂分布式体系结构中的应用程序有数十个依赖关系&#xff0c;每个依赖关系在某些时候将不可避免失败&#xff01; 服务雪崩 多个微服务之间调用的时候&#xff0c;假设微服务A调用微服务B和微服务C&#xff0c;微服务B和微服务C又调用其他的微服务&#xff0c;这就是所谓的“…
阅读更多...
HttpRunner3.x 安装与使用

HttpRunner3.x 安装与使用

HttpRunner3.x 安装与使用HttpRunner3.x 安装与使用安装使用运行脚手架项目方式一&#xff1a;录制生成用例步骤1&#xff1a;导出har文件步骤2&#xff1a;转化成测试用例文件har2casehmake步骤3&#xff1a;执行测试用例方式二&#xff1a;手工编写测试用例HttpRunner3.x 安装…
阅读更多...
Jenkins自动部署springboot的Docker镜像，解决Status [1]问题

Jenkins自动部署springboot的Docker镜像，解决Status [1]问题

Jenkins凡是要指定路径的命令&#xff0c;一定要写绝对路径&#xff0c;不能写相对路径&#xff01;不要以为配置了Remote directory&#xff0c;那么命令就会在Remote directory下执行&#xff01;这种想法是错误的&#xff01;&#xff01;&#xff01; 《jenkins自动化发布到…
阅读更多...
机器学习实战教程（五）：朴素贝叶斯实战篇

机器学习实战教程（五）：朴素贝叶斯实战篇

一、前言 上篇文章机器学习实战教程&#xff08;四&#xff09;&#xff1a;朴素贝叶斯基础篇_M_Q_T的博客-CSDN博客讲解了朴素贝叶斯的基础知识。本篇文章将在此基础上进行扩展&#xff0c;你将看到以下内容&#xff1a; 拉普拉斯平滑垃圾邮件过滤(Python3)新浪新闻分类(skle…
阅读更多...
毕业设计 - 基于Java的敬老院管理系统设计与实现【源码+论文】

毕业设计 - 基于Java的敬老院管理系统设计与实现【源码+论文】

文章目录前言一、项目设计1. 模块设计系统的主要功能性需求2. 实现效果二、部分源码项目源码前言 今天学长向大家分享一个 java web项目: 基于Java的敬老院管理系统设计与实现 一、项目设计 1. 模块设计 站在护工角度来看&#xff0c;他们迫切希望&#xff0c;在运用该系统…
阅读更多...
【Flink】Flink Starting Offset 启动消费位置 指定时间消费

【Flink】Flink Starting Offset 启动消费位置 指定时间消费

文章目录 1.概述2.测试3.源码1.概述 首先参考文章：【Flink】Flink 1.14.0 全新的 Kafka Connector Kafka Source 能够通过指定 OffsetsInitializer来消费从不同偏移量开始的消息。内置的初始值设定项包括： KafkaSource.builder()// Start from committed offset of the co…
阅读更多...
【YOLOv7-环境搭建③】PyCharm安装和环境、解释器配置

【YOLOv7-环境搭建③】PyCharm安装和环境、解释器配置

下载链接&#xff1a; 来源&#xff1a;&#xff08;博主&#xff09;唐三. 链接:https://pan.baidu.com/s/1y6s_EScOqvraFcx7iPSy1g 提取码:m1oa 安装&#xff1a; 以管理员身份打开安装完成后&#xff0c;打开软件到达以下界面&#xff0c;框框全选到达以下界面&#xf…
阅读更多...
【指纹识别】指纹识别匹配门禁系统【含GUI Matlab源码 587期】

【指纹识别】指纹识别匹配门禁系统【含GUI Matlab源码 587期】

⛄一、指纹识别简介 1 指纹识别的引入和原理 1.1 指纹的基本知识 指纹&#xff0c;由于其具有终身不变性、唯一性和方便性&#xff0c;已几乎成为生物特征识别的代名词。指纹是指人的手指末端正面皮肤上凸凹不平产生的纹线。纹线有规律的排列形成不同的纹型。纹线的起点、终点…
阅读更多...
kotlin基础学习笔记第九章——泛型

kotlin基础学习笔记第九章——泛型

实化类型参数允许你在运行时的内联函数中引用作为类型实参的具体类型&#xff08;对普通的类和函数来说&#xff0c;这样行不通&#xff0c;因为类型实参在运行时会被擦除&#xff09;。 声明点变型可以说明一个带类型参数的泛型类型&#xff0c;是否是另一个泛型类型的子类型或…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023