Spring Boot 与 Vue.js：前后端分离的完美搭档

最新推荐文章于 2025-05-20 19:00:43 发布

代码老y

最新推荐文章于 2025-05-20 19:00:43 发布

阅读量899

点赞数 19

文章标签： spring boot java vue.js

本文链接：https://blog.csdn.net/weixin_66924704/article/details/148080399

版权

1. 为什么选择 Spring Boot 和 Vue.js

1.1 Spring Boot 的优势

简化开发：Spring Boot 提供了自动配置功能，能够根据项目依赖自动配置 Spring 和第三方库，大大减少了配置文件的编写。
独立运行：Spring Boot 内嵌了 Tomcat、Jetty 等服务器，无需部署 WAR 文件，直接运行即可。
生产就绪：Spring Boot 提供了生产就绪的特性，如性能指标、健康检查、外部化配置等，方便开发和运维。

1.2 Vue.js 的优势

渐进式框架：Vue.js 是一个渐进式框架，可以轻松地集成到现有项目中，也可以用于构建大型单页面应用。
组件化开发：Vue.js 提供了组件化开发模式，便于代码复用和维护。
响应式数据绑定：Vue.js 提供了强大的响应式数据绑定功能，能够自动更新 DOM，减少手动操作。

2. 环境搭建

2.1 Spring Boot 环境搭建

使用 Spring Initializr：
- 访问 Spring Initializr。
- 选择项目元数据（如项目名、依赖等）。
- 添加依赖：spring-boot-starter-web、spring-boot-starter-data-jpa、spring-boot-starter-security 等。
- 生成项目并下载。
项目结构：
- src/main/java：存放 Java 源代码。
- src/main/resources：存放资源文件，如配置文件、静态资源等。
- src/test/java：存放测试代码。
添加依赖：

<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>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>

2.2 Vue.js 环境搭建

1.安装 Vue CLI：

npm install -g @vue/cli

2.创建 Vue 项目：

vue create my-vue-app

3.安装依赖

cd my-vue-app
npm install

4.启动开发服务器：

npm run serve

3. 数据交互

3.1 后端：Spring Boot 提供 RESTful API

创建实体类：

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

    private String name;
    private String email;

    // Getters and Setters
}

2.创建 Repository：

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

3.创建 Service：

@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

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

4.创建 Controller：

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

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

3.2 前端：Vue.js 使用 Axios 请求数据

1.安装 Axios：

npm install axios

2.创建 Vue 组件：

<template>
    <div>
        <h1>用户列表</h1>
        <ul>
            <li v-for="user in users" :key="user.id">{{ user.name }} - {{ user.email }}</li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios';

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

4. 安全性

4.1 Spring Security 配置

1.配置 Spring Security：

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .csrf().disable()
            .authorizeRequests()
            .antMatchers("/api/**").authenticated()
            .and()
            .httpBasic();
    }
}

2.配置用户认证：

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
            .withUser("user").password("{noop}password").roles("USER");
    }
}

5.1 后端部署

1.打包为 JAR 文件：