Vue3+SpringBoot资料入门教程

2024/11/19 0:03:09

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

概述

本文介绍了Vue3和SpringBoot的结合使用，解释了这两个技术的优势和互补性，并详细介绍了如何搭建和配置Vue3和SpringBoot环境。此外，文章还提供了Vue3与SpringBoot集成的具体实例，展示了从后端到前端的完整开发流程。文中涵盖了从项目创建、基础组件使用到数据交互的全过程，旨在帮助开发者快速掌握Vue3+SpringBoot资料。

引入Vue3和SpringBoot

简介Vue3和SpringBoot

Vue.js 是一个渐进式前端框架，它以简洁的语法和高效的性能著称。Vue3是Vue.js的最新版本，引入了Composition API，优化了响应式系统，提升了框架的灵活性和性能。Spring Boot 是一个基于Spring框架的简化开发工具，旨在简化创建独立的、生产级别的基于Spring的应用程序。它通过提供自动配置、约定优于配置的原则，简化了开发过程，使得开发者能够快速搭建起Web应用和微服务。Spring Boot的核心特性包括自动配置、基于注解的编程模型、内置的服务器和数据库支持等。

为什么选择Vue3和SpringBoot组合

Vue3和SpringBoot组合的优势在于它们能够很好地互补。Vue3负责处理前端的动态渲染和用户交互，而Spring Boot在后端提供了强大的支持，包括数据库操作、安全性和API的开发。这种组合为开发人员提供了一套完整的解决方案，能够快速地构建出稳定且高效的Web应用。此外，Vue3和SpringBoot都有强大的社区支持和丰富的资源，便于开发者快速上手和解决问题。

准备开发环境

  • 安装Node.js: Vue3项目需要Node.js环境来运行和构建。访问Node.js官网下载最新版本。
  • 安装Vue CLI: 使用npm全局安装Vue CLI: 
    npm install -g @vue/cli
  • 安装Java开发环境: Spring Boot项目需要Java环境。下载并安装最新的Java JDK。
  • 安装IDE: 推荐使用IntelliJ IDEA或Spring Tool Suite作为开发工具，这些IDE提供了强大的支持来开发Spring Boot项目。
  • 安装Maven或Gradle: Spring Boot支持Maven和Gradle作为构建工具。根据项目需要选择合适的构建工具。
  • 数据库: 本教程使用MySQL作为数据库。
快速搭建Vue3项目

创建Vue3项目

使用Vue CLI快速创建一个新的Vue3项目:

vue create my-vue3-project

进入项目文件夹并安装开发依赖：

cd my-vue3-project
npm install

介绍Vue3的基础组件

Vue3引入了许多新的特性，如Composition API、Teleport、Slots等。让我们看看一些基础组件的使用方法。

Vue3基础组件: Button

<template>
  <button @click="handleClick">点击我</button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

const handleClick = () => {
  count.value++;
  console.log('点击了按钮', count.value);
};
</script>

Vue3基础组件: Form表单

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="inputValue" />
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const inputValue = ref('');

const handleSubmit = () => {
  console.log('提交的内容', inputValue.value);
};
</script>

使用Vue CLI快速启动项目

在项目文件夹中运行以下命令来启动开发服务器:

npm run serve

这将启动一个本地开发服务器，在默认情况下，页面会自动打开在浏览器中。

快速搭建SpringBoot项目

创建SpringBoot项目

使用Spring Initializr创建一个新的Spring Boot项目。在Spring Initializr页面选择Spring Web、Spring Data JPA等依赖，并生成项目结构。

配置SpringBoot项目

<parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>2.5.4</version>
</parent>

<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
  </dependency>
  <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
  </dependency>
</dependencies>

介绍SpringBoot的基本使用

Spring Boot的启动类是项目的入口点，通常标记为@SpringBootApplication。

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }
}
Vue3与SpringBoot的集成

配置Vue3项目与SpringBoot后端交互

在Vue3项目中，我们需要配置axios来与Spring Boot后端进行交互。

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8080';
axios.defaults.headers.post['Content-Type'] = 'application/json';

使用axios进行数据请求

通过axios发送GET请求：

axios.get('/api/example')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

通过axios发送POST请求：

axios.post('/api/example', { data: 'example data' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

配置SpringBoot的Restful API

在Spring Boot应用中，使用@RestController和@RequestMapping注解来处理HTTP请求。

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

@RestController
@RequestMapping("/api")
public class ExampleController {

  @GetMapping("/example")
  public String getExample() {
    return "Hello, World!";
  }

  @PostMapping("/example")
  public String postExample(@RequestBody String request) {
    return "Received: " + request;
  }
}
实例演示

创建简单的CRUD应用

我们创建一个简单的CRUD应用，用于管理用户信息。

后端Spring Boot部分

  1. 创建实体类:
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 name;
  private String email;

  // Getters and Setters
}
  1. 创建Repository:
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {
}
  1. 创建Service:
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> findAllUsers() {
    return userRepository.findAll();
  }

  public User saveUser(User user) {
    return userRepository.save(user);
  }

  public User findUserById(Long id) {
    return userRepository.findById(id).orElse(null);
  }

  public void deleteUser(Long id) {
    userRepository.deleteById(id);
  }
}
  1. 创建Controller:
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

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

  @Autowired
  private UserService userService;

  @GetMapping
  public List<User> getAllUsers() {
    return userService.findAllUsers();
  }

  @PostMapping
  public User createUser(@RequestBody User user) {
    return userService.saveUser(user);
  }

  @GetMapping("/{id}")
  public User getUserById(@PathVariable Long id) {
    return userService.findUserById(id);
  }

  @PutMapping("/{id}")
  public User updateUser(@PathVariable Long id, @RequestBody User user) {
    user.setId(id);
    return userService.saveUser(user);
  }

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

前端Vue3部分

  1. 创建User Service:
import axios from 'axios';

export default class UserService {
  static async getAllUsers() {
    const response = await axios.get('/api/users');
    return response.data;
  }

  static async createUser(user) {
    const response = await axios.post('/api/users', user);
    return response.data;
  }

  static async getUserById(id) {
    const response = await axios.get(`/api/users/${id}`);
    return response.data;
  }

  static async updateUser(id, user) {
    const response = await axios.put(`/api/users/${id}`, user);
    return response.data;
  }

  static async deleteUser(id) {
    await axios.delete(`/api/users/${id}`);
  }
}
  1. 创建User List组件:
<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
        <button @click="deleteUser(user.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import UserService from '@/services/UserService.js';

export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    this.users = await UserService.getAllUsers();
  },
  methods: {
    async deleteUser(id) {
      await UserService.deleteUser(id);
      this.users = await UserService.getAllUsers();
    }
  }
};
</script>
  1. 创建User Form组件:
<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="user.name" placeholder="Name" />
    <input v-model="user.email" placeholder="Email" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import UserService from '@/services/UserService.js';

export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    async handleSubmit() {
      if (this.user.id) {
        await UserService.updateUser(this.user.id, this.user);
      } else {
        await UserService.createUser(this.user);
      }
      this.$router.push('/users');
    }
  }
};
</script>

数据展示与增删改查操作

展示数据

<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
        <button @click="editUser(user)">编辑</button>
        <button @click="deleteUser(user.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import UserService from '@/services/UserService.js';

export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    this.users = await UserService.getAllUsers();
  },
  methods: {
    async editUser(user) {
      this.$router.push(`/users/${user.id}/edit`);
    },
    async deleteUser(id) {
      await UserService.deleteUser(id);
      this.users = await UserService.getAllUsers();
    }
  }
};
</script>

增加数据

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="user.name" placeholder="Name" />
    <input v-model="user.email" placeholder="Email" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import UserService from '@/services/UserService.js';

export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    async handleSubmit() {
      const response = await UserService.createUser(this.user);
      this.$router.push(`/users/${response.id}`);
    }
  }
};
</script>

修改数据

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="user.name" placeholder="Name" />
    <input v-model="user.email" placeholder="Email" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import UserService from '@/services/UserService.js';

export default {
  data() {
    return {
      user: {
        id: null,
        name: '',
        email: ''
      }
    };
  },
  async created() {
    this.user = await UserService.getUserById(this.$route.params.id);
  },
  methods: {
    async handleSubmit() {
      await UserService.updateUser(this.user.id, this.user);
      this.$router.push('/users');
    }
  }
};
</script>

删除数据

<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
        <button @click="deleteUser(user.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import UserService from '@/services/UserService.js';

export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    this.users = await UserService.getAllUsers();
  },
  methods: {
    async deleteUser(id) {
      await UserService.deleteUser(id);
      this.users = await UserService.getAllUsers();
    }
  }
};
</script>

使用Vue3和SpringBoot搭建用户管理后台

实现一个完整的用户管理后台应用，包括用户列表、用户详情、用户编辑和用户删除等功能。

  1. 搭建前端页面:
<template>
  <div>
    <h2>用户列表</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
        <button @click="editUser(user)">编辑</button>
        <button @click="deleteUser(user.id)">删除</button>
      </li>
    </ul>
    <router-link to="/users/new">添加新用户</router-link>
  </div>
</template>

<script>
import UserService from '@/services/UserService.js';

export default {
  data() {
    return {
      users: []
    };
  },
  async created() {
    this.users = await UserService.getAllUsers();
  },
  methods: {
    async editUser(user) {
      this.$router.push(`/users/${user.id}/edit`);
    },
    async deleteUser(id) {
      await UserService.deleteUser(id);
      this.users = await UserService.getAllUsers();
    }
  }
};
</script>
<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="user.name" placeholder="Name" />
    <input v-model="user.email" placeholder="Email" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
import UserService from '@/services/UserService.js';

export default {
  data() {
    return {
      user: {
        id: null,
        name: '',
        email: ''
      }
    };
  },
  async created() {
    if (this.$route.params.id) {
      this.user = await UserService.getUserById(this.$route.params.id);
    }
  },
  methods: {
    async handleSubmit() {
      if (this.user.id) {
        await UserService.updateUser(this.user.id, this.user);
      } else {
        await UserService.createUser(this.user);
      }
      this.$router.push('/users');
    }
  }
};
</script>

后端部分

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

import java.util.List;

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

  @Autowired
  private UserService userService;

  @GetMapping
  public List<User> getAllUsers() {
    return userService.findAllUsers();
  }

  @PostMapping
  public User createUser(@RequestBody User user) {
    return userService.saveUser(user);
  }

  @GetMapping("/{id}")
  public User getUserById(@PathVariable Long id) {
    return userService.findUserById(id);
  }

  @PutMapping("/{id}")
  public User updateUser(@PathVariable Long id, @RequestBody User user) {
    user.setId(id);
    return userService.saveUser(user);
  }

  @DeleteMapping("/{id}")
  public void deleteUser(@PathVariable Long id) {
    userService.deleteUser(id);
  }
}
常见问题与解决方法

常见的开发问题

  1. Vue3项目构建失败:

    • 问题描述: 在构建Vue3项目时遇到错误，无法顺利打包。
    • 可能原因: 项目依赖的版本不兼容或配置文件存在错误。
    • 解决方法: 检查package.json中的依赖版本是否正确，修改vue.config.js中的配置项。
    • 解决方法细节:
      • 检查package.json: 确认所有依赖版本与项目文档一致。
      • 修改vue.config.js: 如果有自定义配置，确认配置文件格式和内容正确。
      • 清理缓存: 运行npm cache clean --force以清理缓存，然后重新安装依赖。

  2. SpringBoot项目启动失败:

    • 问题描述: Spring Boot项目启动时遇到各种错误，如数据库连接失败。
    • 可能原因: 数据库配置不正确、环境变量未设置等。
    • 解决方法: 检查应用的配置文件（如application.yml），确认数据库连接信息正确。
    • 解决方法细节:
      • 检查配置文件: 查看application.yml或application.properties中的配置，确认数据库连接信息正确。
      • 检查环境变量: 确认环境变量中的数据库连接信息是否正确设置。
      • 检查数据库服务: 确认数据库服务已经启动并正常运行。

  3. Vue3与SpringBoot交互问题:

    • 问题描述: 使用axios或其他库与Spring Boot后端进行交互时，请求失败。
    • 可能原因: 请求的URL格式错误或后端接口未正确配置。
    • 解决方法: 检查axios的配置，确保请求URL正确且后端接口已经启动并正确配置。
    • 解决方法细节:
      • 检查axios配置: 确保axios的配置正确，特别是baseURL的设置。
      • 检查后端接口: 使用Postman或者其他工具测试后端接口是否正常。
      • 调试日志: 查看控制台日志，检查请求和响应的详细信息。
  4. 代码错误处理:
    • 问题描述: 在开发过程中遇到各种运行时错误和编译错误。
    • 可能原因: 代码逻辑错误、类型不匹配等。
    • 解决方法: 使用IDE的调试工具进行调试，逐步排查代码逻辑，确保数据类型一致。
    • 解决方法细节:
      • 使用IDE调试工具: 使用IntelliJ IDEA或其它IDE的调试工具，一步步跟踪代码执行过程。
      • 代码审查: 仔细检查代码逻辑和数据类型，确保逻辑正确，类型匹配。
      • 单元测试: 编写单元测试，确保代码的各个部分正常工作。

网络资源推荐

  • 慕课网: 慕课网 提供丰富的前端、后端及全栈开发课程。
  • 菜鸟教程: 菜鸟教程 提供多种编程语言和技术的教程。
  • Stack Overflow: Stack Overflow 是一个强大的开发者社区，可以获取各种编程问题的解答。
  • GitHub: GitHub 是一个开源代码托管平台，可以找到许多开源项目和技术文档。

以上是使用Vue3和Spring Boot开发应用程序时的一些常见问题及其解决方案，希望这些内容能帮助你快速定位和解决开发过程中的问题。



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


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程