Spring Boot + Vue 全栈开发实战指南

m0_74822999

于 2025-01-21 00:03:45 发布

阅读量865

点赞数 22

分类专栏：面试学习路线阿里巴巴文章标签： spring boot vue.js 后端

本文链接：https://blog.youkuaiyun.com/m0_74822999/article/details/145271955

版权

面试同时被 3 个专栏收录

108 篇文章

订阅专栏

学习路线

107 篇文章

订阅专栏

阿里巴巴

81 篇文章

订阅专栏

引言

在当今的Web开发领域，全栈开发已经成为一种流行的趋势。全栈开发人员能够同时处理前端和后端的开发任务，从而提高开发效率并确保整个Web应用的一致性。Spring Boot和Vue.js是两个非常流行的框架，分别用于后端和前端开发。Spring Boot是一个基于Java的快速开发框架，它简化了Spring应用的搭建和配置过程。Vue.js是一个渐进式JavaScript框架，它专注于构建用户界面。在这篇博客中，我们将深入探讨如何使用Spring Boot和Vue.js进行全栈开发项目。

一、项目概述与技术选型

1.1 项目背景

随着互联网技术的发展，企业对于快速开发高质量Web应用的需求日益增长。Spring Boot以其轻量级、易配置、快速开发的特点，成为Java后端开发的首选框架。Vue.js以其响应式、组件化的特点，成为前端开发的热门选择。结合两者，我们可以构建出既高效又易维护的全栈应用。

1.2 技术选型

后端：Spring Boot，用于构建RESTful API。
数据库：MySQL，用于数据持久化。
前端：Vue.js，用于构建用户界面。
前端路由：Vue Router，用于前端路由管理。
状态管理：Vuex，用于前端状态管理。
构建工具：Webpack，用于前端资源打包。
版本控制：Git，用于代码版本控制。

二、项目搭建

Spring Boot项目初始化
- 首先，我们使用Spring Initializr来创建一个基本的Spring Boot项目。我们可以在https://start.spring.io/这个官方网站上进行操作。在创建项目时，我们可以选择项目的相关依赖，例如Web依赖（用于构建Web应用）、数据库相关依赖（如果项目需要与数据库交互）等。
- 假设我们的项目名为"my - full - stack - project"，创建完成后，我们可以将项目导入到我们喜欢的IDE（如IntelliJ IDEA或Eclipse）中。
- 在项目结构中，我们有一个主要的启动类，通常带有@SpringBootApplication注解。这个注解是一个组合注解，它包含了@Configuration、@EnableAutoConfiguration和@ComponentScan等注解，这些注解分别用于配置类的标识、自动配置的启用和组件扫描。
Vue项目初始化
- 要创建一个Vue项目，我们可以使用Vue CLI。首先确保已经安装了Node.js，然后在命令行中运行"npm install - g vue - cli"（全局安装Vue CLI）。
- 之后，我们使用"vue create my - vue - project"来创建一个新的Vue项目。在创建过程中，我们可以选择一些预设的模板，例如默认模板或者带有Router和Vuex的模板（如果我们的项目需要路由和状态管理）。
- 一旦创建完成，我们可以进入到Vue项目的目录中，使用"npm run serve"来启动一个本地开发服务器，在浏览器中查看初始的Vue应用。

三、Spring Boot后端开发

（一）项目初始化

创建Spring Boot项目
- 我们可以使用Spring Initializr（https://start.spring.io/）来快速创建一个Spring Boot项目。在创建项目时，我们可以选择所需的依赖，如Web、JPA（用于数据库访问）、MySQL驱动等。
- 例如，对于一个简单的博客系统，我们可能需要以下依赖：
  - Spring Web：用于构建Web应用的基本功能，如处理HTTP请求和响应。
  - Spring Data JPA：提供了一种简单的方式来与数据库进行交互，遵循面向对象的编程方式。
  - MySQL Driver：如果我们可以使用MySQL数据库。
项目结构
- 一个典型的Spring Boot项目结构包括：
  - src/main/java：存放Java源代码。
  - src/main/resources：存放配置文件、静态资源（如SQL脚本）等。
  - src/test/java：存放测试代码。

（二）数据库集成

配置数据库连接

在application.properties（或application.yml）文件中，我们可以配置数据库连接信息。例如，对于MySQL数据库：

如果使用application.properties：

spring.datasource.url = jdbc:mysql://localhost:3306/blog_db?useSSL = false&serverTimezone = UTC
spring.datasource.username = root
spring.datasource.password = password
spring.datasource.driver - class - name = com.mysql.cj.jdbc.Driver

如果使用application.yml：

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/blog_db?useSSL = false&serverTimezone = UTC
    username: root
    password: password
    driver - class - name: com.mysql.cj.jdbc.Driver

定义实体类
- 使用JPA，我们需要定义实体类来映射数据库表。例如，对于博客文章实体：
  
  import javax.persistence.Entity;
  import javax.persistence.GeneratedValue;
  import javax.persistence.GenerationType;
  import javax.persistence.Id;
  
  @Entity
  public class Article {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;
  private String title;
  private String content;
  // 省略getter和setter方法
  }
数据访问层（Repository）
- 我们可以创建一个接口来继承JpaRepository，它提供了基本的CRUD（创建、读取、更新、删除）操作方法。
  
  import org.springframework.data.jpa.repository.JpaRepository;
  
  public interface ArticleRepository extends JpaRepository<Article, Long> {}

（三）业务逻辑层（Service）

创建服务接口和实现类
- 首先定义服务接口，例如ArticleService：
  
  import java.util.List;
  
  public interface ArticleService {
  List
  
  getAllArticles();
  Article getArticleById(Long id);
  Article saveArticle(Article article);
  void deleteArticle(Long id);
  }
- 然后实现这个接口：
  
  import java.util.List;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.stereotype.Service;
  
  @Service
  public class ArticleServiceImpl implements ArticleService {
  @Autowired
  private ArticleRepository articleRepository;
```
@Override
public List<Article> getAllArticles() {
    return articleRepository.findAll();
}

@Override
public Article getArticleById(Long id) {
    return articleRepository.findById(id).orElse(null);
}

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

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

（四）控制层（Controller）

创建RESTful API控制器
- 控制器用于处理HTTP请求并返回相应的响应。例如：
  
  import java.util.List;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.web.bind.annotation.DeleteMapping;
  import org.springframework.web.bind.annotation.GetMapping;
  import org.springframework.web.bind.annotation.PathVariable;
  import org.springframework.web.bind.annotation.PostMapping;
  import org.springframework.web.bind.annotation.PutMapping;
  import org.springframework.web.bind.annotation.RequestBody;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RestController;
  
  @RestController

@RequestMapping(“/articles”) public class ArticleController { @Autowired private ArticleService articleService;

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

   @GetMapping("/{id}")
   public Article getArticleById(@PathVariable Long id) {
       return articleService.getArticleById(id);
   }

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

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

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

}

## 三、Vue.js前端开发

### （一）项目初始化
1. **创建Vue项目**
- 我们可以使用Vue CLI（https://cli.vuejs.org/）来创建一个Vue项目。在命令行中执行`vue create blog - front - end`（假设项目名为`blog - front - end`）。
- 在创建过程中，我们可以选择一些预设，如默认预设（包含Babel和ESLint）或者手动选择所需的功能。
2. **项目结构**
- 一个Vue项目的结构通常包括：
  - `src`：存放主要的源代码。
    - `components`：存放Vue组件。
    - `views`：存放页面组件。
    - `router`：存放路由相关的代码。
    - `store`：如果使用Vuex进行状态管理，这里存放相关代码。
  - `public`：存放公共资源，如`index.html`文件。

### （二）组件开发
1. **创建基础组件**
- 例如，创建一个文章列表组件`ArticleList.vue`。
```html
<template>
  <div>
    <ul>
      <li v - for = "article in articles" :key = "article.id">
        <h3>{{article.title}}</h3>
        <p>{{article.content.substring(0, 100)}}...</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articles: []
    };
  },
  methods: {
    async fetchArticles() {
      try {
        const response = await fetch('http://localhost:8080/articles');
        this.articles = await response.json();
      } catch (error) {
        console.error('Error fetching articles:', error);
      }
    }
  },
  mounted() {
    this.fetchArticles();
  }
};
</script>

创建页面组件
- 例如，创建一个文章详情页面组件ArticleDetail.vue。
  
  {{article.title}}
  
  {{article.content}}

（五）路由配置

如果我们的Vue项目有多个页面或者视图，我们需要使用Vue Router来管理路由。我们可以在创建Vue项目时选择带有Router的模板。

定义路由
- 在router/index.js文件中，我们可以定义路由。
  
  import Vue from ‘vue’;
  import Router from ‘vue - router’;
  import ArticleList from ‘@/components/ArticleList.vue’;
  import ArticleDetail from ‘@/components/ArticleDetail.vue’;
  
  Vue.use(Router);
  
  export default new Router({
  routes: [
  {
  path: ‘/’,
  name: ‘ArticleList’,
  component: ArticleList
  },
  {
  path: ‘/article/:id’,
  name: ‘ArticleDetail’,
  component: ArticleDetail
  component: ArticleDetail
  }
  ]
  });

（六）状态管理（可选，如果使用Vuex）

创建Vuex store
- 如果我们的应用需要管理全局状态，例如用户登录状态、全局配置等，我们可以使用Vuex。
- 首先，安装Vuex：npm install vuex --save。
- 然后，在store/index.js文件中创建store。
  
  import Vue from ‘vue’;
  import Vuex from ‘vuex’;
  
  Vue.use(Vuex);
  
  const store = new Vuex.Store({
  state: {
  user: null
  },
  mutations: {
  setUser(state, user) {
  state.user = user;
  }
  },
  actions: {
  login({commit}, user) {
  // 这里可以添加实际的登录逻辑，如调用后端API
  commit(‘setUser’, user);
  }
  }
  });
  
  export default store;

四、前后端交互

（一）跨域问题

理解跨域
- 当我们的前端应用（运行在不同的端口，如http://localhost:8081）访问后端API（如http://localhost:8080/articles）时，会遇到跨域问题。这是因为浏览器的同源策略限制。
解决跨域问题（后端）
- 在Spring Boot中，我们可以使用@CrossOrigin注解来解决跨域问题。例如，在ArticleController类上添加@CrossOrigin注解：
  
  import org.springframework.web.bind.annotation.CrossOrigin;
  import org.springframework.web.bind.annotation.RestController;
  
  @CrossOrigin
  @RestController

@RequestMapping(“/articles”) public class ArticleController { // 省略控制器方法 }

### （二）数据传输
1. **JSON数据格式**
- 前后端之间的数据传输通常使用JSON格式。在Spring Boot中，当我们返回一个对象或对象列表时，Spring会自动将其转换为JSON格式。在Vue.js中，我们可以使用`fetch` API或者`axios`（一个流行的HTTP客户端库）来发送和接收JSON数据。
- 例如，在Vue.js中使用`axios`发送POST请求来创建一篇新文章：
```javascript
import axios from 'axios';

const article = {title: 'New Article', content: 'This is a new article content'};

axios.post('http://localhost:8080/articles', article)
 .then(response => {
    console.log('Article created successfully:', response.data);
  })
 .catch(error => {
    console.error('Error creating article:', error);
  });

五、部署

（一）后端部署

构建可执行JAR文件
- 在Spring Boot项目中，我们可以使用mvn clean package（如果使用Maven）或者gradlew build（如果使用Gradle）来构建一个可执行的JAR文件。
- 然后，我们可以将这个JAR文件部署到服务器上，如在Linux服务器上使用java -jar blog - back - end.jar来运行应用（假设JAR文件名为blog - back - end.jar）。
数据库部署（如果需要）
- 如果我们使用的是MySQL数据库，我们需要在服务器上安装和配置MySQL数据库。我们可以使用数据库管理工具（如phpMyAdmin或者命令行工具）来创建数据库和表结构。

（二）前端部署

构建生产版本
- 在Vue项目中，我们可以使用npm run build命令来构建一个生产版本的应用。这个命令会生成一个dist目录，里面包含了优化后的HTML、CSS和JavaScript文件。
部署到服务器或CDN
- 我们可以将dist目录中的文件部署到Web服务器（如Nginx或者Apache）上，或者上传到CDN（内容分发网络）来提高应用的加载速度。

六、项目优化

（一）后端优化

缓存机制
- 在Spring Boot中，我们可以使用缓存来提高性能。例如，使用@Cacheable注解来缓存方法的返回结果。
  
  import org.springframework.cache.annotation.Cacheable;
  
  @Service
  public class ArticleServiceImpl implements ArticleService {
  @Autowired
  private ArticleRepository articleRepository;
```
@Override
@Cacheable("articles")
public List<Article> getAllArticles() {
    return articleRepository.findAll();
}
// 省略其他方法
```
  }
性能监控与调优
- 在Spring Boot项目中，我们可以优化数据库查询，例如使用缓存来减少重复查询。我们可以使用Spring Cache框架，通过在方法上添加缓存注解来实现缓存功能。
- 在Vue项目中，我们可以优化组件的渲染性能。例如，使用v - if和v - show指令来控制组件的显示和隐藏，避免不必要的组件渲染。我们还可以对Vue项目进行代码压缩和优化，在构建生产版本时，使用Webpack的相关插件来进行优化。

（二）前端优化

代码压缩与混淆
- 在构建生产版本时，Vue.js的构建工具会自动对代码进行压缩和混淆，减少文件大小，提高加载速度。
懒加载组件
- 对于大型应用，我们可以使用懒加载组件来减少初始加载时间。例如，在路由配置中：
  
  const ArticleDetail = () => import(‘@/components/ArticleDetail.vue’);
  
  const router = new Router({
  routes: [
  {
  path: ‘/article/:id’,
  name: ‘ArticleDetail’,
  component: ArticleDetail
  }
  ]
  });

七、测试

（一）后端测试

单元测试
- 在Spring Boot项目中，我们可以使用JUnit等测试框架来进行单元测试。例如，对ArticleService进行单元测试：
  
  import org.junit.jupiter.api.Test;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.boot.test.context.SpringBootTest;
  
  import static org.junit.jupiter.api.Assertions.*;
  
  @SpringBootTest
  public class ArticleServiceTest {
  @Autowired
  private ArticleService articleService;
```
@Test
public void testGetAllArticles() {
    assertNotNull(articleService.getAllArticles());
}
// 省略其他测试方法
```
  }
集成测试
- 我们可以使用Spring Boot提供的测试工具来进行集成测试，测试整个业务流程，如从控制器到服务层再到数据访问层的交互。

（二）前端测试

单元测试
- 在Vue.js项目中，我们可以使用Jest或者Vue Test Utils来进行单元测试。例如，对ArticleList.vue组件进行单元测试：
  
  import {shallowMount} from ‘@vue/test - utils’;
  import ArticleList from ‘@/components/ArticleList.vue’;
  
  describe(‘ArticleList.vue’, () => {
  it(‘should fetch articles on mount’, async () => {
  const wrapper = shallowMount(ArticleList);
  await wrapper.vm.$nextTick();
  expect(wrapper.vm.articles.length).toBeGreaterThan(0);
  });
  });
端到端测试
- 我们可以使用Cypress或者Nightwatch等工具来进行端到端测试，模拟用户在浏览器中的操作，测试整个应用的功能。

八、总结

在这篇博客中，我们详细探讨了如何使用Spring Boot和Vue.js进行全栈开发项目。从后端的Spring Boot项目搭建、数据库集成、业务逻辑处理到前端的Vue.js项目初始化、组件开发、路由配置等方面都进行了深入的讲解。同时，我们也涉及了前后端交互中的跨域问题解决、数据传输，项目的部署、优化以及测试等重要环节。通过掌握这些知识和技术，开发人员能够构建出高效、稳定、功能。这个组合为开发功能强大、用户体验良好的Web应用提供了一种高效的解决方案。当然，在实际的项目开发中，我们还会遇到各种各样的挑战，需要不断学习和探索新的技术和方法来提升项目的质量和效率。