vue axios结合springboot进行增删改查

好的，下面是一个简单的示例：

前端使用Vue.js和axios发送请求，后端使用Spring Boot提供RESTful API。

1. 创建一个Vue组件，例如User.vue，用于显示用户列表和添加/编辑用户。

<template>
  <div>
    <h2>User List</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in userList" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="editUser(user)">Edit</button>
            <button @click="deleteUser(user)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h2>{{ formTitle }}</h2>
    <form @submit.prevent="submitForm">
      <label>Name:</label>
      <input type="text" v-model="user.name">
      <label>Email:</label>
      <input type="email" v-model="user.email">
      <button type="submit">{{ submitButton }}</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      userList: [],
      user: {
        id: null,
        name: '',
        email: ''
      },
      formTitle: 'Add User',
      submitButton: 'Add'
    };
  },
  mounted() {
    this.fetchUserList();
  },
  methods: {
    fetchUserList() {
      axios.get('/api/users')
        .then(response => {
          this.userList = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    submitForm() {
      if (this.user.id) {
        this.updateUser();
      } else {
        this.createUser();
      }
    },
    createUser() {
      axios.post('/api/users', this.user)
        .then(response => {
          this.userList.push(response.data);
          this.resetForm();
        })
        .catch(error => {
          console.log(error);
        });
    },
    updateUser() {
      axios.put(`/api/users/${this.user.id}`, this.user)
        .then(response => {
          const index = this.userList.findIndex(u => u.id === this.user.id);
          this.userList.splice(index, 1, response.data);
          this.resetForm();
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteUser(user) {
      axios.delete(`/api/users/${user.id}`)
        .then(response => {
          const index = this.userList.findIndex(u => u.id === user.id);
          this.userList.splice(index, 1);
        })
        .catch(error => {
          console.log(error);
        });
    },
    editUser(user) {
      this.user.id = user.id;
      this.user.name = user.name;
      this.user.email = user.email;
      this.formTitle = 'Edit User';
      this.submitButton = 'Update';
    },
    resetForm() {
      this.user.id = null;
      this.user.name = '';
      this.user.email = '';
      this.formTitle = 'Add User';
      this.submitButton = 'Add';
    }
  }
};
</script>

2. 创建一个Spring Boot控制器，例如UserController，用于处理用户相关的HTTP请求。

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

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

  @PostMapping
  public User createUser(@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);
  }
}

3. 创建一个Spring Boot存储库，例如UserRepository，用于访问数据库。

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

4. 创建一个Spring Boot实体，例如User，用于表示用户。

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

  @Column(nullable = false)
  private String name;

  @Column(nullable = false)
  private String email;

  // getters and setters
}

5. 配置Spring Boot数据库连接和端口号，例如application.properties。

spring.datasource.url=jdbc:mysql://localhost:3306/mydb
spring.datasource.username=root
spring.datasource.password=123456
server.port=8080

以上就是一个简单的Vue.js和Spring Boot增删改查的示例，你可以根据自己的需求进行修改和扩展。