使用springboot和vue实现增删改查

要使用Spring Boot和Vue实现增删改查操作，需要先建立一个Spring Boot项目，然后在项目中添加相关的依赖，例如Spring Web、Spring Data JPA、MySQL驱动等。

1. 建立Spring Boot项目

可以使用Spring Initializr来快速创建一个Spring Boot项目。在创建项目时，需要选择相关的依赖，例如Spring Web和Spring Data JPA。

2. 添加MySQL数据库

在项目中添加MySQL数据库，可以使用Spring Boot内置的H2数据库或者其他数据库，例如MySQL。在pom.xml文件中添加MySQL驱动的依赖：

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>

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

spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

3. 创建实体类

创建一个实体类，用于映射数据库表。例如，创建一个名为User的实体类，包含id、name和age三个属性：

@Entity
@Table(name = "user")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private Integer age;

    // getter和setter方法省略
}

4. 创建Repository

创建一个Repository接口，继承Spring Data JPA的CrudRepository接口，用于操作数据库。例如，创建一个名为UserRepository的接口：

public interface UserRepository extends CrudRepository<User, Long> {
}

5. 创建Controller

创建一个Controller类，用于处理HTTP请求。例如，创建一个名为UserController的类，包含四个方法：查询所有用户、添加用户、更新用户和删除用户：

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserRepository userRepository;

    @GetMapping("")
    public Iterable<User> getAllUsers() {
        return userRepository.findAll();
    }

    @PostMapping("")
    public User addUser(@RequestBody User user) {
        return userRepository.save(user);
    }

    @PutMapping("/{id}")
    public User updateUser(@PathVariable Long id, @RequestBody User user) {
        user.setId(id);
        return userRepository.save(user);
    }

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

6. 创建Vue前端页面

创建Vue前端页面，在前端页面中使用axios库来发送HTTP请求。例如，创建一个名为UserList.vue的组件，用于显示所有用户：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    axios.get('/api/users')
      .then(response => {
        this.users = response.data
      })
  }
}
</script>

在前端页面中使用axios库来发送HTTP请求，调用后端Controller中的接口，例如发送GET请求获取所有用户：

axios.get('/api/users')
  .then(response => {
    this.users = response.data
  })

发送POST请求添加用户：

axios.post('/api/users', {
  name: '张三',
  age: 18
})
  .then(response => {
    console.log(response.data)
  })

发送PUT请求更新用户：

axios.put(`/api/users/${id}`, {
  name: '李四',
  age: 20
})
  .then(response => {
    console.log(response.data)
  })

发送DELETE请求删除用户：

axios.delete(`/api/users/${id}`)
  .then(response => {
    console.log(response.data)
  })

以上就是使用Spring Boot和Vue实现增删改查的基本步骤。当然，还可以根据实际需求进行更加详细和复杂的开发。