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

简介: 【10月更文挑战第8天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建并配置 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 实现了一个具有动态路由和菜单功能的前后端分离框架。这种架构不仅能够提高开发效率,还能使应用更加灵活和可维护。无论是初学者还是经验丰富的开发者,这套方案都值得尝试。

相关文章
|
17天前
|
消息中间件 缓存 Java
手写模拟Spring Boot启动过程功能
【11月更文挑战第19天】Spring Boot自推出以来,因其简化了Spring应用的初始搭建和开发过程,迅速成为Java企业级应用开发的首选框架之一。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,帮助读者深入理解其工作机制。
32 3
|
17天前
|
Java 开发者 微服务
手写模拟Spring Boot自动配置功能
【11月更文挑战第19天】随着微服务架构的兴起,Spring Boot作为一种快速开发框架,因其简化了Spring应用的初始搭建和开发过程,受到了广大开发者的青睐。自动配置作为Spring Boot的核心特性之一,大大减少了手动配置的工作量,提高了开发效率。
38 0
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
104 62
|
29天前
|
人工智能 前端开发 Java
基于开源框架Spring AI Alibaba快速构建Java应用
本文旨在帮助开发者快速掌握并应用 Spring AI Alibaba,提升基于 Java 的大模型应用开发效率和安全性。
基于开源框架Spring AI Alibaba快速构建Java应用
|
27天前
|
前端开发 Java easyexcel
SpringBoot操作Excel实现单文件上传、多文件上传、下载、读取内容等功能
SpringBoot操作Excel实现单文件上传、多文件上传、下载、读取内容等功能
73 8
|
29天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
53 2
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
162 1
|
3月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的服装商城管理系统
基于Java+Springboot+Vue开发的服装商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的服装商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
171 2
基于Java+Springboot+Vue开发的服装商城管理系统
|
3月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
263 1
|
1月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。