分享一套锋哥原创的微信小程序宠物领养系统(SpringBoot4后端+Vue3管理端)

大家好，我是java1234_小锋老师，分享一套分享一套锋哥原创的微信小程序宠物领养系统(SpringBoot4后端+Vue3管理端)  。

项目简介

随着城市生活水平的提升与情感陪伴需求的增长，宠物领养逐渐成为人与动物建立长期情感连接的重要方式。传统的领养渠道主要依赖线下救助站与社交媒体，存在信息分散、流程不规范、跟踪困难等问题。为此，本论文设计并实现了一套面向宠物领养场景的一体化系统，包含基于 Spring Boot 的后端服务、基于 Vue 3 + Element Plus 的管理后台与基于微信小程序的用户端，覆盖宠物档案管理、领养申请与审核、领养反馈、评论收藏、平台公告以及数据统计概览等完整业务闭环。

在系统架构层面，后端采用 Spring Boot 4 + MyBatis + MySQL 构建分层服务，使用 PageHelper 实现物理分页，采用 JWT 完成管理员与小程序用户的统一鉴权；前端管理后台基于 Vue 3 组合式 API、Element Plus 与 ECharts，提供数据可视化看板与可扩展的页面结构；微信小程序基于原生 TypeScript 框架开发，提供首页推荐、分类筛选、宠物详情、领养申请、我的申请、领养反馈、收藏与个人中心等功能。在功能实现层面，核心业务以「领养申请—审核—反馈」为主线，通过状态机控制宠物的「待领养/已领养/下架」状态联动，结合统一的图片上传与静态资源服务，保证业务数据与多媒体资源的一致性。

源码下载

链接: pan.baidu.com/s/1V-Jc30Af… 提取码: 1234

相关截图

核心代码

package com.java1234.controller.admin;

import com.java1234.common.PageResult;
import com.java1234.common.R;
import com.java1234.entity.PetCategory;
import com.java1234.service.PetCategoryService;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * 宠物分类管理
 */
@RestController
@RequestMapping("/api/admin/category")
@RequiredArgsConstructor
public class AdminCategoryController {

    private final PetCategoryService petCategoryService;

    @GetMapping("/page")
    public R<PageResult<PetCategory>> page(@RequestParam(defaultValue = "1") int pageNum,
                                            @RequestParam(defaultValue = "10") int pageSize) {
        return R.ok(petCategoryService.page(pageNum, pageSize));
    }

    @GetMapping("/list")
    public R<List<PetCategory>> list() {
        return R.ok(petCategoryService.listAll());
    }

    @GetMapping("/{id}")
    public R<PetCategory> get(@PathVariable Long id) {
        return R.ok(petCategoryService.get(id));
    }

    @PostMapping
    public R<Void> save(@RequestBody PetCategory c) {
        petCategoryService.save(c);
        return R.ok();
    }

    @DeleteMapping("/{id}")
    public R<Void> delete(@PathVariable Long id) {
        petCategoryService.delete(id);
        return R.ok();
    }
}

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { categoryPage, categorySave, categoryDelete } from '@/api/category'

const query = reactive({ pageNum: 1, pageSize: 10 })
const table = ref([])
const total = ref(0)
const dialog = ref(false)
const form = ref({ id: null, name: '', icon: '', sort: 0, remark: '' })

async function fetch() {
  const res = await categoryPage(query)
  table.value = res.data.list
  total.value = res.data.total
}

function openCreate() {
  form.value = { id: null, name: '', icon: '', sort: 0, remark: '' }
  dialog.value = true
}

function openEdit(row) {
  form.value = { ...row }
  dialog.value = true
}

async function save() {
  await categorySave(form.value)
  ElMessage.success('保存成功')
  dialog.value = false
  fetch()
}

async function remove(row) {
  await ElMessageBox.confirm('确认删除？若分类下仍有宠物将禁止删除。')
  await categoryDelete(row.id)
  ElMessage.success('已删除')
  fetch()
}

onMounted(fetch)
</script>

<template>
  <div>
    <h1 class="pet-page-title">宠物分类</h1>
    <el-card>
      <el-button type="success" @click="openCreate" style="margin-bottom: 12px">新增分类</el-button>
      <el-table :data="table" stripe>
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="sort" label="排序" width="90" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button link type="primary" @click="openEdit(row)">编辑</el-button>
            <el-button link type="danger" @click="remove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 12px; text-align: right">
        <el-pagination
          v-model:current-page="query.pageNum"
          v-model:page-size="query.pageSize"
          :total="total"
          layout="total, prev, pager, next"
          @current-change="fetch"
        />
      </div>
    </el-card>
    <el-dialog v-model="dialog" title="分类" width="480px">
      <el-form label-width="80px">
        <el-form-item label="名称" required>
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="图标URL">
          <el-input v-model="form.icon" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" :min="0" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>