帮我用springboot和vue写一个宠物信息管理系统并实现对宠物信息的增删改查

好的，下面我将为您介绍如何使用Spring Boot和Vue.js构建一个宠物信息管理系统。

## 技术栈

- Spring Boot：用于构建后端REST API
- Vue.js：用于构建前端用户界面
- MySQL：用于存储宠物信息

## 后端实现

### 1. 创建Spring Boot项目

使用Spring Initializr创建一个新的Spring Boot项目，选择以下依赖：

- Spring Web
- Spring Data JPA
- MySQL Driver

### 2. 配置数据库

在`application.properties`文件中配置MySQL数据库连接信息：

spring.datasource.url=jdbc:mysql://localhost:3306/pet_information?useSSL=false&serverTimezone=UTC&characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update

### 3. 创建实体类

创建一个实体类`Pet`，用于表示宠物信息：

@Entity
@Table(name = "pet")
public class Pet {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String species;
    private Integer age;
    private String gender;
    private String owner;
    // getter和setter方法
}

### 4. 创建Repository

创建一个Repository类`PetRepository`，用于操作数据库：

@Repository
public interface PetRepository extends JpaRepository<Pet, Long> {
}

### 5. 创建Controller

创建一个Controller类`PetController`，用于处理HTTP请求和响应：

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

    @Autowired
    private PetRepository petRepository;

    @GetMapping
    public List<Pet> getAllPets() {
        return petRepository.findAll();
    }

    @PostMapping
    public Pet createPet(@RequestBody Pet pet) {
        return petRepository.save(pet);
    }

    @GetMapping("/{id}")
    public Pet getPetById(@PathVariable Long id) {
        return petRepository.findById(id).orElse(null);
    }

    @PutMapping("/{id}")
    public Pet updatePet(@PathVariable Long id, @RequestBody Pet pet) {
        Pet existingPet = petRepository.findById(id).orElse(null);
        if (existingPet != null) {
            existingPet.setName(pet.getName());
            existingPet.setSpecies(pet.getSpecies());
            existingPet.setAge(pet.getAge());
            existingPet.setGender(pet.getGender());
            existingPet.setOwner(pet.getOwner());
            return petRepository.save(existingPet);
        } else {
            return null;
        }
    }

    @DeleteMapping("/{id}")
    public void deletePet(@PathVariable Long id) {
        petRepository.deleteById(id);
    }
}

### 6. 运行项目

运行项目，访问`http://localhost:8080/api/pets`可以获取所有宠物信息，访问`http://localhost:8080/api/pets/1`可以获取id为1的宠物信息。

## 前端实现

### 1. 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create pet-information-management-system
cd pet-information-management-system

### 2. 安装axios

为了在Vue中发送HTTP请求，需要安装axios：

npm install axios --save

### 3. 创建组件

创建一个组件`PetList.vue`，用于显示所有宠物信息：

<template>
  <div>
    <h1>Pet List</h1>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Species</th>
          <th>Age</th>
          <th>Gender</th>
          <th>Owner</th>
          <th>Edit</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="pet in pets" :key="pet.id">
          <td>{{ pet.id }}</td>
          <td>{{ pet.name }}</td>
          <td>{{ pet.species }}</td>
          <td>{{ pet.age }}</td>
          <td>{{ pet.gender }}</td>
          <td>{{ pet.owner }}</td>
          <td><router-link :to="{ name: 'editPet', params: { id: pet.id }}">Edit</router-link></td>
          <td><button @click="deletePet(pet.id)">Delete</button></td>
        </tr>
      </tbody>
    </table>
    <router-link :to="{ name: 'createPet' }">Create New Pet</router-link>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      pets: []
    };
  },
  created() {
    axios.get('/api/pets')
      .then(response => {
        this.pets = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    deletePet(id) {
      axios.delete(`/api/pets/${id}`)
        .then(response => {
          this.pets = this.pets.filter(pet => pet.id !== id);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

创建一个组件`CreatePet.vue`，用于创建新宠物信息：

<template>
  <div>
    <h1>Create New Pet</h1>
    <form @submit.prevent="createPet">
      <div>
        <label>Name:</label>
        <input type="text" v-model="pet.name" required>
      </div>
      <div>
        <label>Species:</label>
        <input type="text" v-model="pet.species" required>
      </div>
      <div>
        <label>Age:</label>
        <input type="number" v-model="pet.age" required>
      </div>
      <div>
        <label>Gender:</label>
        <input type="text" v-model="pet.gender" required>
      </div>
      <div>
        <label>Owner:</label>
        <input type="text" v-model="pet.owner" required>
      </div>
      <button type="submit">Create</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      pet: {
        name: '',
        species: '',
        age: '',
        gender: '',
        owner: ''
      }
    };
  },
  methods: {
    createPet() {
      axios.post('/api/pets', this.pet)
        .then(response => {
          this.$router.push({ name: 'home' });
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

创建一个组件`EditPet.vue`，用于编辑宠物信息：

<template>
  <div>
    <h1>Edit Pet</h1>
    <form @submit.prevent="updatePet">
      <div>
        <label>Name:</label>
        <input type="text" v-model="pet.name" required>
      </div>
      <div>
        <label>Species:</label>
        <input type="text" v-model="pet.species" required>
      </div>
      <div>
        <label>Age:</label>
        <input type="number" v-model="pet.age" required>
      </div>
      <div>
        <label>Gender:</label>
        <input type="text" v-model="pet.gender" required>
      </div>
      <div>
        <label>Owner:</label>
        <input type="text" v-model="pet.owner" required>
      </div>
      <button type="submit">Save</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      pet: {
        name: '',
        species: '',
        age: '',
        gender: '',
        owner: ''
      }
    };
  },
  created() {
    axios.get(`/api/pets/${this.$route.params.id}`)
      .then(response => {
        this.pet = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    updatePet() {
      axios.put(`/api/pets/${this.$route.params.id}`, this.pet)
        .then(response => {
          this.$router.push({ name: 'home' });
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

### 4. 配置路由

在`src/router/index.js`文件中配置路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import PetList from '../components/PetList.vue';
import CreatePet from '../components/CreatePet.vue';
import EditPet from '../components/EditPet.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: PetList
  },
  {
    path: '/pets/create',
    name: 'createPet',
    component: CreatePet
  },
  {
    path: '/pets/edit/:id',
    name: 'editPet',
    component: EditPet
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

### 5. 运行项目

运行项目，访问`http://localhost:8081`可以查看宠物列表，访问`http://localhost:8081/pets/create`可以创建新宠物信息，访问`http://localhost:8081/pets/edit/1`可以编辑id为1的宠物信息。

至此，我们已经完成了宠物信息管理系统的构建。