企业培训笔记：宠物信息管理--实现宠物信息分页查询

文章目录

• 项目概述
• [一，Element Plus UI 组件](#一，Element Plus UI 组件)
• • （一）官方网站
  • [（二）Vue项目中配置Element Plus](#（二）Vue项目中配置Element Plus)
• 二，分页查询
• • （一）pom.xml添加分页插件依赖
  • （二）创建Pet实体类
  • （三）创建PetMapper接口
  • （四）创建PetMapper.xml文件
  • （五）创建PetService接口
  • （六）创建PetServiceImpl实现类
  • （七）创建PetController控制器
  • （八）完善PetManager.vue组件
  • （九）运行结果示意图

---

项目概述

基于SpringBoot+MyBatis+Vue3+Element Plus UI的前后端分离项目，实现对后台数据库中的宠物信息，在Vue前端页面可视化的进行数据呈现、删除、修改与添加。

一，Element Plus UI 组件

（一）官方网站

• 官方网址：https://cn.element-plus.org/zh-CN/。
• 可以利用网站中的资源进行学习，有使用指南、大量案例源码。
  

（二）Vue项目中配置Element Plus

1，项目中安装element plus，在命令行中输入并运行：npm install element-plus --save。

2，在main.js文件中引入Elementplus。

import { createApp } from 'vue'
import App from './App.vue'
// 导入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

3，右击【views】------选择【New】------单击【Vue Component】，创建PetManger组件。

4，输入【PetManger】------单击回车键创建。

5，编写PetManger.vue文件的代码。

<template>
  <h2>宠物管理</h2>
</template>

<script setup>

</script>

<style scoped>

</style>

6，在index.js文件中配置PetManager路由信息。

7，单击运行按钮。

8，直接单击：http://localhost:8080/#/PetManager，出现下图所示界面，即可。

二，分页查询

（一）pom.xml添加分页插件依赖

1，打开pom.xml文件，将下面的代码粘贴到文件中。

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

2，添加完依赖，刷新一下。

（二）创建Pet实体类

package net.army.entity;

import lombok.Data;

/**
 * 功能：宠物实体类
 * 日期：2025年07月03日
 * 作者：梁辰兴
 */
@Data
public class Pet {
    private Integer id;
    private String name;
    private Integer age;
    private String color;
}

（三）创建PetMapper接口

package net.army.mapper;
import net.army.entity.Pet;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

/**
 * 功能：宠物映射器接口
 * 日期：2025年07月03日
 * 作者：梁辰兴
 */
@Mapper
public interface PetMapper {
    // 实现宠物信息分页查询
    public List<Pet> queryPetListByPage();
}

（四）创建PetMapper.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="net.army.mapper.PetMapper">
    <!--实现宠物信息分页查询-->
    <select id="queryPetListByPage" resultType="net.army.entity.Pet">
        select * from pet
    </select>
</mapper>

（五）创建PetService接口

package net.army.service;

import java.util.Map;

/**
 * 功能：宠物服务接口
 * 日期：2025年07月03日
 * 作者：梁辰兴
 */
public interface PetService {
    /*实现宠物信息分页查询
      返回值: 包含两部分 1 List集合数据  2  数据库总记录数
      参数：pageNum 当前第几页   pageSize  每页数据量
    */
    public Map<String,Object> queryPetListService(Integer pageNum, Integer pageSize);
}

（六）创建PetServiceImpl实现类

package net.army.service.impl;

import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import net.army.entity.Pet;
import net.army.mapper.PetMapper;
import net.army.service.PetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 功能：宠物服务实现类
 * 日期：2025年07月03日
 * 作者：梁辰兴
 */
@Service
public class PetServiceImpl implements PetService {
    @Autowired
    private PetMapper petMapper;
    @Override
    public Map<String,Object> queryPetListService(Integer pageNum, Integer pageSize){
        // 进行数据查询前，指定分页参数
        Page<Object> page = PageHelper.startPage(pageNum, pageSize);
        List<Pet> pets = petMapper.queryPetListByPage();

        // 获取分页信息
        Map<String, Object> result = new HashMap<>();
        // 将响应数据封装到Map中
        result.put("pets", pets);
        result.put("total", page.getTotal());
        return result;
    }
}

（七）创建PetController控制器

package net.army.controller;

import net.army.service.PetService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

/**
 * 功能：宠物控制器
 * 日期：2025年07月03日
 * 作者：梁辰兴
 */
@RestController
public class PetController {
    @Autowired
    private PetService petService;
    @RequestMapping("/queryPetList")
    @CrossOrigin
    public Map<String,Object> queryPetList(
            @RequestParam(defaultValue = "1") Integer pageNum,
            @RequestParam(defaultValue = "3") Integer pageSize){
        return petService.queryPetListService(pageNum,pageSize);
    }
}

（八）完善PetManager.vue组件

<template>
  <h2>宠物管理</h2>
  <!-- 宠物列表组件
   :data 动态绑定数据，绑定表格需要显示的数据集合
   -->
  <el-table :data="petList" stripe style="width: 100%">
    <el-table-column prop="id" label="编号"/>
    <!--
      el-table-column 表格中的一列
      prop 循环遍历获得的对象的属性名字，用来显示对象的那个属性值
      label 表头
      -->
    <el-table-column prop="pname" label="名称"/>
    <el-table-column prop="color" label="颜色"/>
    <el-table-column prop="age" label="年龄"/>
  </el-table>

  <!-- 添加分页控件 -->
  <el-pagination
      size="small"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="3"
      class="mt-4"
      @change="changePage"
  />
</template>

<script setup>

import axios from "axios";
import {onMounted, ref} from "vue";

//声明变量保存查询到的宠物集合
const petList=ref([]);
//声明变量保存总记录数
const total=ref(0);

/*定义函数向后台发送请求获得分页显示数据*/
function queryPetList(pageNum){
  axios.get("http://localhost:8081/queryPetList?pageNum="+pageNum)
      .then((response)=>{
        petList.value=response.data.pets;
        total.value=response.data.total;
      })
      .catch((error)=>{
        console.log(error);
      });
}
//页面加载调用queryPetList函数
onMounted(function(){
  //调用分页查询函数
  queryPetList(1);
})
//定义页码发生变化的时候的回调函数
function changePage(pageNum){
  console.log(pageNum)
  queryPetList(pageNum);
}
</script>

<style scoped>

</style>

（九）运行结果示意图

1. 运行Vue工程。
   

2. 运行SpringBoot项目。
   

3. 运行效果图