Vue3+SpringBoot教程：新手入门指南

本文主要是介绍Vue3+SpringBoot教程：新手入门指南，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本文提供了详细的Vue3+SpringBoot教程，涵盖环境搭建、前端后端开发基础及实战项目等内容。从项目创建到数据库集成，再到前后端交互，全面指导读者实现一个简单的用户管理系统。文章还涉及代码优化与性能提升的技巧，并推荐了丰富的学习资源和技术社区。

项目简介与环境搭建

介绍Vue3和SpringBoot

Vue.js 是一个渐进式的前端框架，易于上手，灵活且高效，在性能上表现优异。Vue3在Vue.js的基础上全面升级，引入了Composition API、更小的体积、更好的TypeScript支持等新特性。Spring Boot 是一个基于Spring框架的开发平台，简化了Java应用的开发、部署和运行过程，通过约定优于配置的方式，使得开发人员可以快速构建生产级别的应用程序。

环境配置与安装

要开始开发，首先确保安装了以下软件：

Node.js（Vue3需要Node.js环境）
Java开发工具包（JDK）
Spring Boot 开发工具（例如Spring Initializr等）

安装Node.js

可以通过官方网站下载安装包或使用包管理器安装Node.js：

# 使用npm安装Node.js
curl -sL https://raw.githubusercontent.com/tj/n/master/bin/n-install.sh | sh
n latest

安装Java开发工具包

在官网下载相应版本的JDK并安装，或者使用包管理器安装：

# 在Ubuntu上使用apt安装
sudo apt-get update
sudo apt-get install openjdk-11-jdk

安装Spring Boot开发工具

推荐使用Spring Initializr来快速搭建Spring Boot项目：

# 使用Maven创建Spring Boot项目
mvn archetype:generate -DgroupId=com.example -DartifactId=springbootdemo -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
cd springbootdemo

创建项目及目录结构

创建一个名为vue3-springboot的文件夹，使用命令行工具进入该文件夹。使用Vue CLI和Spring Boot命令分别创建前端和后端项目。

创建Vue3项目

# 使用Vue CLI创建Vue3项目
vue create vue3
cd vue3
npm install axios

创建Spring Boot项目

# 使用Spring Initializr创建Spring Boot项目
mvn archetype:generate -DgroupId=com.example -DartifactId=springboot -DarchetypeArtifactId=maven-archetype-quickstart -DinteractiveMode=false
cd springboot

项目目录结构如下：

vue3-springboot
|-- frontend
|   |-- vue3
|-- backend
|   |-- springboot
|-- README.md

SpringBoot后端开发基础

创建SpringBoot项目

在Spring Boot项目中，首先需要添加必要的依赖。打开pom.xml文件并添加Spring Boot Starter Web和Thymeleaf依赖：

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

实现简单的RESTful API

在Spring Boot中，可以通过创建一个简单的Controller类来实现RESTful 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, World!";
    }
}

数据库集成与操作

在Spring Boot中，可以使用Spring Data JPA来操作数据库。首先在pom.xml文件中添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
    <groupId>com.h2database</groupId>
    <artifactId>h2</artifactId>
    <scope>runtime</scope>
</dependency>

在application.properties文件中配置数据库：

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.h2.console.enabled=true
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

创建一个User实体类：

package com.example.demo;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long id;
    private String name;
    private String email;

    // Getter and Setter methods
}

创建一个UserRepository接口：

package com.example.demo;

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {
}

创建一个UserController类来处理用户相关的API请求：

package com.example.demo;

import org.springframework.web.bind.annotation.*;

import java.util.List;

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

    private final UserRepository userRepository;

    public UserController(UserRepository userRepository) {
        this.userRepository = userRepository;
    }

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

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

    @GetMapping("/{id}")
    public User getUserById(@PathVariable Long id) {
        return userRepository.findById(id)
                .orElseThrow(() -> new ResourceNotFoundException("User not found"));
    }

    @PutMapping("/{id}")
    public User updateUser(@PathVariable Long id, @RequestBody User user) {
        return userRepository.findById(id)
                .map(userEntity -> {
                    userEntity.setName(user.getName());
                    userEntity.setEmail(user.getEmail());
                    return userRepository.save(userEntity);
                })
                .orElseThrow(() -> new ResourceNotFoundException("User not found"));
    }

    @DeleteMapping("/{id}")
    public void deleteUser(@PathVariable Long id) {
        userRepository.deleteById(id);
    }
}

Vue3前端开发基础

创建Vue3项目

使用Vue CLI创建Vue3项目后，配置路由和组件。

配置路由

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

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user',
    name: 'User',
    component: User
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

组件与路由的基本使用

在src/views/Home.vue中创建主页组件：

<template>
  <div class="home">
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>
/* Add your styles here */
</style>

在src/views/User.vue中创建用户组件：

<template>
  <div class="user">
    <h1>User Page</h1>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

<style scoped>
/* Add your styles here */
</style>

数据绑定与事件处理

在Vue3中，使用v-model实现双向数据绑定，使用v-on监听事件。

<template>
  <div>
    <input v-model="message" placeholder="Enter a message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

<template>
  <div>
    <button @click="greet">Say Hello</button>
  </div>
</template>

<script>
export default {
  methods: {
    greet() {
      alert('Hello!')
    }
  }
}
</script>

前后端交互

Axios集成与使用

在Vue3项目中安装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'

createApp(App).use(router).mount('#app')

在组件中使用Axios调用后端API：

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  async created() {
    const response = await axios.get('/users')
    this.users = response.data
  }
}
</script>

后端API调用及数据展示

在Spring Boot项目的UserController中，实现用户列表API：

@GetMapping("/users")
public List<User> getAllUsers() {
    return userRepository.findAll();
}

在Vue3项目中，调用该API展示用户列表：

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  async created() {
    const response = await axios.get('/users')
    this.users = response.data
  }
}
</script>

跨域问题处理

在Spring Boot项目中，添加Cors配置：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:808 bourbon

这篇关于Vue3+SpringBoot教程：新手入门指南的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程