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

简介: 本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 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
      
      AI 代码解读
  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>
      
      AI 代码解读

配置 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();
          }
      }
      
      AI 代码解读

创建后端 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;
          }
      }
      
      AI 代码解读

前端部分

  1. 创建 Ant Design Pro Vue 项目:

    • 使用官方脚手架创建项目:
      npm install -g @ant-design/pro-cli
      pro create myapp --type vue
      cd myapp
      npm run start
      
      AI 代码解读
  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()
      
      AI 代码解读
  3. 创建页面组件:

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

      <template>
          <a-card>
              <p>这是 Menu 1 页面的内容。</p>
          </a-card>
      </template>
      
      <script>
      export default {
          name: 'Menu1'
      }
      </script>
      
      AI 代码解读
  4. 配置菜单:

    • src/layout/SiderMenu.vue 文件中,使用动态生成的菜单数据:
      // ...
      computed: {
             
          menuData() {
             
              return this.$router.options.routes.map(route => ({
             
                  name: route.name,
                  path: route.path,
                  icon: 'menu-unfold'
              }))
          }
      }
      // ...
      
      AI 代码解读

运行项目

  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 实现了一个具有动态路由和菜单功能的前后端分离框架。这种架构不仅能够提高开发效率,还能使应用更加灵活和可维护。无论是初学者还是经验丰富的开发者,这套方案都值得尝试。

目录
打赏
0
62
62
1
281
分享
相关文章
|
19天前
|
使用Java和Spring Data构建数据访问层
本文介绍了如何使用 Java 和 Spring Data 构建数据访问层的完整过程。通过创建实体类、存储库接口、服务类和控制器类,实现了对数据库的基本操作。这种方法不仅简化了数据访问层的开发,还提高了代码的可维护性和可读性。通过合理使用 Spring Data 提供的功能,可以大幅提升开发效率。
62 21
【潜意识Java】javaee中的SpringBoot在Java 开发中的应用与详细分析
本文介绍了 Spring Boot 的核心概念和使用场景,并通过一个实战项目演示了如何构建一个简单的 RESTful API。
41 5
基于开源框架Spring AI Alibaba快速构建Java应用
本文旨在帮助开发者快速掌握并应用 Spring AI Alibaba,提升基于 Java 的大模型应用开发效率和安全性。
418 12
基于开源框架Spring AI Alibaba快速构建Java应用
深入探索Spring Cloud与Spring Boot:构建微服务架构的实践经验
深入探索Spring Cloud与Spring Boot:构建微服务架构的实践经验
210 5
|
3月前
|
Spring Boot 应用如何实现 JWT 认证?
Spring Boot 应用如何实现 JWT 认证?
110 8
Spring Boot 与 Apache Kafka 集成详解:构建高效消息驱动应用
Spring Boot 与 Apache Kafka 集成详解:构建高效消息驱动应用
87 1
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
232 2
利用Docker容器化部署Spring Boot应用
利用Docker容器化部署Spring Boot应用
74 0
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
93 0
Spring Boot 两种部署到服务器的方式
本文介绍了Spring Boot项目的两种部署方式:jar包和war包。Jar包方式使用内置Tomcat,只需配置JDK 1.8及以上环境,通过`nohup java -jar`命令后台运行,并开放服务器端口即可访问。War包则需将项目打包后放入外部Tomcat的webapps目录,修改启动类继承`SpringBootServletInitializer`并调整pom.xml中的打包类型为war,最后启动Tomcat访问应用。两者各有优劣,jar包更简单便捷,而war包适合传统部署场景。需要注意的是,war包部署时,内置Tomcat的端口配置不会生效。
251 17
Spring Boot 两种部署到服务器的方式