springboot和vue前后端连接示例

好的，下面是一个简单的 springboot 和 vue 前后端连接示例：

1. 创建一个 Spring Boot 后端项目，添加依赖：

<dependencies>
   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
   </dependency>
   <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-data-jpa</artifactId>
   </dependency>
   <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <scope>runtime</scope>
   </dependency>
</dependencies>

2. 创建一个 Entity 类和 Repository 接口：

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

   @Column(name = "name")
   private String name;

   @Column(name = "email")
   private String email;

   // getters and setters
}

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

3. 创建一个 RESTful Controller，提供一个查询所有用户的接口：

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

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

4. 创建一个 Vue 前端项目，安装 axios 和 vue-router：

npm install axios vue-router --save

5. 在 Vue 中创建一个 Users 组件，并发起请求获取所有用户：

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

<script>
import axios from 'axios';

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

6. 在 Vue 中创建一个路由，将 Users 组件绑定到路径 /users：

import Vue from 'vue';
import VueRouter from 'vue-router';

import Users from './components/Users.vue';

Vue.use(VueRouter);

const routes = [
   { path: '/users', component: Users }
];

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

export default router;

7. 在 Vue 的入口文件中，将路由绑定到根组件：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
   router,
   render: h => h(App)
}).$mount('#app');

现在，启动 Spring Boot 后端项目和 Vue 前端项目，访问 http://localhost:8080/users，应该可以看到所有用户的信息。