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

简介: 本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。

随着前后端分离架构的流行,开发一个既高效又易于维护的项目框架变得越来越重要。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
3
2
1
224
分享
相关文章
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现(计算机毕设项目实战+源码+文档)
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家,专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务,涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架,确保高效开发与良好用户体验。所有代码由博主亲自开发,并提供全程录音录屏讲解服务,保障学习效果。欢迎点赞、收藏、关注、评论,获取更多精品案例源码。
62 10
基于SpringBoot+Vue实现的家政服务管理平台设计与实现(计算机毕设项目实战+源码+文档)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
47 8
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现(源码+文档+部署)
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务:程序设计开发、代码修改、成品部署、支持定制、论文辅导,助力毕设!
58 8
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 两种部署到服务器的方式
springboot自动配置原理
Spring Boot 自动配置原理:通过 `@EnableAutoConfiguration` 开启自动配置,扫描 `META-INF/spring.factories` 下的配置类,省去手动编写配置文件。使用 `@ConditionalXXX` 注解判断配置类是否生效,导入对应的 starter 后自动配置生效。通过 `@EnableConfigurationProperties` 加载配置属性,默认值与配置文件中的值结合使用。总结来说,Spring Boot 通过这些机制简化了开发配置流程,提升了开发效率。
63 17
springboot自动配置原理
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
362 2
SpringBoot集成Shiro权限+Jwt认证
本文主要描述如何快速基于SpringBoot 2.5.X版本集成Shiro+JWT框架,让大家快速实现无状态登陆和接口权限认证主体框架,具体业务细节未实现,大家按照实际项目补充。
88 11
Spring Boot 3 集成 Spring Security + JWT
本文详细介绍了如何使用Spring Boot 3和Spring Security集成JWT,实现前后端分离的安全认证概述了从入门到引入数据库,再到使用JWT的完整流程。列举了项目中用到的关键依赖,如MyBatis-Plus、Hutool等。简要提及了系统配置表、部门表、字典表等表结构。使用Hutool-jwt工具类进行JWT校验。配置忽略路径、禁用CSRF、添加JWT校验过滤器等。实现登录接口,返回token等信息。
375 12
最新版 | 深入剖析SpringBoot3源码——分析自动装配原理(面试常考)
自动装配是现在面试中常考的一道面试题。本文基于最新的 SpringBoot 3.3.3 版本的源码来分析自动装配的原理,并在文未说明了SpringBoot2和SpringBoot3的自动装配源码中区别,以及面试回答的拿分核心话术。
最新版 | 深入剖析SpringBoot3源码——分析自动装配原理(面试常考)
Spring Boot 如何测试打包部署
本文介绍了 Spring Boot 项目的开发、调试、打包及投产上线的全流程。主要内容包括: 1. **单元测试**:通过添加 `spring-boot-starter-test` 包,使用 `@RunWith(SpringRunner.class)` 和 `@SpringBootTest` 注解进行测试类开发。 2. **集成测试**:支持热部署,通过添加 `spring-boot-devtools` 实现代码修改后自动重启。 3. **投产上线**:提供两种部署方案,一是打包成 jar 包直接运行,二是打包成 war 包部署到 Tomcat 服务器。
47 10
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等