首页手记 Vue3+SpringBoot教程：快速入门指南

Vue3+SpringBoot教程：快速入门指南

标签：

Vue.js SpringBoot

概述

本文提供了详细的Vue3+SpringBoot教程，介绍了从环境搭建到项目开发的全过程，涵盖安装所需工具、创建项目及整合前后端内容。此外，还涉及到了项目打包部署和常见问题的解决方法。

引入与环境准备

介绍Vue3和SpringBoot

Vue3是一个渐进式前端框架，它允许开发者逐步将Vue的功能加入到现有的项目中，或是从零开始构建单页面应用。Vue3相较于其前辈Vue2，带来了多项改进和新特性，如Composition API、更好的性能、更轻量的体积等。SpringBoot是一个由Pivotal团队提供的开源框架，旨在简化新Spring应用的初始搭建以及开发过程。它通过配置来约定优于配置，提供了自动配置功能，从而极大提升了Java应用的开发效率。

安装开发环境

要开始使用Vue3和SpringBoot，首先需要安装以下工具和库：

Java Development Kit (JDK): Spring Boot基于Java开发，需确保已安装JDK。
Maven或Gradle: Spring Boot项目通常使用Maven或Gradle作为构建工具。
Node.js和npm: Vue3项目需要Node.js和npm环境来管理前端依赖和运行构建命令。
Vue CLI: Vue CLI是一个命令行工具，用于快速搭建Vue项目。

安装步骤

安装JDK和Maven

下载并安装JDK，确保安装完成后，Java环境变量已配置，例如：

export JAVA_HOME=/path/to/jdk
export PATH=$JAVA_HOME/bin:$PATH

下载并安装Maven，同样确保Maven环境变量已配置。

安装Node.js和npm

访问Node.js官网，下载最新版本的Node.js安装包，安装时会自动安装npm。
检查安装是否成功，可以使用命令 node -v 和 npm -v 查看版本号。

安装Vue CLI

打开终端或命令行，运行 npm install -g @vue/cli 安装Vue CLI。
安装完成后，使用 vue --version 查看Vue CLI的版本。

创建项目

创建SpringBoot项目

打开Maven或Gradle构建工具，创建一个新的Spring Boot项目。
在IDE中，选择Spring Initializr创建项目，选择Spring Web依赖以创建一个简单的REST API项目。
项目创建完成后，可以在IDE中打开项目并进行进一步的开发。

创建Vue3项目

打开命令行，使用Vue CLI创建一个Vue3项目。例如：

vue create vue3-app

在项目创建过程中，选择默认配置，并选择Vue3作为预设版本。
进入项目目录 cd vue3-app 并运行 npm run serve 启动开发服务器。

SpringBoot后端开发基础

创建SpringBoot项目

使用Spring Initializr创建项目

打开浏览器，访问Spring Initializr官网。
选择Maven或Gradle作为构建工具。
输入项目的基本信息，如项目名、组织名等。
在依赖选项中，勾选Spring Web依赖，以便创建一个简单的REST API项目。
点击“Generate”按钮，下载项目压缩包。
解压下载的项目包，将项目导入到IDE中进行开发。

在IDE中创建项目

打开IDE，选择创建新的Spring Boot项目。
在新项目向导中，填写项目基本信息，如项目名、组织名等。
选择Spring Web依赖，创建REST API。
点击完成按钮，IDE会生成项目文件，并自动配置好Spring Boot相关依赖。

添加依赖与配置

在SpringBoot项目中，依赖管理主要通过pom.xml（对于Maven项目）或build.gradle（对于Gradle项目）来完成。

Maven项目

在pom.xml中，添加Spring Boot Starter Web依赖：

<project>
  <groupId>com.example</groupId>
  <artifactId>demo</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
  </dependencies>
</project>

Gradle项目

在build.gradle中，添加Spring Boot Starter Web依赖：

dependencies {
  implementation 'org.springframework.boot:spring-boot-starter-web'
}

简单的RESTful API示例

创建Controller

在src/main/java/com/example/demo目录下，创建一个名为HelloController.java的文件，定义一个简单的Controller：

package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

  @GetMapping("/hello")
  public String hello() {
    return "Hello, Spring Boot!";
  }
}

运行项目

确保Spring Boot项目的依赖已经下载完成。
在IDE中，运行Spring Boot应用，启动Spring Boot服务器。
打开浏览器，访问http://localhost:8080/hello，查看API的输出结果。

Vue3前端开发基础

创建Vue3项目

使用Vue CLI创建项目

打开命令行，确保已安装Vue CLI。
运行以下命令，创建一个名为vue3-app的Vue3项目：

vue create vue3-app

在项目创建过程中，选择默认配置，并选择Vue3作为预设版本。
进入项目目录 cd vue3-app 并运行 npm run serve 启动开发服务器。

运行项目

进入项目目录，运行 npm run serve 启动开发服务器。
打开浏览器，访问http://localhost:8080，查看Vue3项目的运行效果。

使用Vue CLI快速搭建环境

安装依赖

确保项目目录下运行以下命令，安装项目依赖：

npm install

启动开发服务器

运行以下命令，启动开发服务器：

npm run serve

构建生产环境

运行以下命令，构建生产环境：

npm run build

简单的组件和路由示例

创建组件

在src/components目录下，创建一个名为HelloWorld.vue的文件，定义一个简单的组件：

<template>
  <div class="hello">
    <h1>Hello Vue3!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello {
  color: #42b983;
}
</style>

使用组件

在src/App.vue中，引入并使用刚刚创建的HelloWorld组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

配置路由

在src/router/index.js中，配置路由：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route meta fields
    meta: { requiresAuth: true },
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

使用路由

在src/App.vue中，引入并使用路由：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

打通前后端

Vue3请求SpringBoot接口

在Vue3中发送请求

在Vue3项目中，可以通过axios或其他HTTP库来发送请求到Spring Boot后端。

安装axios：

npm install axios

在src/main.js中，引入并使用axios：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8080'

const app = createApp(App)

app.config.globalProperties.$http = axios

app.mount('#app')

在组件中使用axios发送请求：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: null
    }
  },
  created() {
    this.$http.get('/hello')
      .then(response => {
        this.message = response.data
      })
      .catch(error => {
        console.error("Error fetching data:", error)
      })
  }
}
</script>

SpringBoot响应Vue3请求

在Spring Boot后端中，需要确保暴露适当的API来响应前端请求。

修改HelloController.java，添加新的API：

package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

  @GetMapping("/hello")
  public String hello() {
    return "Hello, Spring Boot!";
  }

  @GetMapping("/greet")
  public String greet() {
    return "Hello, Vue3!";
  }
}

在前端组件中调用新的API：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: null
    }
  },
  created() {
    this.$http.get('/greet')
      .then(response => {
        this.message = response.data
      })
      .catch(error => {
        console.error("Error fetching data:", error)
      })
  }
}
</script>

资源整合与部署

静态资源的整合

静态资源访问

在Spring Boot项目中，静态资源默认放在src/main/resources/static目录下。Vue3构建后的静态资源文件通常放在dist目录下。

将Vue3构建后的文件复制到Spring Boot项目的src/main/resources/static目录中。
确保在Spring Boot的application.properties文件中正确配置静态资源路径：

spring.mvc.static-path-pattern=/static/**

在前端代码中引用静态资源文件，例如：

<link rel="stylesheet" href="/static/styles.css">

项目打包与部署

打包Vue3项目

在Vue3项目根目录下，运行以下命令打包项目：

npm run build

打包完成后，会在dist目录下生成静态文件。

部署到Tomcat或其他应用服务器

将打包后的静态文件复制到Spring Boot项目的src/main/resources/static目录下。
将整个Spring Boot项目打包为可执行的JAR或WAR文件。对于JAR文件，可以使用Maven或Gradle命令：

对于Maven：

mvn package

对于Gradle：

./gradlew build

将打包后的文件复制到Tomcat或其他应用服务器的webapps目录下，并启动应用服务器。

常见问题与调试技巧

常见错误及解决方法

CORS跨域问题

跨域资源共享（CORS）问题通常发生在前后端分离项目中，前端请求的来源与后端服务地址不一致。

解决方法

在Spring Boot应用中，可以通过添加CORS配置来解决跨域问题：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

  @Bean
  public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    CorsConfiguration config = new CorsConfiguration();
    config.setAllowCredentials(true);
    config.addAllowedOrigin("*");
    config.addAllowedHeader("*");
    config.addAllowedMethod("*");
    source.registerCorsConfiguration("/**", config);
    return new CorsFilter(source);
  }
}

JSON序列化问题

Spring Boot默认使用Jackson库进行JSON序列化，可能出现序列化不正确的情况。

解决方法

可以修改application.properties或application.yml文件，配置Jackson的行为：

spring.jackson.default-property-inclusion=non_null

Vue3打包问题

在打包Vue3项目时，可能会遇到路由重定向、依赖冲突等问题。

解决方法

确保打包前清除缓存：

npm run build -- --mode production -- --build-cache false

检查路由配置，确保所有路由都正确配置。

网络请求失败

在网络请求失败时，通常是因为请求地址错误、请求方法不匹配或服务端未启动等问题。

解决方法

检查请求URL是否正确。
检查请求参数是否正确。
检查后端服务是否正常启动。

调试技巧

使用Chrome开发者工具

在Vue3项目中，使用Chrome开发者工具可以方便地调试前端代码：

打开Chrome浏览器，访问Vue3项目的页面。
右键点击页面，选择“检查”或按快捷键 Ctrl+Shift+I 打开开发者工具。
转到“Sources”选项卡，可以查看和调试前端代码。
转到“Network”选项卡，可以查看网络请求的详细信息。

使用Spring Boot Actuator

Spring Boot Actuator提供了一系列管理端点，用于监控和管理应用程序：

添加Spring Boot Actuator依赖：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-actuator</artifactId>
</dependency>

访问http://localhost:8080/actuator，查看应用的运行时信息，如健康状态、应用信息等。

使用Postman测试API

Postman是一个强大的API测试工具，可以在开发期间频繁使用：

下载并安装Postman。
在Postman中创建一个新请求，设置请求方法和URL。
发送请求，查看响应结果。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

幕布斯6054654

手记
篇

粉丝

219

获赞与收藏

1011

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30787 345

网络编程入门教程

20个小节 12720 239

Pandas 入门教程

25个小节 18599 341

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Vue3+SpringBoot教程：快速入门指南

安装步骤

安装JDK和Maven

安装Node.js和npm

安装Vue CLI

创建SpringBoot项目

创建Vue3项目

创建SpringBoot项目

使用Spring Initializr创建项目

在IDE中创建项目

添加依赖与配置

Maven项目

Gradle项目

简单的RESTful API示例

创建Controller

运行项目

使用Vue CLI创建项目

运行项目

安装依赖

启动开发服务器

构建生产环境

创建组件

使用组件

配置路由

使用路由

在Vue3中发送请求

SpringBoot响应Vue3请求

静态资源访问

打包Vue3项目

部署到Tomcat或其他应用服务器

CORS跨域问题

解决方法

JSON序列化问题

解决方法

Vue3打包问题

解决方法

网络请求失败

解决方法

使用Chrome开发者工具

使用Spring Boot Actuator

使用Postman测试API

阅读免费教程