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

相关文章
|
1月前
|
监控 Java API
Spring Boot 3.2 结合 Spring Cloud 微服务架构实操指南 现代分布式应用系统构建实战教程
Spring Boot 3.2 + Spring Cloud 2023.0 微服务架构实践摘要 本文基于Spring Boot 3.2.5和Spring Cloud 2023.0.1最新稳定版本,演示现代微服务架构的构建过程。主要内容包括: 技术栈选择:采用Spring Cloud Netflix Eureka 4.1.0作为服务注册中心,Resilience4j 2.1.0替代Hystrix实现熔断机制,配合OpenFeign和Gateway等组件。 核心实操步骤: 搭建Eureka注册中心服务 构建商品
337 3
|
7天前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统,包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
75 4
基于springboot+vue开发的会议预约管理系统
|
5月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
415 7
|
1月前
|
人工智能 监控 安全
如何快速上手【Spring AOP】?核心应用实战(上篇)
哈喽大家好吖~欢迎来到Spring AOP系列教程的上篇 - 应用篇。在本篇,我们将专注于Spring AOP的实际应用,通过具体的代码示例和场景分析,帮助大家掌握AOP的使用方法和技巧。而在后续的下篇中,我们将深入探讨Spring AOP的实现原理和底层机制。 AOP(Aspect-Oriented Programming,面向切面编程)是Spring框架中的核心特性之一,它能够帮助我们解决横切关注点(如日志记录、性能统计、安全控制、事务管理等)的问题,提高代码的模块化程度和复用性。
|
1月前
|
安全 算法 Java
在Spring Boot中应用Jasypt以加密配置信息。
通过以上步骤,可以在Spring Boot应用中有效地利用Jasypt对配置信息进行加密,这样即使配置文件被泄露,其中的敏感信息也不会直接暴露给攻击者。这是一种在不牺牲操作复杂度的情况下提升应用安全性的简便方法。
654 10
|
1月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发,实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布;后台提供食堂、菜品与评价管理模块,支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等,适配响应式布局,提供完整源码与数据库脚本,可直接运行部署。
75 0
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
|
2月前
|
安全 Java Nacos
0代码改动实现Spring应用数据库帐密自动轮转
Nacos作为国内被广泛使用的配置中心,已经成为应用侧的基础设施产品,近年来安全问题被更多关注,这是中国国内软件行业逐渐迈向成熟的标志,也是必经之路,Nacos提供配置加密存储-运行时轮转的核心安全能力,将在应用安全领域承担更多职责。
|
2月前
|
NoSQL Java Redis
Redis基本数据类型及Spring Data Redis应用
Redis 是开源高性能键值对数据库,支持 String、Hash、List、Set、Sorted Set 等数据结构,适用于缓存、消息队列、排行榜等场景。具备高性能、原子操作及丰富功能,是分布式系统核心组件。
357 2
|
2月前
|
Java Linux 网络安全
Linux云端服务器上部署Spring Boot应用的教程。
此流程涉及Linux命令行操作、系统服务管理及网络安全知识,需要管理员权限以进行配置和服务管理。务必在一个测试环境中验证所有步骤,确保一切配置正确无误后,再将应用部署到生产环境中。也可以使用如Ansible、Chef等配置管理工具来自动化部署过程,提升效率和可靠性。
300 13