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

一、准备工作

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<User, Long> {
}

创建服务层（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<User> 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<User> 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 应用的根组件，可以对其进行修改来定义整体的页面布局。例如：

<template>
  <div id="app">
    <header>
      <h1>My Spring Boot + Vue Project</h1>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      &copy; {{ new Date().getFullYear() }}
    </footer>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
#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;
}
</style>

在 src/components 目录下创建各个功能对应的组件，比如创建一个 UserList.vue 组件用于展示用户列表信息：

<template>
  <div>
    <h2>User List</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.username }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  }
};
</script>

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

3. 实现与后端交互

首先安装 axios（一个常用的用于发送 HTTP 请求的 JavaScript 库），在命令行中进入 frontend 项目目录（即 my-vue-app 目录），运行命令 npm install axios。
在组件中使用 axios 来调用后端接口获取数据或提交数据等操作。例如在 UserList.vue 组件中添加方法来获取用户列表数据：

<template>
  <div>
    <h2>User List</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.username }}
      </li>
    </ul>
  </div>
</template>

<script>
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);
        });
    }
  }
};
</script>

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

这里在组件的 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 应用启动时会自动提供这些前端静态文件服务，前端页面发起的请求也能直接与后端接口交互，实现一体化部署。

posted @ 2024-12-18 11:33 软件职业规划阅读(310) 评论(0) 编辑收藏举报

刷新页面返回顶部