springboot＋vue实现增删改查

Spring Boot和Vue.js可以很好地搭配使用，实现前后端分离的Web应用程序。以下是一个简单的例子，演示如何使用Spring Boot和Vue.js实现增删改查功能。

1. 创建一个Spring Boot项目，包含Spring Web和Spring Data JPA依赖。创建一个实体类和一个Repository接口，用于操作数据库。

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String email;
    // 省略getter和setter
}

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

2. 创建一个RESTful API，使用Spring MVC和Spring Data REST实现，用于获取、创建、更新和删除用户。

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

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

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

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

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

3. 创建一个Vue.js应用程序，使用axios库与后端进行通信。创建一个组件，用于显示用户列表，以及一个表单组件，用于创建或更新用户。

<template>
  <div>
    <table>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Actions</th>
      </tr>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
        <td>
          <button @click="edit(user)">Edit</button>
          <button @click="remove(user)">Remove</button>
        </td>
      </tr>
    </table>
    <form v-if="editing" @submit.prevent="save">
      <input type="text" v-model="user.name" placeholder="Name">
      <input type="email" v-model="user.email" placeholder="Email">
      <button type="submit">{{ editing.id ? 'Update' : 'Create' }}</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      user: {},
      editing: false,
    };
  },
  methods: {
    async fetchUsers() {
      const { data } = await axios.get('/api/users');
      this.users = data;
    },
    async save() {
      if (this.editing.id) {
        await axios.put(`/api/users/${this.editing.id}`, this.user);
      } else {
        await axios.post('/api/users', this.user);
      }
      this.editing = false;
      this.user = {};
      await this.fetchUsers();
    },
    async remove(user) {
      await axios.delete(`/api/users/${user.id}`);
      await this.fetchUsers();
    },
    edit(user) {
      this.editing = true;
      this.user = { ...user };
    },
  },
  async mounted() {
    await this.fetchUsers();
  },
};
</script>

4. 在Spring Boot应用程序中配置静态资源路径，将Vue.js应用程序打包为静态资源，并在Spring Boot应用程序中提供静态资源服务。

spring.mvc.static-path-pattern=/static/**
spring.resources.static-locations=classpath:/static/

5. 打包Vue.js应用程序，并将生成的dist目录复制到Spring Boot应用程序的静态资源目录中。

6. 运行Spring Boot应用程序，访问http://localhost:8080/static/index.html即可看到用户列表和表单。现在可以使用Vue.js应用程序与后端进行交互，实现增删改查功能了。