基于 Spring Boot + Vue 的宠物领养系统设计与实现

引言

近年来，随着人们生活水平的提高，宠物逐渐成为许多家庭的重要成员。然而，宠物的流浪和弃养问题日益严重，这促使社会对宠物领养的需求不断增长。为解决宠物领养中信息不对称、领养流程复杂等问题，设计并实现一个基于Spring Boot + Vue的宠物领养系统显得尤为重要。

本文详细介绍了宠物领养系统的设计与实现，系统功能包括用户管理、宠物管理、评论功能、宠物苗发布与领养申请、知识管理、权限管理以及首页展示等模块。系统采用前后端分离架构，具有良好的用户体验、数据安全性和可扩展性。

1. 系统需求分析

1.1 功能需求

1.1.1 用户管理

用户注册、登录、修改个人信息。
用户详情页面显示用户的基本信息及相关活动记录。

1.1.2 宠物管理

宠物信息展示、分类筛选。
宠物详情页面显示宠物信息、领养状态及评论功能。
支持管理员审核用户发布的宠物苗。

1.1.3 评论功能

用户可对宠物详情和知识文章发表评论。
支持评论的增删查改。

1.1.4 申请管理

用户申请领养宠物，管理员审核申请。
支持查看申请状态及领养记录。

1.1.5 知识管理

知识文章的展示和分类筛选。
知识详情显示文章内容及评论功能。

1.1.6 权限管理

区分普通用户和管理员角色。
管理员拥有更高权限，如宠物和领养申请的审核。

1.1.7 首页

展示系统的核心功能模块入口。
轮播展示推荐的宠物和热门知识文章。

1.2 非功能需求

用户体验：界面简洁直观，操作便捷。
数据安全性：加密存储用户密码，防止敏感信息泄露。
性能要求：支持高并发访问，确保数据加载快速且稳定。
可扩展性：方便未来增加新功能或优化现有功能。

2. 系统设计

2.1 系统架构

系统采用前后端分离架构：

前端（Vue.js）：实现页面展示与用户交互，采用 Element UI 构建组件化页面。
后端（Spring Boot）：提供 RESTful API，实现业务逻辑处理和数据管理。
数据库（MySQL）：存储用户、宠物、评论、申请、知识等信息。
权限控制：基于 Spring Security 实现角色权限管理。

2.2 系统架构图

+---------------------+      +----------------------+
|       Vue.js        | <--> |    Spring Boot       |
|  (用户界面)         |      | (业务逻辑与API服务)  |
+---------------------+      +----------------------+
           |                              |
           |                              |
+---------------------+      +----------------------+
|       MySQL         |      |   文件存储（OSS）    |
|  (数据存储)         |      | (宠物图片等静态资源) |
+---------------------+      +----------------------+

2.3 数据库设计

2.3.1 用户表（users）

存储用户的基本信息。

CREATE TABLE users (
    id INT PRIMARY KEY AUTO_INCREMENT,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    email VARCHAR(100),
    role ENUM('USER', 'ADMIN') DEFAULT 'USER',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

2.3.2 宠物表（pets）

存储宠物的基本信息。

CREATE TABLE pets (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50),
    age INT,
    breed VARCHAR(50),
    description TEXT,
    image_url VARCHAR(255),
    status ENUM('AVAILABLE', 'ADOPTED', 'PENDING') DEFAULT 'AVAILABLE',
    owner_id INT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (owner_id) REFERENCES users(id)
);

2.3.3 评论表（comments）

存储宠物和知识文章的评论。

CREATE TABLE comments (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT,
    target_id INT, -- 宠物ID或知识文章ID
    target_type ENUM('PET', 'KNOWLEDGE'),
    content TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id)
);

2.3.4 申请表（applications）

存储用户对宠物领养的申请记录。

CREATE TABLE applications (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_id INT,
    pet_id INT,
    status ENUM('PENDING', 'APPROVED', 'REJECTED') DEFAULT 'PENDING',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES users(id),
    FOREIGN KEY (pet_id) REFERENCES pets(id)
);

2.3.5 知识表（knowledge）

存储知识文章信息。

CREATE TABLE knowledge (
    id INT PRIMARY KEY AUTO_INCREMENT,
    title VARCHAR(100),
    content TEXT,
    category VARCHAR(50),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

3. 核心功能模块设计

3.1 用户管理

3.1.1 用户注册与登录

用户通过邮箱和密码注册。
使用 Spring Security 实现登录认证和密码加密存储。

示例代码：用户注册接口

@RestController
@RequestMapping("/api/users")
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/register")
    public ResponseEntity<String> register(@RequestBody User user) {
        userService.register(user);
        return ResponseEntity.ok("注册成功");
    }
}

示例代码：用户服务层

@Service
public class UserService {

    @Autowired
    private UserRepository userRepository;

    @Autowired
    private PasswordEncoder passwordEncoder;

    public void register(User user) {
        user.setPassword(passwordEncoder.encode(user.getPassword()));
        userRepository.save(user);
    }
}

3.2 宠物管理

3.2.1 宠物列表

支持按分类、状态筛选宠物。

示例代码：宠物列表接口

@RestController
@RequestMapping("/api/pets")
public class PetController {

    @Autowired
    private PetService petService;

    @GetMapping
    public List<Pet> getPets(@RequestParam(required = false) String status) {
        return petService.getPets(status);
    }
}

3.2.2 宠物详情

展示宠物的详细信息，包括领养状态和评论。

3.3 评论功能

3.3.1 评论管理

支持用户对宠物和知识文章发表评论。
管理员可以删除不当评论。

3.4 申请管理

3.4.1 领养申请

用户点击宠物详情页面的“申请领养”按钮后，系统记录领养申请，并通知管理员审核。

示例代码：申请提交接口

@PostMapping("/applications")
public ResponseEntity<String> applyForPet(@RequestBody Application application) {
    applicationService.submitApplication(application);
    return ResponseEntity.ok("申请已提交");
}

3.5 知识管理

3.5.1 知识文章展示

用户可以按分类查看知识文章。

3.5.2 知识详情

展示文章内容，并支持评论功能。

3.6 权限管理

使用 Spring Security 配置权限控制。
区分普通用户和管理员角色，不同角色具有不同的操作权限。

示例代码：权限配置

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers("/api/users/register").permitAll()
            .antMatchers("/api/admin/**").hasRole("ADMIN")
            .anyRequest().authenticated()
            .and().formLogin().permitAll()
            .and().logout().permitAll();
    }
}

4. 前端设计与实现

4.1 技术栈

Vue.js：前端框架。
Element UI：UI组件库。

4.2 宠物详情页面

功能点

展示宠物图片、信息和领养状态。
显示宠物评论列表。
提供评论输入框和领养

申请按钮。

示例代码

<template>
  <div>
    <img :src="pet.image_url" alt="Pet Image" />
    <h3>{{ pet.name }}</h3>
    <p>{{ pet.description }}</p>
    <button @click="applyForAdoption">申请领养</button>
    <hr />
    <h4>评论</h4>
    <div v-for="comment in comments" :key="comment.id">
      <p>{{ comment.content }}</p>
    </div>
    <textarea v-model="newComment" placeholder="发表评论"></textarea>
    <button @click="postComment">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pet: {},
      comments: [],
      newComment: ""
    };
  },
  methods: {
    fetchPetDetails() {
      axios.get(`/api/pets/${this.$route.params.id}`).then(res => {
        this.pet = res.data;
      });
    },
    postComment() {
      axios.post(`/api/comments`, { content: this.newComment }).then(() => {
        this.fetchComments();
      });
    },
    applyForAdoption() {
      axios.post(`/api/applications`, { petId: this.pet.id }).then(() => {
        alert("申请已提交");
      });
    }
  },
  mounted() {
    this.fetchPetDetails();
    this.fetchComments();
  }
};
</script>