Java教程

Vue3+SpringBoot资料入门教程

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

本文详细介绍了Vue3与SpringBoot的基础入门知识，包括Vue3的快速上手和SpringBoot的快速搭建，提供了丰富的示例代码和项目实战指导。此外，文章还涵盖了Vue3与SpringBoot项目的环境搭建及交互方式，帮助读者全面掌握Vue3+SpringBoot资料。

Vue3基础入门

Vue3简介

Vue.js 是一个渐进的 JavaScript 框架，它允许开发者构建交互式的 Web 应用程序。Vue3 是 Vue.js 的最新版本，提供了更快的渲染性能、更小的包体积、新的组合式 API 和更好的 TypeScript 支持等新特性。

Vue3的主要特性

  • 更高效的渲染机制
  • 完全响应的数据模型
  • 组件化开发
  • 插槽和作用域插槽
  • 组合式 API

Vue3快速上手

要快速上手 Vue3，首先需要安装 Vue CLI（命令行工具）。通过 Vue CLI 可以快速创建和管理 Vue 项目。

  1. 安装 Vue CLI

    npm install -g @vue/cli

  2. 创建一个新的 Vue 项目

    vue create my-project

  3. 选择 Vue3 版本

    在创建项目时，可以选择已安装的模板，或者手动配置，确保选择 Vue3 版本。

Vue3项目结构介绍

一个标准的 Vue3 项目通常包含以下目录和文件：

  • public/：存放静态资源，如 index.html，这些文件会被直接复制到构建输出的根目录。
  • src/：存放应用的源代码。
    • assets/：存放静态资源文件，如图片、字体等。
    • components/：存放 Vue 组件。
    • views/：存放视图组件。
      .
  • App.vue：应用的主组件。
  • main.js：应用的入口文件，负责启动应用。
  • router/：存放路由配置。
  • package.json：存放项目的依赖和脚本命令。
  • README.md：项目说明文档。

示例代码

// main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

// App.vue
<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue3'
    };
  }
}
</script>
SpringBoot基础入门

SpringBoot简介

Spring Boot 是一个构建在 Spring 框架上的轻量级框架，它简化了传统的 Spring 应用程序开发流程。Spring Boot 的主要目标是减少开发、配置以及依赖管理的复杂性。

SpringBoot快速搭建

  1. 创建一个新的 Spring Boot project

    可以使用 Spring Initializr（在线工具）或 Spring Boot CLI 创建一个新的 Spring Boot 项目。

  2. 添加必要的依赖

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

  3. 主应用类

    创建一个主应用类，使用 @SpringBootApplication 注解标记。

    @SpringBootApplication
public class Application {
   public static void main(String[] args) {
       SpringApplication.run(Application.class, args);
   }
}

SpringBoot项目结构介绍

一个标准的 Spring Boot 项目通常包含以下目录和文件：

  • src/main/java/：存放 Java 类文件。
    • com/example/：存放包结构。
    • Application.java：主应用类。
  • src/main/resources/：存放资源文件。
    • application.properties：应用配置文件。
    • static/：存放静态资源文件。
    • templates/：存放模板文件。
  • pom.xml：存放项目的依赖和构建配置。
  • README.md：项目说明文档。

示例代码

// Application.java
package com.example.demo;

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

// 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";
    }
}
Vue3与SpringBoot环境搭建

开发环境准备

要搭建 Vue3 与 Spring Boot 开发环境，需要安装以下工具：

  • Node.js：Vue3 的运行依赖。
  • Java Development Kit (JDK)：Spring Boot 的运行依赖。
  • IDE：如 IntelliJ IDEA 或 Eclipse。
  • Vue CLI 和 Spring Boot CLI：用于快速创建和管理项目。

构建Vue3项目

  1. 安装 Vue CLI

    npm install -g @vue/cli

  2. 创建一个新的 Vue 项目

    vue create my-vue-app

  3. 选择 Vue3 版本

    创建项目时，确保选择 Vue3 版本。

构建SpringBoot项目

  1. 创建一个新的 Spring Boot 项目

    使用 Spring Initializr 创建一个新的 Spring Boot 项目。

  2. 添加必要的依赖

    在 pom.xml 文件中添加必要的依赖，如 spring-boot-starter-web。

  3. 构建项目

    使用 Maven 或 Gradle 构建项目。

示例代码

# 创建 Vue 项目
vue create my-vue-app
cd my-vue-app
npm run serve
<!-- pom.xml -->
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>
Vue3与SpringBoot交互基础

前后端交互方式介绍

前后端交互方式主要包括：

  • RESTful API：前后端通过 HTTP 协议进行数据交换。
  • WebSocket：实时双向通信。
  • GraphQL：灵活的数据查询。

使用RESTful API进行数据交互

RESTful API 是最常见的前后端交互方式。前端通过 HTTP 请求（如 GET、POST、PUT、DELETE）与后端进行数据交换。

使用axios发送请求

axios 是一个流行的 HTTP 客户端，可以用于发送 HTTP 请求。以下是一个使用 axios 发送 GET 请求的示例：

示例代码

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

createApp(App).mount('#app');

// App.vue
<template>
  <div id="app">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue3'
    };
  },
  methods: {
    async fetchMessage() {
      const response = await axios.get('http://localhost:8080/hello');
      this.message = response.data;
    }
  },
  created() {
    this.fetchMessage();
  }
}
</script>
// 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";
    }
}
Vue3与SpringBoot项目实战

实战项目选题

假设我们要开发一个简单的博客应用，前端使用 Vue3，后端使用 Spring Boot。博客应用需要支持添加新文章、查看文章列表、编辑和删除文章等功能。

项目需求分析

前端需求：

  • 用户界面：展示文章列表、文章详情、添加文章、编辑文章、删除文章。
  • 数据交互：发送 HTTP 请求与后端进行数据交互。

后端需求：

  • 文章管理：支持添加、查询、编辑和删除文章。
  • 数据存储：使用数据库存储文章数据。

分步实现项目功能

  1. 后端实现

    • 创建文章表结构

      CREATE TABLE article (
id BIGINT PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(255) NOT NULL,
content TEXT NOT NULL,
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);

    • 实现添加、查询、编辑和删除文章的接口

      // ArticleController.java
package com.example.demo.controller;

import com.example.demo.model.Article;
import com.example.demo.service.ArticleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/articles")
public class ArticleController {

 @Autowired
 private ArticleService articleService;

 @GetMapping
 public List<Article> getArticles() {
     return articleService.getAllArticles();
 }

 @PostMapping
 public Article addArticle(@RequestBody Article article) {
     return articleService.saveArticle(article);
 }

 @PutMapping("/{id}")
 public Article updateArticle(@PathVariable("id") Long id, @RequestBody Article article) {
     article.setId(id);
     return articleService.saveArticle(article);
 }

 @DeleteMapping("/{id}")
 public void deleteArticle(@PathVariable("id") Long id) {
     articleService.deleteArticle(id);
 }
}

// ArticleService.java
package com.example.demo.service;

import com.example.demo.model.Article;
import com.example.demo.repository.ArticleRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ArticleService {

 @Autowired
 private ArticleRepository articleRepository;

 public List<Article> getAllArticles() {
     return articleRepository.findAll();
 }

 public Article saveArticle(Article article) {
     return articleRepository.save(article);
 }

 public void deleteArticle(Long id) {
     articleRepository.deleteById(id);
 }
}

// ArticleRepository.java
package com.example.demo.repository;

import com.example.demo.model.Article;
import org.springframework.data.jpa.repository.JpaRepository;

public interface ArticleRepository extends JpaRepository<Article, Long> {
}

  2. 前端实现

    • 创建文章列表页面

      // ArticleList.vue
<template>
<div>
 <h2>文章列表</h2>
 <ul>
   <li v-for="article in articles" :key="article.id">
     {{ article.title }}
   </li>
 </ul>
</div>
</template>

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

    • 创建文章详情页面

      // ArticleDetail.vue
<template>
<div>
 <h2>{{ article.title }}</h2>
 <p>{{ article.content }}</p>
 <button @click="handleDelete">删除文章</button>
</div>
</template>

<script>
export default {
data() {
 return {
   article: {}
 };
},
created() {
 this.fetchArticle();
},
methods: {
 async fetchArticle() {
   const response = await axios.get(`articles/${this.$route.params.id}`);
   this.article = response.data;
 },
 async handleDelete() {
   await axios.delete(`articles/${this.$route.params.id}`);
   this.$router.push('/articles');
 }
}
}
</script>

    • 创建文章编辑页面

      // ArticleEdit.vue
<template>
<div>
 <h2>编辑文章</h2>
 <form @submit.prevent="handleSubmit">
   <input v-model="article.title" placeholder="标题" />
   <textarea v-model="article.content" placeholder="内容"></textarea>
   <button type="submit">保存</button>
 </form>
</div>
</template>

<script>
export default {
data() {
 return {
   article: {
     id: this.$route.params.id,
     title: '',
     content: ''
   }
 };
},
created() {
 this.fetchArticle();
},
methods: {
 async fetchArticle() {
   const response = await axios.get(`articles/${this.$route.params.id}`);
   this.article = response.data;
 },
 async handleSubmit() {
   await axios.put(`articles/${this.article.id}`, this.article);
   this.$router.push('/articles');
 }
}
}
</script>
常见问题及解决方法

常见开发问题

  1. Vue3 与 Spring Boot 间数据交互问题
    • 数据格式不一致
    • 后端接口未正确实现
  2. Vue3 项目构建问题
    • 依赖安装失败
    • 项目启动失败
  3. Spring Boot 项目构建问题
    • 依赖版本冲突
    • 应用启动失败

解决方案与技巧分享

  1. 数据交互问题

    • 数据格式不一致：确保前后端数据格式一致。前端请求和后端返回的数据格式应保持一致。
    • 后端接口未正确实现：确保后端接口实现正确。检查接口路径、请求方法和返回数据。

  2. Vue3 项目构建问题

    • 依赖安装失败：检查网络连接，确保依赖仓库可用。使用 npm install 或 yarn install 安装依赖。
    • 项目启动失败：检查项目配置文件，确保没有语法错误。使用 npm run serve 启动项目。

  3. Spring Boot 项目构建问题

    • 依赖版本冲突：检查 pom.xml 或 build.gradle 文件，确保依赖版本一致。
    • 应用启动失败：检查日志输出，定位具体错误。使用 mvn spring-boot:run 或 gradle bootRun 启动应用。

示例代码

解决数据格式问题

// 请求数据格式
{
  "title": "Vue3与SpringBoot教程",
  "content": "这是一个教程"
}

// 响应数据格式
{
  "id": 1,
  "title": "Vue3与SpringBoot教程",
  "content": "这是一个教程",
  "created_at": "2023-10-01T12:00:00Z"
}

解决项目启动失败问题

# 检查配置文件
cat src/main/resources/application.properties

# 启动项目
mvn spring-boot:run

以上是 Vue3 与 Spring Boot 入门教程的详细内容，希望对你有所帮助。如果你有任何疑问或需要进一步的帮助，请参考慕课网的相关课程。

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