从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南

06-01 1137阅读

一、准备工作

1. 开发环境搭建
  • 安装 JDK（Java Development Kit）：前往 Oracle 官网（https://www.oracle.com/java/technologies/javase-jdk11-downloads.html ，以 JDK 11 为例）下载适合你操作系统的 JDK 安装包，按照安装向导完成安装。安装完成后，配置系统环境变量，确保在命令行中能通过 java -version 命令查看到正确的 Java 版本信息。
  • 安装 IDE（集成开发环境）：推荐使用 IntelliJ IDEA（https://www.jetbrains.com/idea/download/ ）或 Eclipse（https://www.eclipse.org/downloads/ ）。下载并安装对应版本，在 IDE 中配置好 JDK 路径。
  • 安装 Node.js 和 npm（Node Package Manager）：前往 Node.js 官网（https://nodejs.org/en/download ）下载对应操作系统的安装包进行安装。安装完成后，在命令行中输入 node -v 和 npm -v 分别查看 Node.js 和 npm 的版本信息，确保安装成功。
    2. 创建项目基础结构
    • 新建一个项目根目录，比如命名为 my-project，在该目录下分别创建用于存放后端（Spring Boot）代码的子目录和前端（Vue）代码的子目录，例如 backend 和 frontend。

      二、Spring Boot 后端项目开发

      1. 初始化 Spring Boot 项目
      • 打开 IDE，选择创建新项目，在项目创建向导中选择 Spring Initializr（不同 IDE 入口位置稍有不同）。
      • 在 Spring Initializr 的配置页面，填写项目基本信息，如项目的坐标（Group 和 Artifact）、选择构建工具（推荐 Maven 或 Gradle，这里以 Maven 为例）、Java 版本等。
      • 添加项目依赖，至少要添加 Spring Web 依赖，以便支持构建 Web 应用。如果后续需要连接数据库、使用安全认证等功能，可以按需添加如 Spring Data JPA、Spring Security 等相关依赖。完成配置后点击生成项目，然后将生成的项目导入到 IDE 中，此时项目结构会出现在 IDE 的工作区中。
        2. 配置数据库（若项目需要）
        • 如果项目需要与数据库交互，以 MySQL 数据库为例，首先确保 MySQL 数据库已经安装并启动。
        • 在 backend 项目目录下的 src/main/resources 目录中，找到 application.properties（或者也可以使用 application.yml，格式稍有不同但功能一样）配置文件，添加如下数据库连接配置内容： 
          spring.datasource.url=jdbc:mysql://localhost:3306/your_database_name
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

          将上述配置中的 your_database_name、your_username、your_password 替换为你实际使用的数据库名、用户名和密码。

          3. 编写业务逻辑代码
          • 创建实体类（Entity）：在 src/main/java 目录下按照业务模块创建对应的包结构，比如 com.example.myproject.entity，在该包下创建实体类，用于映射数据库表结构。例如创建一个 User 实体类代表用户信息： 
            package com.example.myproject.entity;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
@Entity
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String username;
    private String password;
    // 生成必要的构造函数、Getter 和 Setter 方法
    public User() {
    }
    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public String getPassword() {
        return password;
    }
    public void setPassword(String password) {
        this.password = password;
    }
}
            • 创建数据访问层（Repository）接口：在 src/main/java/com/example/myproject/repository 包下创建接口，继承 Spring Data JPA 的 JpaRepository 接口来操作实体类。例如对于 User 实体创建 UserRepository 接口： 
              package com.example.myproject.repository;
import com.example.myproject.entity.User;
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository {
}
              • 创建服务层（Service）类：在 src/main/java/com/example/myproject/service 包下创建服务类，用于编写业务逻辑代码，调用 Repository 层接口方法实现具体功能。例如创建 UserService 类： 
                package com.example.myproject.service;
import com.example.myproject.entity.User;
import com.example.myproject.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;
    public List getUsers() {
        return userRepository.findAll();
    }
    public User saveUser(User user) {
        return userRepository.save(user);
    }
}
                • 创建控制器（Controller）类：在 src/main/java/com/example/myproject/controller 包下创建控制器类，用于接收前端发送的 HTTP 请求，并调用服务层方法处理请求，返回相应的结果。例如创建 UserController 类： 
                  package com.example.myproject.controller;
import com.example.myproject.entity.User;
import com.example.myproject.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private UserService userService;
    @GetMapping
    public List getUsers() {
        return userService.getUsers();
    }
    @PostMapping
    public User saveUser(@RequestBody User user) {
        return userService.saveUser(user);
    }
}
                  4. 运行 Spring Boot 项目
                  • 在 IDE 中找到项目的启动类（通常带有 @SpringBootApplication 注解的类），右键点击选择 Run（或者使用快捷键等方式）来启动 Spring Boot 项目。启动成功后，可以通过浏览器访问项目的接口进行测试，比如访问 http://localhost:8080/users（默认端口是 8080，如果在配置文件中修改了端口则使用修改后的端口号）查看是否能获取到数据（如果已经有数据的话）。

                    三、Vue 前端项目开发

                    1. 创建 Vue 项目
                    • 打开命令行，进入之前创建的 frontend 目录，运行命令 vue create my-vue-app（my-vue-app 是前端项目名称，可以自行修改）来创建 Vue 项目。在创建过程中，会提示选择一些项目配置，例如选择默认预设（包含 Babel 和 ESLint 等基础配置）或者手动选择添加其他插件（如 Vue Router、Vuex 等，根据项目需求决定）。创建完成后，进入新创建的 my-vue-app 目录，通过命令 npm run serve 启动 Vue 项目的开发服务器，此时可以在浏览器中访问 http://localhost:8081（默认端口是 8081，若有冲突会提示修改）看到 Vue 项目的初始页面。
                      2. 搭建项目页面结构和组件
                      • 在 src 目录下，App.vue 是整个 Vue 应用的根组件，可以对其进行修改来定义整体的页面布局。例如： 
                          
                        
    
      
                        My Spring Boot + Vue Project
                        
    
    
      
    
    
      © {{ new Date().getFullYear() }}
    
  
                        


export default {
  name: "App"
};


#app {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
header {
  background-color: #333;
  color: white;
  padding: 20px;
}
main {
  padding: 20px;
}
footer {
  background-color: #333;
  color: white;
  padding: 10px;
}
                        • 在 src/components 目录下创建各个功能对应的组件，比如创建一个 UserList.vue 组件用于展示用户列表信息： 
                            
                          
    
                          User List
                          
    
                          • 
        {{ user.username }}
      
                            • 
    
                          


export default {
  data() {
    return {
      users: []
    };
  }
};


ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 10px;
}
                          3. 实现与后端交互
                          • 首先安装 axios（一个常用的用于发送 HTTP 请求的 JavaScript 库），在命令行中进入 frontend 项目目录（即 my-vue-app 目录），运行命令 npm install axios。
                          • 在组件中使用 axios 来调用后端接口获取数据或提交数据等操作。例如在 UserList.vue 组件中添加方法来获取用户列表数据： 
                              
                            
    
                            User List
                            
    
                            • 
        {{ user.username }}
      
                              • 
    
                            


import axios from "axios";
export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios.get("http://localhost:8080/users")
     .then((response) => {
          this.users = response.data;
        })
     .catch((error) => {
          console.error(error);
        });
    }
  }
};


ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  margin-bottom: 10px;
}

                            这里在组件的 mounted 生命周期钩子中调用 fetchUsers 方法，通过 axios 发送 GET 请求到后端的 http://localhost:8080/users 接口获取用户列表数据，并在获取成功后将数据赋值给组件的 users 数据属性，进而在页面上展示出来。

                            4. 构建前端项目
                            • 当前端项目开发完成后，在命令行进入 frontend 项目目录，运行命令 npm run build，这个命令会将 Vue 项目打包生成一系列静态文件，存放在 dist 目录下，包括 index.html、js 文件、css 文件等，这些文件可以部署到 Web 服务器上供用户访问。

                              四、项目部署（可选，根据实际需求）

                              1. 前后端分离部署
                              • 部署后端项目：将 Spring Boot 项目打包成可执行的 JAR 文件（在 IDE 中使用对应的打包功能或者在命令行中进入 backend 项目目录，运行 mvn package 命令，对于 Maven 项目），然后将生成的 JAR 文件部署到服务器上，通过命令 java -jar your_project.jar（your_project.jar 为实际的 JAR 文件名）启动后端服务。
                              • 部署前端项目：将 Vue 项目构建生成的 dist 目录下的静态文件部署到如 Nginx 等 Web 服务器上，配置 Nginx 的反向代理规则，将前端页面发起的 API 请求代理到后端 Spring Boot 项目的接口地址上，例如配置如下的 Nginx 反向代理规则（在 Nginx 配置文件中添加）： 
                                server {
    listen       80;
    server_name  your_domain_name;
    location / {
        root   /path/to/your/vue/dist;
        index  index.html index.htm;
    }
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

                                将上述配置中的 your_domain_name 替换为实际的域名，/path/to/your/vue/dist 替换为 Vue 项目 dist 目录在服务器上的实际路径。

                                2. 一体化部署
                                • 将 Vue 项目构建生成的 dist 目录下的静态文件复制到 Spring Boot 项目的 src/main/resources/static 目录下，然后重新打包 Spring Boot 项目并部署到服务器上启动，这样 Spring Boot 应用启动时会自动提供这些前端静态文件服务，前端页面发起的请求也能直接与后端接口交互，实现一体化部署。
                                从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南
                                （图片来源网络，侵删）
                                从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南
                                （图片来源网络，侵删）
                                从零基础开始实现一个Spring Boot + Vue 项目的详细步骤指南
                                （图片来源网络，侵删）
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

相关阅读

目录[+]

取消
微信二维码
微信二维码
支付宝二维码