首页手记 Vue3+SpringBoot项目实战教程

Vue3+SpringBoot项目实战教程

标签：

Vue.js SpringBoot

概述

本文将详细介绍如何搭建和开发Vue3与SpringBoot项目，包括环境搭建、基础概念讲解、功能模块实现、项目优化与部署等内容。通过本文，读者可以掌握Vue3和SpringBoot项目实战的全过程，实现用户认证、数据展示和数据交互等功能模块。此外，还将介绍性能优化技巧、代码审查与调试以及项目打包和部署的方法。

项目环境搭建

开发环境准备

在开始开发Vue3与SpringBoot项目之前，需要确保开发环境已经搭建好。以下是所需工具和环境的准备步骤。

安装Node.js与npm

首先，访问Node.js官网（https://nodejs.org/），下载对应操作系统版本的Node.js。安装完成后，可以通过命令行输入`node -v和npm -v`来检查安装是否成功。

安装Java开发环境

访问Java官网（https://java.com/en/），下载对应的JDK版本。安装完成后，可以通过命令行输入`java -version和javac -version`来验证安装。

安装IDE

推荐使用 IntelliJ IDEA 或 Eclipse 进行开发，这两个IDE都支持Vue.js和SpringBoot项目。

创建项目目录

在本地创建一个项目目录，例如Vue3SpringBootProject，在该目录下，分别为前后端项目创建子目录，如vue3和springboot。

Vue3项目搭建

接下来，我们将使用Vue CLI来快速搭建Vue3项目。

安装Vue CLI

npm install -g @vue/cli

创建Vue3项目

vue create vue3

在创建过程中，可以选择预设模板或自定义配置。选择Manually select features，然后选择Vue 3作为目标版本。创建完成后，进入vue3目录并运行以下命令来安装必要的依赖：

cd vue3
npm install axios

配置Vue项目

为了确保Vue项目能够顺利运行，需要对vue.config.js进行一些配置。例如，如果你的项目需要使用HTTPS，可以添加以下配置：

module.exports = {
  devServer: {
    https: true,
  }
};

SpringBoot项目搭建

创建SpringBoot项目

使用Spring Initializr或者IntelliJ IDEA来创建SpringBoot项目。
选择Web、Thymeleaf（视情况选择）、Spring Boot DevTools、Spring Data JPA（视情况选择）、Spring Data REST等依赖。

添加依赖

<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>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-redis</artifactId>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
    </dependency>
</dependencies>

配置application.properties

spring.datasource.url=jdbc:mysql://localhost:3306/db_name
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect

基础概念讲解

Vue3简介与特性

Vue3引入了Composition API，这是一个用于编写可组合的函数式逻辑的API。Composition API提供了更灵活的组件逻辑组织方式，可以将相关逻辑组合在一起。同时，Vue3优化了渲染性能。

基本概念

响应式系统：Vue通过ref和reactive来创建响应式数据。
Composition API：利用setup函数来组织逻辑与状态。
watchEffect：用来监听响应式数据的变化，无需手动提供依赖。
computed：用于计算属性，简化模板中的逻辑。

代码示例

创建一个简单的Vue3组件，展示响应式数据和Composition API的使用。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, onMounted, watchEffect, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    onMounted(() => {
      console.log('Mounted');
    });

    watchEffect(() => {
      console.log('Count changed to:', count.value);
    });

    const doubleCount = computed(() => count.value * 2);

    return { count, increment, doubleCount };
  }
}
</script>

SpringBoot简介与特性

SpringBoot是Spring的一个简化版本，旨在简化配置并提高开发效率。SpringBoot通过约定优于配置的原则，使得开发人员可以快速搭建独立运行的Spring应用。

基本概念

自动配置：SpringBoot可以自动配置Spring应用，减少配置文件。
起步依赖：通过Spring Boot Starter，可以轻松引入依赖。
内嵌容器：Spring Boot可以内嵌Tomcat、Jetty、Undertow等Web容器。

代码示例

创建一个简单的Spring Boot应用，展示基本的控制器和响应。

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

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

@RestController
class HelloController {
  @GetMapping("/")
  public String hello() {
    return "Hello World";
  }
}

前后端交互基础

前后端交互是Web开发中不可或缺的部分。在Vue3中，我们通常使用Axios进行HTTP请求。在Spring Boot中，我们使用REST API进行数据交换。

前端请求

import axios from 'axios';

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

后端响应

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

@RestController
public class UserController {
  @GetMapping("/api/user")
  public ResponseEntity<String> getUser() {
    return ResponseEntity.ok("User details");
  }
}

功能模块实现

用户认证模块

用户认证是每个Web应用的基础。我们将实现一个简单的用户认证模块，包括用户登录、注册和权限控制。

用户注册

前端实现

<template>
  <div>
    <input type="text" v-model="username" placeholder="Username" />
    <input type="password" v-model="password" placeholder="Password" />
    <button @click="register">Register</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    register() {
      axios.post('/api/register', {
        username: this.username,
        password: this.password
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

后端实现

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {
  @PostMapping("/api/register")
  public ResponseEntity<String> register(@RequestBody User user) {
    // 实现用户注册逻辑
    return ResponseEntity.ok("User registered");
  }
}

用户登录

前端实现

<template>
  <div>
    <input type="text" v-model="username" placeholder="Username" />
    <input type="password" v-model="password" placeholder="Password" />
    <button @click="login">Login</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

后端实现

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {
  @PostMapping("/api/login")
  public ResponseEntity<String> login(@RequestBody User user) {
    // 实现用户登录逻辑
    return ResponseEntity.ok("User logged in");
  }
}

用户权限认证

前端实现

<template>
  <div>
    <input type="text" v-model="username" placeholder="Username" />
    <input type="password" v-model="password" placeholder="Password" />
    <button @click="checkPermissions">Check Permissions</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    checkPermissions() {
      axios.post('/api/check-permissions', {
        username: this.username,
        password: this.password
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

后端实现

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {
  @PostMapping("/api/check-permissions")
  public ResponseEntity<String> checkPermissions(@RequestBody User user) {
    // 实现权限检查逻辑
    return ResponseEntity.ok("User has permissions");
  }
}

错误处理

前端实现

<template>
  <div>
    <input type="text" v-model="username" placeholder="Username" />
    <input type="password" v-model="password" placeholder="Password" />
    <button @click="login">Login</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error('Login failed:', error.response.data.message);
      });
    }
  }
}
</script>

后端实现

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {
  @PostMapping("/api/login")
  public ResponseEntity<String> login(@RequestBody User user) {
    // 实现用户登录逻辑，处理错误
    try {
      // 登录逻辑
      return ResponseEntity.ok("User logged in");
    } catch (Exception e) {
      return ResponseEntity.status(401).body("Login failed: Invalid credentials");
    }
  }
}

数据展示模块

数据展示模块用于展示从后端获取的数据，通常以表格或者列表的形式呈现。

获取数据

前端实现

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

<script>
import axios from 'axios';

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

后端实现

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

@RestController
public class ItemController {
  @GetMapping("/api/items")
  public ResponseEntity<List<Item>> getItems() {
    // 实现获取数据逻辑
    List<Item> items = new ArrayList<>();
    // 初始化items
    return ResponseEntity.ok(items);
  }
}

数据交互模块

数据交互模块处理用户与后端交互的逻辑，通常涉及增删改查操作。

创建数据

前端实现

<template>
  <div>
    <input type="text" v-model="name" placeholder="Name" />
    <button @click="createItem">Create Item</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: ''
    };
  },
  methods: {
    createItem() {
      axios.post('/api/item', {
        name: this.name
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

后端实现

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ItemController {
  @PostMapping("/api/item")
  public ResponseEntity<Item> createItem(@RequestBody Item item) {
    // 实现创建数据逻辑
    return ResponseEntity.ok(item);
  }
}

更新数据

前端实现

<template>
  <div>
    <input type="text" v-model="name" placeholder="Name" />
    <button @click="updateItem">Update Item</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: ''
    };
  },
  methods: {
    updateItem() {
      axios.put('/api/item/1', {
        name: this.name
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

后端实现

import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ItemController {
  @PutMapping("/api/item/{id}")
  public ResponseEntity<Item> updateItem(@PathVariable int id, @RequestBody Item item) {
    // 实现更新数据逻辑
    return ResponseEntity.ok(item);
  }
}

删除数据

前端实现

<template>
  <div>
    <button @click="deleteItem">Delete Item</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    deleteItem() {
      axios.delete('/api/item/1').then(response => {
        console.log(response.data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
}
</script>

后端实现

import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ItemController {
  @DeleteMapping("/api/item/{id}")
  public ResponseEntity<String> deleteItem(@PathVariable int id) {
    // 实现删除数据逻辑
    return ResponseEntity.ok("Item deleted");
  }
}

项目优化与部署

性能优化技巧

前端优化

预加载资源（Preloading）：使用preload标签预加载重要的资源。
代码分割（Code Splitting）：通过Webpack的动态导入功能，将代码分割成多个小块，按需加载。
使用缓存策略：例如Service Worker或浏览器缓存。
压缩文件：使用Gzip或Brotli压缩资源。

后端优化

数据库索引：为常用查询字段创建索引，提高查询速度。
使用缓存：缓存热点数据，减少数据库访问。
优化SQL查询：避免全表扫描和复杂的查询。
使用异步处理：例如异步任务队列，减少响应时间。

代码审查与调试

前端代码审查

代码格式化：确保代码风格一致。
逻辑简洁：避免复杂的嵌套逻辑。
错误处理：确保所有网络请求都有错误处理逻辑。
组件化：遵循单一职责原则，组件粒度合适。

后端代码审查

代码风格：遵循一致的代码风格，如使用PEP8或Google Java Style。
依赖管理：确保依赖版本明确且最新的。
代码逻辑：逻辑清晰，避免复杂的嵌套逻辑。
安全性：确保代码中没有SQL注入等安全漏洞。
错误处理：所有异常都应被捕获并妥善处理。

调试技巧

使用Chrome DevTools进行前端调试。
使用Java IDE调试工具，如IntelliJ IDEA的调试工具。
打印日志：在代码的关键部分打印日志，帮助定位问题。
使用断点：在代码中设置断点，逐步检查变量值。

项目打包与部署

前端打包

使用npm run build命令打包Vue3项目。
打包后会生成dist目录，包含所有静态文件。

后端打包

使用Maven或Gradle打包Spring Boot项目。
打包后会生成一个可执行的.jar文件。

部署到服务器

前端部署

将打包后生成的静态文件上传到服务器的某个目录，如/var/www/html/dist。
配置Nginx或Apache服务器，将网站根目录指向该目录。
重启服务器，验证部署是否成功。

后端部署

将生成的.jar文件上传到服务器。
使用命令java -jar your-app.jar启动应用。
配置服务器端口，如使用8080。
检查应用日志，确保应用正常启动。

常见问题及解决

常见错误及解决方案

Vue3错误

TypeError: Cannot set property 'value' of undefined
- 解决方案：确保ref或reactive被正确使用，例如const count = ref(0)。

SpringBoot错误

Error starting ApplicationContext
- 解决方案：检查配置文件和依赖，确保没有配置冲突或缺失的依赖。
java.lang.NoSuchMethodError
- 解决方案：检查依赖版本，确保所有依赖版本兼容。

模块间联调问题

跨域问题

解决方案：在Spring Boot中配置CORS，允许特定的域名访问。
例如，在WebSecurityConfig中配置CORS。

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:8080");
}
}

前后端数据格式不匹配
- 解决方案：确保前后端数据格式一致，例如JSON格式。
- 检查前端请求和后端响应的数据结构，并进行相应调整。

环境配置问题

Spring Boot配置文件缺失
- 解决方案：确保项目中有application.properties或application.yml文件，并正确配置数据库连接等信息。
环境变量配置问题
- 解决方案：在开发和生产环境中分别配置不同的环境变量，确保应用能够正确读取。
- 例如，使用spring.profiles.active等属性来区分不同环境。

总结与展望

项目总结

通过本教程，我们已经完成了Vue3和SpringBoot项目的搭建、开发、优化和部署。项目包括了用户认证、数据展示和数据交互模块，并通过代码示例演示了各个模块的具体实现。我们还详细介绍了如何进行错误处理和模块间联调，确保项目在实际运行中能够稳定可靠。

学习心得与建议

持续学习：技术发展迅速，需要持续学习新知识和最佳实践。
关注社区：参与开源社区，了解最新技术和趋势。
动手实践：理论学习很重要，但实践更关键，多编写代码可以加深理解。

进阶学习方向

微前端：将不同的前端框架组合在一起，实现微前端架构。
微服务架构：学习如何将应用拆分成多个微服务，提高开发效率和可靠性。
云原生技术：熟悉容器化（如Docker）、Kubernetes和无服务器架构（如AWS Lambda）。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕神8447489

手记
篇

粉丝

174

获赞与收藏

957

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18643 345

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

Vue3+SpringBoot项目实战教程

安装Node.js与npm

安装Java开发环境

安装IDE

创建项目目录

安装Vue CLI

创建Vue3项目

配置Vue项目

创建SpringBoot项目

添加依赖

配置application.properties

基本概念

代码示例

基本概念

代码示例

前端请求

后端响应

用户注册

前端实现

后端实现

用户登录

前端实现

后端实现

用户权限认证

前端实现

后端实现

错误处理

前端实现

后端实现

获取数据

前端实现

后端实现

创建数据

前端实现

后端实现

更新数据

前端实现

后端实现

删除数据

前端实现

后端实现

前端优化

后端优化

前端代码审查

后端代码审查

调试技巧

前端打包

后端打包

部署到服务器

前端部署

后端部署

Vue3错误

SpringBoot错误

阅读免费教程