springboot + vue 简单示例

好的，这里提供一个简单的示例：

后端使用 Spring Boot，前端使用 Vue.js，通过 RESTful API 进行数据交互。

1. 创建 Spring Boot 项目，添加相关依赖

在 pom.xml 文件中添加以下依赖：

<!-- Spring Boot Web -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<!-- Spring Data JPA -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<!-- MySQL 驱动 -->
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
</dependency>

<!-- Lombok -->
<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
  <optional>true</optional>
</dependency>

2. 创建实体类和 DAO 接口

创建一个 User 实体类和对应的 UserRepository 接口，用于操作数据库：

@Entity
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;

    private Integer age;
}

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

3. 创建 RESTful API

创建一个 UserController 类，用于处理用户相关的请求：

@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);
    }
}

4. 创建 Vue.js 项目

使用 Vue CLI 创建一个名为 my-project 的项目：

vue create my-project

5. 修改 App.vue 文件

在 App.vue 文件中添加以下代码：

<template>
  <div id="app">
    <h1>用户列表</h1>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</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>
export default {
  name: "App",
  data() {
    return {
      users: [],
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      fetch("/api/users")
        .then((response) => response.json())
        .then((data) => (this.users = data));
    },
  },
};
</script>

6. 运行项目

在终端中分别进入 Spring Boot 项目和 Vue.js 项目的根目录，运行以下命令：

# Spring Boot 项目
mvn spring-boot:run

# Vue.js 项目
npm run serve

打开浏览器，访问 http://localhost:8080/，即可看到用户列表。