springboot+vue全栈教程

Spring Boot 和 Vue.js 是目前非常热门的技术栈，因为它们都提供了非常便捷的开发方式和高效的开发体验。下面是一个简单的全栈教程，帮助你快速入门。

1. 环境搭建

首先，你需要安装好 Java 和 Node.js 环境。然后你可以使用 Spring Initializr 创建一个基于 Spring Boot 的项目，并且选择一些常用的依赖，例如 Spring Web、Spring Data JPA、MySQL 驱动等等。

接着，你可以使用 Vue CLI 创建一个基于 Vue.js 的项目，选择一些常用的插件，例如 Vue Router、Vuex 等等。

2. 数据库操作

在 Spring Boot 中，你可以使用 Spring Data JPA 来进行数据库操作。你需要定义一个实体类，然后使用注解来映射到数据库中的表，例如：

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

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

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

    // getters and setters
}

然后你可以定义一个 UserRepository 接口，继承自 JpaRepository，用来进行数据库操作，例如：

public interface UserRepository extends JpaRepository<User, Long> {
    User findByUsername(String username);
}

在 Vue.js 中，你可以使用 Axios 来进行 HTTP 请求。你需要定义一个 API 类，封装一些常用的请求方法，例如：

import axios from 'axios';

const API_URL = 'http://localhost:8080/api';

class ApiService {
  login(username, password) {
    const data = {
      username: username,
      password: password
    };
    return axios.post(`${API_URL}/login`, data);
  }
}

3. 后端开发

在 Spring Boot 中，你可以定义一个 RestController 类，用来处理 HTTP 请求，例如：

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

    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody User user) {
        User dbUser = userRepository.findByUsername(user.getUsername());
        if (dbUser != null && dbUser.getPassword().equals(user.getPassword())) {
            return ResponseEntity.ok().build();
        } else {
            return ResponseEntity.badRequest().build();
        }
    }
}

在这个例子中，我们定义了一个 login 方法，用来处理 POST 请求，接收一个 User 对象作为参数。然后我们从数据库中查找对应的用户，如果用户名和密码都正确，则返回 HTTP 200，否则返回 HTTP 400。

4. 前端开发

在 Vue.js 中，你可以定义一个组件，用来渲染页面，并且调用 API 类的方法来进行 HTTP 请求，例如：

<template>
  <div>
    <input v-model="username" type="text" placeholder="Username">
    <input v-model="password" type="password" placeholder="Password">
    <button @click="login">Login</button>
  </div>
</template>

<script>
import ApiService from '@/services/api.service.js';

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      ApiService.login(this.username, this.password)
        .then(response => {
          // handle success
        })
        .catch(error => {
          // handle error
        });
    }
  }
};
</script>

在这个例子中，我们定义了一个 Login 组件，用来渲染登录页面。然后我们定义了一个 login 方法，当用户点击登录按钮时调用，使用 API 类的 login 方法来进行 HTTP 请求，如果请求成功，则处理成功逻辑，否则处理错误逻辑。

5. 运行项目

最后，你可以使用 Maven 和 NPM 分别构建和运行后端和前端项目。你可以运行 Spring Boot 项目，然后在浏览器中访问 http://localhost:8080，就可以看到前端页面了。

这就是一个简单的 Spring Boot 和 Vue.js 全栈教程，希望能够帮助你入门。当然，这只是一个开始，你还需要继续学习更多的知识和技巧来提高你的开发能力。