怎么搭建vue+springboot项目

发布时间：2022-05-25 14:30:48 作者：iii
来源：亿速云阅读：272

怎么搭建Vue+SpringBoot项目

在现代Web开发中，前后端分离的架构已经成为主流。Vue.js作为一款轻量级的前端框架，以其简洁的API和高效的性能受到了广泛欢迎。而Spring Boot作为Java生态中的一款快速开发框架，凭借其强大的功能和便捷的配置，成为了后端开发的首选。本文将详细介绍如何搭建一个基于Vue.js和Spring Boot的前后端分离项目。

1. 项目结构

在开始搭建项目之前，我们需要明确项目的整体结构。一个典型的前后端分离项目通常包含以下几个部分：

前端项目：使用Vue.js构建，负责页面的展示和用户交互。
后端项目：使用Spring Boot构建，负责处理业务逻辑和数据存储。
接口通信：前后端通过RESTful API进行数据交互。

2. 搭建Vue.js前端项目

2.1 安装Node.js和Vue CLI

首先，确保你的开发环境中已经安装了Node.js。如果没有安装，可以从Node.js官网下载并安装。

安装完成后，使用npm（Node.js的包管理工具）全局安装Vue CLI：

npm install -g @vue/cli

2.2 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create vue-springboot-demo

在创建过程中，Vue CLI会提示你选择一些配置选项。你可以选择默认配置，也可以根据需要进行自定义。

2.3 启动Vue项目

项目创建完成后，进入项目目录并启动开发服务器：

cd vue-springboot-demo
npm run serve

此时，Vue项目已经成功启动，你可以在浏览器中访问http://localhost:8080查看项目。

3. 搭建Spring Boot后端项目

3.1 创建Spring Boot项目

使用Spring Initializr创建一个新的Spring Boot项目。你可以通过Spring Initializr官网在线生成项目，也可以使用IDE（如IntelliJ IDEA）的Spring Initializr插件。

在创建项目时，选择以下依赖：

Spring Web：用于构建RESTful API。
Spring Data JPA：用于数据持久化。
H2 Database：用于开发和测试的嵌入式数据库。

3.2 配置Spring Boot项目

创建完成后，打开项目并配置application.properties文件：

# 配置H2数据库
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

# 配置H2控制台
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console

3.3 创建RESTful API

在Spring Boot项目中创建一个简单的RESTful API。例如，创建一个UserController类：

@RestController
@RequestMapping("/api/users")
public class UserController {

    @GetMapping
    public List<String> getUsers() {
        return Arrays.asList("User1", "User2", "User3");
    }
}

3.4 启动Spring Boot项目

在IDE中运行Spring Boot项目，或者使用Maven命令启动：

mvn spring-boot:run

此时，Spring Boot项目已经成功启动，你可以在浏览器中访问http://localhost:8080/api/users查看API返回的数据。

4. 前后端联调

4.1 配置Vue项目代理

为了在开发环境中避免跨域问题，可以在Vue项目中配置代理。打开vue.config.js文件并添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

4.2 调用后端API

在Vue项目中，使用axios库调用后端API。首先安装axios：

npm install axios

然后在Vue组件中调用API：

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user">{{ user }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    axios.get('/api/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};
</script>

4.3 启动前后端项目

分别启动Vue项目和Spring Boot项目，然后在浏览器中访问Vue项目的地址（通常是http://localhost:8080），你应该能够看到从后端API获取的用户列表。

5. 部署项目

5.1 打包Vue项目

在Vue项目目录下运行以下命令，将Vue项目打包为静态文件：

npm run build

打包完成后，生成的静态文件会存放在dist目录中。

5.2 部署静态文件到Spring Boot

将Vue项目打包生成的静态文件复制到Spring Boot项目的src/main/resources/static目录下。这样，Spring Boot项目在启动时会自动提供这些静态文件。

5.3 打包Spring Boot项目

在Spring Boot项目目录下运行以下命令，将Spring Boot项目打包为可执行的JAR文件：

mvn clean package

打包完成后，生成的JAR文件会存放在target目录中。

5.4 运行Spring Boot项目

使用以下命令运行打包后的Spring Boot项目：

java -jar target/your-springboot-project.jar

此时，你可以通过浏览器访问http://localhost:8080查看完整的前后端项目。

6. 总结

通过以上步骤，我们成功搭建了一个基于Vue.js和Spring Boot的前后端分离项目。在实际开发中，你可能还需要根据项目需求添加更多的功能和配置，例如用户认证、数据库迁移、日志管理等。希望本文能够帮助你快速上手Vue.js和Spring Boot的开发。