Java 前后端分离实战：从环境搭建到项目落地

Java前后端分离项目开发全流程实战

原创已于 2025-07-05 15:34:10 修改 · 684 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#java #开发语言

于 2025-07-05 15:33:14 首次发布

在互联网技术快速发展的当下，前后端分离架构凭借其高效性、可维护性和扩展性，成为了主流的开发模式。对于 Java 开发者来说，利用成熟的 Java 后端框架与灵活的前端框架结合，能够快速构建出功能强大的应用程序。本文将以 Spring Boot 作为后端开发框架，Vue.js 作为前端框架，详细介绍 Java 前后端分离项目的开发过程，并附上代码示例、所需插件及软件链接，帮助大家快速上手实践。

参考资源

一、开发环境搭建

1.1 后端环境

JDK 安装：Java 开发首先需要安装 Java Development Kit（JDK），推荐使用 JDK 11 及以上版本。可以从Ora cle 官方网站下载对应操作系统的 JDK 安装包，按照安装向导完成安装。安装完成后，通过java -version和javac -version命令检查是否安装成功。

IntelliJ IDEA 安装：IntelliJ IDEA 是一款功能强大的 Java 集成开发环境（IDE），分为社区版和旗舰版，社区版免费且功能足以满足日常开发需求。从Intel liJ I DEA 官网下载安装包，安装完成后打开 IDEA，即可开始 Java 项目开发。

Spring Initializr 创建项目：打开浏览器访问Spri ng In itial izr，在页面中配置项目基本信息，如 Group（组织名）、Artifact（项目名）、依赖等。一般选择 Web、MySQL Driver（若使用 MySQL 数据库）等依赖，点击 “Generate” 生成项目压缩包，解压后使用 IntelliJ IDEA 打开。

1.2 前端环境

Node.js 安装：Vue.js 是基于 JavaScript 的前端框架，需要安装 Node.js 运行环境。从Node .js 官方网站下载适合操作系统的安装包，安装过程中保持默认设置即可。安装完成后，通过node -v和npm -v命令检查安装情况。

Visual Studio Code 安装：Visual Studio Code（简称 VS Code）是一款轻量级但功能丰富的代码编辑器，支持多种编程语言和插件扩展。从VS Code 官网下载安装包，安装后可以安装 Vue.js 相关插件，如 “Vetur”，用于增强 Vue 代码的语法提示和格式化。

二、后端开发：基于 Spring Boot 构建 API

Spring Boot 提供了快速构建生产级别的基于 Spring 框架应用的能力，通过自动配置和起步依赖简化开发流程。以下是一个简单的用户管理 API 示例：

// 用户实体类
public class User {
    private Long id;
    private String username;
    private String password;

    // 省略getter和setter方法
}

// 用户服务接口
public interface UserService {
    User save(User user);
    User findById(Long id);
    List<User> findAll();
}

// 用户服务实现类
@Service
public class UserServiceImpl implements UserService {
    private final List<User> userList = new ArrayList<>();

    @Override
    public User save(User user) {
        user.setId((long) (userList.size() + 1));
        userList.add(user);
        return user;
    }

    @Override
    public User findById(Long id) {
        return userList.stream()
               .filter(user -> user.getId().equals(id))
               .findFirst()
               .orElse(null);
    }

    @Override
    public List<User> findAll() {
        return userList;
    }
}

// 用户控制器类
@RestController
@RequestMapping("/api/users")
public class UserController {
    private final UserService userService;

    public UserController(UserService userService) {
        this.userService = userService;
    }

    @PostMapping
    public User createUser(@RequestBody User user) {
        return userService.save(user);
    }

    @GetMapping("/{id}")
    public User getUserById(@PathVariable Long id) {
        return userService.findById(id);
    }

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

上述代码定义了用户实体类、服务接口及实现类，最后通过控制器类暴露 RESTful 风格的 API 接口。运行 Spring Boot 项目，即可通过http://localhost:8080/api/user s等地址访问相应接口。

三、前端开发：使用 Vue.js 调用后端 API

Vue.js 以其简洁的语法和高效的响应式系统，能够快速构建用户界面。以下是一个使用 Vue.js 调用后端用户管理 API 的示例：

<template>
  <div id="app">
    <h1>用户管理</h1>
    <input v-model="newUser.username" placeholder="用户名">
    <input v-model="newUser.password" placeholder="密码">
    <button @click="createUser">创建用户</button>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.id }} - {{ user.username }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      newUser: {
        username: '',
        password: ''
      },
      users: []
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    async getUsers() {
      try {
        const response = await axios.get('http://localhost:8080/api/users');
        this.users = response.data;
      } catch (error) {
        console.error('获取用户列表失败', error);
      }
    },
    async createUser() {
      try {
        const response = await axios.post('http://localhost:8080/api/users', this.newUser);
        this.users.push(response.data);
        this.newUser = {
          username: '',
          password: ''
        };
      } catch (error) {
        console.error('创建用户失败', error);
      }
    }
  }
};
</script>

在上述 Vue 组件代码中，通过axios库发送 HTTP 请求调用后端 API，实现用户列表的获取和新用户的创建。在项目目录下执行npm run serve启动 Vue 项目，在浏览器中访问对应地址即可看到页面效果。

四、前后端联调与跨域处理

前后端开发完成后，需要进行联调测试。由于前端和后端项目通常运行在不同的端口（如前端运行在8081端口，后端运行在8080端口），会出现跨域问题。在 Spring Boot 后端项目中，可以通过添加 CORS 配置解决跨域问题：

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                       .allowedOrigins("http://localhost:8081")
                       .allowedMethods("GET", "POST", "PUT", "DELETE")
                       .allowedHeaders("*");
            }
        };
    }
}

上述配置允许来自http://localhost:808 1的请求访问后端所有接口，并支持常见的 HTTP 方法和所有请求头。配置完成后，重新启动后端项目，即可正常进行前后端联调。

五、总结

通过以上步骤，我们完成了一个简单的 Java 前后端分离项目的开发。从开发环境搭建，到后端 Spring Boot API 的构建、前端 Vue.js 页面的开发，再到前后端联调与跨域处理，每一个环节都不可或缺。文中提供的代码示例和插件软件链接，希望能帮助大家快速入门前后端分离开发。在实际项目中，可以根据需求进一步扩展功能，如添加数据库持久化、用户认证授权等。如果你在实践过程中有任何疑问或想了解更多进阶内容，欢迎一起交流探讨。

上述博文详细展示了 Java 前后端分离项目的全流程。若你还想添加其他功能代码示例，或对插件、软件有特定要求，欢迎随时告知。