如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用

随着前后端分离架构的流行，开发一个既高效又易于维护的项目框架变得越来越重要。Spring Boot 作为后端开发的首选框架之一，配合 Ant Design Pro Vue 这样一个现代化的前端 UI 框架，可以快速构建出美观且功能强大的应用。本文将通过一个具体的案例来介绍如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，帮助你快速搭建一个前后端分离的应用框架。

准备工作

首先，确保你的开发环境中已经安装了 Node.js、NPM、Java 开发工具（如 IntelliJ IDEA 或 Eclipse）以及 Spring Boot。

创建 Spring Boot 项目

1. 初始化 Spring Boot 项目:

   • 使用 Spring Initializr 创建一个新的 Spring Boot 项目，包含 Web 和 Security 依赖。
   • 项目结构如下所示：

     spring-boot-ant-design-pro-vue
     ├── src
     │   ├── main
     │   │   ├── java
     │   │   │   └── com.example.demo
     │   │   │       └── DemoApplication.java
     │   │   └── resources
     │   │       ├── application.properties
     │   │       └── static
     │   └── test
     │       └── java
     └── pom.xml
     

2. 添加相关依赖:

   • 在 pom.xml 文件中添加 Spring Security 和 Thymeleaf 依赖（用于渲染错误页面）：

     <dependencies>
         <!-- Spring Web -->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
     
         <!-- Spring Security -->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-security</artifactId>
         </dependency>
     
         <!-- Thymeleaf for error pages -->
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-thymeleaf</artifactId>
         </dependency>
     </dependencies>
     

配置 Spring Security

1. 创建 Security 配置类:

   • 在 com.example.demo 包下创建 SecurityConfig.java 类：

     package com.example.demo;
     
     import org.springframework.context.annotation.Configuration;
     import org.springframework.security.config.annotation.web.builders.HttpSecurity;
     import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
     
     @Configuration
     public class SecurityConfig extends WebSecurityConfigurerAdapter {
            
     
         @Override
         protected void configure(HttpSecurity http) throws Exception {
            
             http
                 .authorizeRequests()
                     .antMatchers("/api/**").authenticated()
                     .anyRequest().permitAll()
                     .and()
                 .formLogin().disable()
                 .httpBasic();
         }
     }
     

创建后端 API

1. 创建 Controller:

   • 在 com.example.demo 包下创建 MenuController.java 类：

     package com.example.demo;
     
     import org.springframework.web.bind.annotation.GetMapping;
     import org.springframework.web.bind.annotation.RestController;
     
     import java.util.List;
     import java.util.stream.Collectors;
     import java.util.stream.IntStream;
     
     @RestController
     public class MenuController {
            
     
         @GetMapping("/api/menus")
         public List<MenuDto> getMenus() {
            
             return IntStream.rangeClosed(1, 5)
                 .mapToObj(i -> new MenuDto("Menu " + i, "/menu" + i))
                 .collect(Collectors.toList());
         }
     }
     
     class MenuDto {
            
         private final String title;
         private final String path;
     
         public MenuDto(String title, String path) {
            
             this.title = title;
             this.path = path;
         }
     
         public String getTitle() {
            
             return title;
         }
     
         public String getPath() {
            
             return path;
         }
     }
     

前端部分

1. 创建 Ant Design Pro Vue 项目:

   • 使用官方脚手架创建项目：

     npm install -g @ant-design/pro-cli
     pro create myapp --type vue
     cd myapp
     npm run start
     

2. 配置动态路由:

   • 在 src/router/index.js 文件中配置动态路由：

     import Vue from 'vue'
     import Router from 'vue-router'
     import axios from 'axios'
     
     Vue.use(Router)
     
     const routes = []
     
     function loadRoutes() {
            
         axios.get('/api/menus').then(response => {
            
             const menus = response.data
             menus.forEach(menu => {
            
                 routes.push({
            
                     path: menu.path,
                     name: menu.title,
                     component: () => import('@/pages/' + menu.title.replace(' ', '') + '.vue')
                 })
             })
     
             const router = new Router({
            
                 routes: [
                     {
             path: '/', redirect: '/dashboard' },
                     ...routes
                 ]
             })
     
             Vue.prototype.$router = router
         })
     }
     
     loadRoutes()
     

3. 创建页面组件:

   • 为每个菜单创建一个页面组件，例如 src/pages/Menu1.vue：

     <template>
         <a-card>
             <p>这是 Menu 1 页面的内容。</p>
         </a-card>
     </template>
     
     <script>
     export default {
         name: 'Menu1'
     }
     </script>
     

4. 配置菜单:

   • 在 src/layout/SiderMenu.vue 文件中，使用动态生成的菜单数据：

     // ...
     computed: {
            
         menuData() {
            
             return this.$router.options.routes.map(route => ({
            
                 name: route.name,
                 path: route.path,
                 icon: 'menu-unfold'
             }))
         }
     }
     // ...
     

运行项目

1. 启动后端服务:

   • 运行 DemoApplication.java 类启动 Spring Boot 服务。

2. 启动前端服务:

   • 在 Ant Design Pro Vue 项目的根目录下运行 npm run start。

实践心得

在实际操作过程中，我们需要注意以下几点：

• 版本兼容性: 确保使用的 Spring Boot 和 Ant Design Pro Vue 的版本相互兼容。
• 安全性: 使用 HTTPS 和 JWT 令牌来增强安全性。
• 性能调优: 根据实际负载情况调整服务器配置。
• 错误处理: 妥善处理前后端通信中的错误情况。
• 国际化支持: 为多语言环境添加国际化支持。

通过上述步骤，我们成功地使用 Spring Boot 和 Ant Design Pro Vue 实现了一个具有动态路由和菜单功能的前后端分离框架。这种架构不仅能够提高开发效率，还能使应用更加灵活和可维护。无论是初学者还是经验丰富的开发者，这套方案都值得尝试。