当前位置： 首页 > news >正文

SpringBoot新闻项目学习day2-前后端搭建以及数据查询（分页查询）

news 2025/8/20 22:08:04

    • 前端Vue2的搭建与环境配置
    • 条件基本表查询（查询所有管理员）（AdminMapperxml）
    • 后端搭建
    • 编码
      • 条件查询（管理员列表）
      • 添加分页功能
        • 分页查询理论 前端 后端
        • 开始实现（理论）：
          • 后端
        • 更简单的分页实现
          • 前端

前端Vue2的搭建与环境配置

  1. 配置好node.js
  2. 准备HBuilderX进行前端开发
  3. 创键vue2.6项目

image-20240503161446151

4.为了实现页面的跳转,给项目增加路由功能

组件路由是指在前端框架中，将不同的组件与不同的路由路径相对应的机制。通过组件路由，可以根据用户访问的路由路径来动态加载对应的组件，实现页面的切换和内容的展示。

npm install router

使用npm指令下载路由

创建路由文件夹,配置路由地址

image-20240503163419351

在router.js中嵌入已下代码

import Vue from 'vue';
import VueRouter from 'vue-router'; // 正确导入 VueRouter
Vue.use(VueRouter); // 使用 VueRouter// 定义组件路由
const router = new VueRouter({// 配置路由地址routes: [{}]
});
export default router; // 导出路由对象

image-20240503163612882

在main.js中导入路由并创建添加路由对象

//导入路由
import router from './router/router.js'
Vue.use(router);new Vue({// 添加路由对象router,render: h => h(App),
}).$mount('#app')

image-20240503163852823

在App.vue文件中进行代码修改

如下即可

image-20240503164358617

现在就可以进行网页布局了

Vue框架就像跟拼积木一样,把一个一个的vue文件当成组件拼接起来组成一个网页布局

开始设计后端网页（使用ElementUI）

基本展示界面adminList.vue

<template><el-card class="box-card"><!-- 查询条件--><el-row :gutter="20"><el-col :span="6"><el-input placeholder="请输入账号" ></el-input></el-col><el-col :span="6"><el-radio  label="男">男</el-radio><el-radio   label="女">女</el-radio></el-col><el-col :span="6"><el-button type="primary" icon="el-icon-search"  >查询</el-button></el-col></el-row><br/><el-button type="primary" icon="el-icon-plus">新增</el-button><el-table :data="tableData" 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="150"></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></el-card></template><script>export default {data() {return {tableData: []}},methods: {},mounted() {// 像后端发送请求查询管理员列表this.$http.get("adminCtl/admins").then((resp)=>{this.tableData=resp.data.data;});}}
</script><style>
</style>

条件基本表查询（查询所有管理员）（AdminMapperxml）

查询所有管理员信息

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><!--与接口进行绑定-->
<mapper namespace="org.example.dao.AdminDao">
<!--查询所有管理员信息--><resultMap id="adminMap" type="Admin"><id column="id" property="id"/><result column="account"  property="account"/><result column="password"  property="password"/><result column="phone"  property="phone"/><result column="gender"  property="gender"/><result column="type"  property="type"/><result column="oper_time"  property="operTime"/>
<!--        嵌套查询管理员信息--><association property="admin" javaType="Admin"><result column="operator_account" property="account"/></association></resultMap><select id="searchAllAdmins" resultMap="adminMap">SELECTa1.id,a1.account,a1.phone,a1.gender,a1.type,a2.account AS operator_account,a1.oper_timeFROMadmin a1LEFT JOIN admin a2ON a1.adminid = a2.idWHERE a1.type = 2</select></mapper>

结果如下：

image-20250615202821863

后端搭建

参考Java框架Spring学习的后端搭建，本项目就是以上面为基础搭建的后端
在这里插入图片描述

编码

条件查询（管理员列表）

查询所有管理员如上

我们重点在为列表添加查询条件

​ 那么为什么要添加查询条件？

​ 答：为了加快对所需信息的快速检索

案例：比如筛选账号与性别

对应AdminMapper.xml代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><!--与接口进行绑定-->
<mapper namespace="org.example.dao.AdminDao">
<!--查询所有管理员信息--><resultMap id="adminMap" type="Admin"><id column="id" property="id"/><result column="account"  property="account"/><result column="password"  property="password"/><result column="phone"  property="phone"/><result column="gender"  property="gender"/><result column="type"  property="type"/><result column="oper_time"  property="operTime"/>
<!--        嵌套查询管理员信息--><association property="admin" javaType="Admin"><result column="operator_account" property="account"/></association></resultMap><select id="searchAllAdmins" resultMap="adminMap">SELECTa1.id,a1.account,a1.phone,a1.gender,a1.type,a2.account AS operator_account,a1.oper_timeFROMadmin a1LEFT JOIN admin a2ON a1.adminid = a2.idWHERE a1.type = 2<if test="account!=''">AND a1.account = #{account}</if><if test="gender!=''">AND a1.gender = #{gender}</if></select>
</mapper>

admins(){this.$http.post("adminCtl/admins",this.form).then((resp)=>{this.tableData=resp.data.data;});}

image-20250615205721723

添加分页功能

​ 为了限制一次查询过多的数据，为了提高查询效率

分页查询理论 前端 后端

image-20250615214501916

分页的必备条件：

​ 总记录数（总共有多少条）

​ 每页显示的条数

​ 总页数=总记录数/每页显示的条数+1

分页实现：

​ mysql的limit查询

当前页数 n limit (n-1)*每页显示的条数

前端向后端传递哪些数据？

​ 1.当前页数

​ 2.每页显示的条数

后端向前端传递那些数据

​ 1.总条数

​ 2.对应页的数据

开始实现（理论）：
后端

1.在前端form表单里面添加页数pageNumber与pageSize数据

form:{account:"",gender:"",pageNumber:1,pageSize:10
}

2.后端Admin添加上面对应属性

image-20250615215509222

3.在AdminService层添加分页逻辑

//当前页数转换为每页开始的位置
admin.setPageNumber((admin.getPageNumber()-1)*admin.getPageSize());

image-20250615215823387

4.修改select代码

limit #{pageNumber}, #{pageSize}

image-20250615220234180

效果如下

image-20250615220400294

但我们还需要给前端传总条数，这个需要我们在后端自己写。这样就可以配合ElementUI组件实现分页功能，但我们也可以通过更简单的方法来实现分页功能

更简单的分页实现

无需计算分页，具体配置如下

1.pom.xml配置

<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>1.4.5</version></dependency>

一定要注意版本问题

2.application.yml文件配置

#  application.yml文件配置
spring:main:allow-circular-references: true #开始支持spring循环依赖

3.Service类中

 public PageInfo<Admin>searchAllAdmins(Admin admin) {PageHelper.startPage(admin.getPageNumber(), admin.getPageSize()); //1.会自动算出limit后面的开始位置List<Admin> admins =  adminDao.searchAllAdmins(admin); //2.重新发一条sql,查询总条数PageInfo<Admin> pageInfo = new PageInfo<>(admins);return pageInfo;}

image-20250615221441608

我们发现后端框架已经处理好了传送

image-20250615222615517

此时以及显示传过来了，只需要修改前端代码即可

image-20250615222325018

我们发现框架已经提我们算好了分页数据了

前端

由于我们发现数据都在list里面，所以要修改前端获取数据的代码，如下

image-20250615223011537

我们开始添加页脚的页数组件

<div class="block"><span class="demonstration">完整功能</span><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[100, 200, 300, 400]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination></div>

前端完整代码

<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-radio  label="男" v-model="form.gender">男</el-radio><el-radio   label="女" v-model="form.gender">女</el-radio></el-col><el-col :span="6"><el-button type="primary" icon="el-icon-search"  @click="search()">查询</el-button></el-col></el-row><br/><el-button type="primary" icon="el-icon-plus">新增</el-button><el-table :data="tableData" 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="150"></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.pageNumber":page-sizes="[10, 20, 30, 40]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div></el-card></template><script>export default {data() {return {total:0,tableData: [],form:{account:"",gender:"",pageNumber:1,pageSize:10}}},methods: {search(){this.admins();},handleSizeChange(val) { //当改变下拉框页数大小时触发的this.form.pageSize = val;this.admins();},handleCurrentChange(val) {//当改变当前页数时候触发this.form.pageNumber = val;this.admins();},admins(){this.$http.post("adminCtl/admins",this.form).then((resp)=>{this.tableData=resp.data.data.list;this.total = resp.data.data.total;});}},mounted() { //会在网页加载的时候调用里的方法// 像后端发送请求查询管理员列表this.admins();}}
</script><style>
</style>

效果如下：

image-20250615224527841

前端完成工作如下：

​ 1.可以根据总页数和每页显示的条数，计算出总页数

​ 2.通过组件显示分页样式

​ 3.通过组件可以改变当前页数 和 页数大小

http://www.dtcms.com/a/251095.html

相关文章：

  • docker部署MinIO对象存储实践：含控制台功能恢复方案
  • 【八股消消乐】构建微服务架构体系—链路超时控制
  • 每日算法刷题Day32 6.15:leetcode枚举技巧7道题，用时1h10min
  • Linux——libevent库
  • 单例模式的好处
  • 《解码SCSS：悬浮与点击效果的高阶塑造法则》
  • 安卓9.0系统修改定制化____安卓 9.0 解包、打包与系统修改基础及工具介绍 常识篇 四
  • (LeetCode 动态规划（基础版）) 279. 完全平方数 (动态规划dp)
  • 读取第三方的单细胞rds文件进行单细胞分析教程
  • MQTT：构建高效物联网通信的轻量级协议
  • 【多智能体强化学习】构建端到端的自主信息检索代理
  • 【Docker基础】Docker核心概念：命名空间（Namespace）之NET详解
  • XxlJob热点文章定时计算
  • 组合模式Composite Pattern
  • 系统辨识的研究生水平读书报告期末作业参考
  • LangChain面试内容整理-知识点14：工具包（Toolkits）与用法
  • 嵌入式学习笔记 - SH79F6441 堆栈栈顶可以是片上内部RAM(00H-FFH)的任意地址怎么理解
  • Jmeter录制APP脚本
  • Kafka多副本机制
  • React 实现卡牌翻牌游戏
  • 小记:把react项目从web迁移到electron
  • 蒸馏微调DeepSeek-R1-Distill-Qwen-7B
  • Leetcode 刷题记录 16 —— 栈
  • [windows工具]OCR识文找图工具1.2版本使用教程及注意事项
  • [windows工具]OCR多区域识别导出excel工具1.2版本使用教程及注意事项
  • Unity3D仿星露谷物语开发63之NPC移动
  • XR-RokidAR-ADB环境搭建
  • OpenSpeedy：让游戏体验“飞”起来的秘密武器
  • 【Shader学习】完整光照效果
  • Unity基础-范围检测