基于Ant DesignPro Vue + SpringBoot 前后端分离 |
您所在的位置：网站首页 › nacos配置springboot › 基于Ant DesignPro Vue + SpringBoot 前后端分离 |
基于Ant DesignPro Vue + SpringBoot 前后端分离
|
基于Ant DesignPro Vue + SpringBoot 前后端分离 - 后端微服化 + 接口网关 + Nacos
通过Ant DesignPro Vue + SpringBoot 搭建的后台管理系统后，实现了前后端分离，并实现了登录认证，认证成功后返回该用户相应权限范围内可见的菜单。 后端采用SpringCloud构建微服，采用SpringCloud Gateway做为服务网关，采用Nacos做为统一配置中心，并在服务网关部分解决了前端跨域调用的问题。前端VUE的所有向后端的请求全部指向服务网关，接口网关根据Url请求路径为/api/auth/或/api/account/，则将请求转发至ms-login服务；接口网关根据Url请求路径为/api/user/，则将请求转发至ms-user服务；Ant Design Pro相关系列文章： 一、AntDesign Pro安装过程 二、基于Ant DesignPro实现通过SpringBoot后台加载自定义菜单-前端部分 三、基于Ant DesignPro实现通过SpringBoot后台加载自定义菜单-SpringBoot后端部分 四、搭建Vue版Ant Design Pro后台管理系统 五、基于Ant DesignPro Vue实现通过SpringBoot后台加载自定义菜单- 前后端分离 六、基于Ant DesignPro Vue + SpringBoot 前后端分离 - 部署后解决跨域的问题 七、基于Ant DesignPro Vue + SpringBoot 前后端分离 - 后端微服化 + 接口网关 + Nacos 八、基于Ant DesignPro Vue + SpringBoot 前后端分离 - 后端微服化 + 接口网关 + Nacos + Sentinel 源码开源地址 后端Springboot工程代码已上传gitee，地址：https://gitee.com/duyanjun/mc-cloud.git本文章中代码是将文章【六、基于Ant DesignPro Vue + SpringBoot 前后端分离 - 部署后解决跨域的问题】中单体改造为微服架构 目录 基于Ant DesignPro Vue + SpringBoot 前后端分离 - 后端微服化 + 接口网关 + Nacos一、采用的技术架构二、Maven工程结构三、微服架构四、前期准备1、安装Nacos1)、下载Nacos docker脚本2)、快速启动3)、登录Nacos 2、通过Ant DesignPro Vue构建前端1）、修改vue.config.js2）、修改.env3）、修改.env.development 五、构建Root工程ms-cloud六、构建子模块 ms-gateway1、pom.xml2、application.yml3、启动类GatewayApplication.ava4、解决接口网关跨域配置类 七、构建子模块 ms-mcv1、pom.xml2、构建子模块ms-mcv-common3、构建子模块ms-mcv-login1)、子模块ms-mcv-login的pom.xml2）、application.yml 4、构建子模块ms-mcv-user1)、子模块ms-mcv-user的pom.xml2）、application.yml 八、验证1、服务可以正常注册到Nacos1)、启动ms-gateway、ms-login、ms-user这三个服务2）、nacos中服务的注册状态 2、启动前端服务1）、在前端代码根目录执行下面命令2）、访问前端页面 一、采用的技术架构 序号技术框架说明1Spring Cloud AlibabaSpring Cloud Alibaba微服体系架构2NacosApi网关、服务注册发现配置管理中心3Spring Cloud GatewaySpring Cloud 网关4Ant Design Pro Vue前端页面 二、Maven工程结构 |-- ms-cloud # Root工程 | |-- ms-gateway # 服务网关 | |-- ms-mcv # 后端工程 | |-- ms-mcv-common # 后端工程-公共部分，例如实体类 | |-- ms-mcv-login # 后端工程-登录接口服务 | |-- ms-mcv-user # 后端工程-用户接口服务
其它的获取启动方式请参照【Nacos官方文档】 1)、下载Nacos docker脚本 git clone https://github.com/nacos-group/nacos-docker.git cd nacos-docker 2)、快速启动 docker-compose -f example/standalone-mysql-5.7.yaml up 3)、登录Nacos执行完上述命令需要等待几分钟时间，需要下载nacos和mysql的镜像，下载完成后会自动启动，启动成功后可以访问http://ip:8848/nacos 参见 搭建Vue版Ant Design Pro后台管理系统 1）、修改vue.config.js将devServer配置项中添加proxy配置项，并将target改为process.env.VUE_APP_API_BASE_URL devServer: { // development server port 8000 port: 8000, // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11 proxy: { '/api': { target: process.env.VUE_APP_API_BASE_URL, ws: false, changeOrigin: true } } }, 2）、修改.env VUE_APP_API_BASE_URL=生产环境的后端服务网关地址
ms-cloud的pom.xml如下 4.0.0 com.ms ms-cloud pom 1.0 ${project.artifactId} https://blog.csdn.net/dyj095 2.7.10 2021.0.6 2021.0.5.0 UTF-8 1.8 1.8 4.9.9 0.0.38 1.0.2 org.springframework.boot spring-boot-configuration-processor true org.projectlombok lombok provided org.springframework.boot spring-boot-starter-test test ms-gateway ms-mcv org.springframework.boot spring-boot-dependencies ${spring-boot.version} pom import org.springframework.cloud spring-cloud-dependencies ${spring-cloud.version} pom import com.alibaba.cloud spring-cloud-alibaba-dependencies ${spring-cloud-alibaba.version} pom import说明： properties标签：配置各依赖包的版本信息dependencies标签: 配置全局所有的模块都会引入依赖modules标签: 配置ms-cloud模块下有两个子模块，分别是ms-gateway（服务网关）、ms-mcv（后台模块）dependencyManagement：配置依赖 六、构建子模块 ms-gateway
ms-gateway子模块的pom.xml ms-cloud com.ms 1.0 4.0.0 ms-gateway 服务网关，基于 spring cloud gateway com.alibaba.cloud spring-cloud-starter-alibaba-nacos-discovery com.alibaba.cloud spring-cloud-starter-alibaba-nacos-config org.springframework.cloud spring-cloud-starter-gateway org.springframework.cloud spring-cloud-loadbalancer说明： spring-cloud-starter-alibaba-nacos-discovery：nacos发现需要的依赖spring-cloud-starter-alibaba-nacos-config: 自动从nacos上获取配置以及监控配置的变更并自动更新spring-cloud-starter-gateway：Spring cloud 服务网关依赖spring-cloud-loadbalancer：Spring cloud 服务网关路由需要的依赖，没有此依赖就不会将请求路由于相应后面的微服务上 2、application.yml server: port: 9999 logging: level: com.ms: debug pattern: dateformat: MM-dd HH:mm:ss:SSS spring: application: name: ms-gateway cloud: nacos: server-addr: 192.168.2.146:8848 gateway: enabled: true routes: - id: ms-login uri: lb://ms-login predicates: - Path=/api/auth/**,/api/account/** - id: ms-user uri: lb://ms-user predicates: - Path=/api/user/** config: import: - optional:nacos:application.yml - optional:nacos:${spring.application.name}.yml参数说明： spring.cloud.nacos.server-addr: nacos服务器地址:端口spring.gateway: 配置springCloud gateway的参数 3、启动类GatewayApplication.ava package com.ms.gateway; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cloud.client.discovery.EnableDiscoveryClient; @SpringBootApplication @EnableDiscoveryClient public class GatewayApplication { public static void main(String[] args){ SpringApplication.run(GatewayApplication.class, args); } }说明： 项目启动类 @EnableDiscoveryClient注解：标注当前工程会向Nacos注册 4、解决接口网关跨域配置类 package com.ms.gateway.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.reactive.CorsConfigurationSource; import org.springframework.web.cors.reactive.CorsWebFilter; import org.springframework.web.server.ServerWebExchange; @Configuration public class CrossOriginConfig { @Bean public CorsWebFilter corsFilter() { CorsConfigurationSource corsConfigurationSource = new CorsConfigurationSource() { @Override public CorsConfiguration getCorsConfiguration(ServerWebExchange serverWebExchange) { CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedHeader("*"); corsConfiguration.addAllowedMethod("*"); corsConfiguration.addAllowedOriginPattern("*"); corsConfiguration.setAllowCredentials(true); return corsConfiguration; } }; return new CorsWebFilter(corsConfigurationSource); } }说明： 此类非常重要，用于解决前端跨域的问题，采用的方案是前端和服务网关添加跨域代码，后端微服务不需要添加跨域代码1、前端：VUE添加跨域相关代码，详细请参见文章 - 【六、基于Ant DesignPro Vue + SpringBoot 前后端分离 - 部署后解决跨域的问题】2、服务网关：添加跨域相关代码，就是当前类3、后端微服务：不添加任何跨域相关代码 七、构建子模块 ms-mcv
说明： 当前模块只是一个后端父模块，定义了3个子模块 ms-mcv-common：定义了后端模块中公共代码，例如实例类、工具类…ms-mcv-login: 实现了/api/auth/**和/api/account/**这两部分的请求ms-mcv-user: 实现了/api/user/**这部分的请求 2、构建子模块ms-mcv-common
子模块ms-mcv-common的pom.xml ms-mcv com.ms 1.0 4.0.0 ms-mcv-common说明： 当前模块只定义了实体类，并未依赖第三方依赖 3、构建子模块ms-mcv-login
说明： ms-mcv-common：依赖ms-mcv-common模块中定义的实体类spring-boot-starter-web：当前模块需要以springboot启动并需要web容器发布http接口spring-cloud-starter-alibaba-nacos-discovery：需要Nacos的注册与发现json-lib-ext-spring：json依赖 2）、application.yml server: port: 8000 servlet: context-path: / logging: file: name: ms-login path: ./logs/ms-login/ max-size: 10MB max-history: 7 config: classpath:logback-spring.xml spring: application: name: ms-login cloud: nacos: server-addr: 192.168.2.146:8848说明： server.port: 服务端口8000spring.cloud.nacos.server-addr：配置nacos服务器的ip:端口spring.application.name: 配置当前模块的应用名称，也是注册到nacos的服务名称：ms-login 4、构建子模块ms-mcv-user
说明： ms-mcv-common：依赖ms-mcv-common模块中定义的实体类spring-boot-starter-web：当前模块需要以springboot启动并需要web容器发布http接口spring-cloud-starter-alibaba-nacos-discovery：需要Nacos的注册与发现json-lib-ext-spring：json依赖 2）、application.yml server: port: 8001 servlet: context-path: / logging: file: name: ms-user path: ./logs/ms-user/ max-size: 10MB max-history: 7 config: classpath:logback-spring.xml spring: application: name: ms-user cloud: nacos: server-addr: 192.168.2.146:8848说明： server.port: 服务端口8001spring.cloud.nacos.server-addr：配置nacos服务器的ip:端口spring.application.name: 配置当前模块的应用名称，也是注册到nacos的服务名称：ms-user 八、验证 1、服务可以正常注册到Nacos 1)、启动ms-gateway、ms-login、ms-user这三个服务
在浏览器中访问http://127.0.0.1:8002 说明： 通过验证，前端VUE画面可以通过服务网关路由，正常的可以请求到后端多个微服务的接口 http://127.0.0.1:9999/api/auth/2step-code: 服务网关根据请求根据url匹配，将其路由至http://ms-login/api/auth/2step-codehttp://127.0.0.1:9999/api/auth/login：服务网关根据请求根据url匹配，将其路由至http://ms-login/api/auth/loginhttp://127.0.0.1:9999/api/user/info: 服务网关根据请求根据url匹配，将其路由至http://ms-user/api/user/info |
【本文地址】
今日新闻 |
推荐新闻 |