写一个spring boot+vue的两表关联，然后把具体流程写出来

好的，以下是Spring Boot和Vue的两表关联的具体流程：

1. 创建数据库表

首先创建两个实体的表，例如一个用户表和一个订单表，这两个表之间存在关联关系，即一个用户可以有多个订单。

2. 创建Spring Boot项目

使用Spring Initializr创建一个新的Spring Boot项目，选择需要的依赖项，例如Spring Data JPA和MySQL驱动程序。

3. 创建实体类

创建两个实体类，一个代表用户，一个代表订单，使用JPA注解来定义实体的属性和关系。例如，用户实体类可能如下所示：

@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    private String name;

    @OneToMany(mappedBy = "user")
    private List<Order> orders;
    
    // getters and setters
}

订单实体类可能如下所示：

@Entity
public class Order {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;

    private String product;

    @ManyToOne
    @JoinColumn(name = "user_id")
    private User user;
    
    // getters and setters
}

4. 创建Spring Data JPA仓库

为每个实体创建一个Spring Data JPA仓库，这将使我们能够使用简单的方法来访问数据库。例如，User仓库可能如下所示：

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

Order仓库可能如下所示：

@Repository
public interface OrderRepository extends JpaRepository<Order, Long> {
}

5. 创建Spring Boot REST控制器

创建一个Spring Boot REST控制器，用于处理与用户和订单相关的HTTP请求。例如，以下控制器将返回所有用户和订单的列表：

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

    @Autowired
    private OrderRepository orderRepository;

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

    @GetMapping("/orders")
    public List<Order> getOrders() {
        return orderRepository.findAll();
    }
}

6. 创建Vue项目

使用Vue CLI创建一个新的Vue项目，选择需要的依赖项，例如Axios和Vue Router。

7. 创建Vue组件

创建两个Vue组件，一个用于显示用户列表，一个用于显示订单列表。例如，以下组件将获取用户列表并将其显示在表格中：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    axios.get('/api/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

订单列表组件可能如下所示：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Product</th>
          <th>User</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="order in orders" :key="order.id">
          <td>{{ order.id }}</td>
          <td>{{ order.product }}</td>
          <td>{{ order.user.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      orders: []
    }
  },
  created() {
    axios.get('/api/orders')
      .then(response => {
        this.orders = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

8. 创建Vue路由

创建Vue路由，将用户列表组件和订单列表组件映射到不同的URL。例如，以下路由将用户列表组件映射到“/users” URL，将订单列表组件映射到“/orders” URL：

import Vue from 'vue'
import VueRouter from 'vue-router'
import UserList from './components/UserList.vue'
import OrderList from './components/OrderList.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/users', component: UserList },
  { path: '/orders', component: OrderList }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

9. 运行应用程序

现在可以运行应用程序了。在命令行中启动Spring Boot应用程序：

mvn spring-boot:run

然后在另一个终端中启动Vue应用程序：

npm run serve

现在可以在Web浏览器中访问Vue应用程序并查看用户列表和订单列表了。