ruoyi 接入高德地图

### 若依前端框架中集成高德地图插件 若依（RuoYi）是一个基于Spring Boot和Vue.js开发的企业级管理后台快速开发平台。要在其前端部分集成高德地图插件，可以按照以下方法完成。 #### 一、前期准备工作 在开始之前，需确保已注册高德开放平台账号并获取API Key[^1]。此Key用于初始化地图实例时验证身份。此外，还需安装`vue-amap`库作为桥梁工具来简化Vue中的高德地图操作[^3]。 ```bash npm install vue-amap --save ``` #### 二、配置vue-amap 在项目的入口文件（通常是`main.js`），引入并初始化`vue-amap`： ```javascript import Vue from 'vue'; import VueAmap from 'vue-amap'; // 安装插件 Vue.use(VueAmap); // 初始化插件 VueAmap.initAMapApiLoader({ key: '您的高德地图API Key', // 替换为您自己的key plugin: ['AMap.Scale', 'AMap.ToolBar'], // 加载所需的插件 v: '1.4.15' // 使用的高德地图版本号 }); ``` 上述代码完成了对`vue-amap`的基础设置，并加载了一些常用的控件如比例尺(`Scale`)和工具条(`ToolBar`)[^3]。 #### 三、创建地图组件 定义一个新的Vue组件用来承载地图逻辑，在该组件内的`<template>`标签下放置地图容器；同时利用生命周期函数`mounted()`渲染地图实例[^4]。 ```html <template> <div id="app"> <div ref="mapContainer" style="width: 100%; height: 500px;"></div> </div> </template> <script> export default { data() { return { map: null, }; }, mounted() { this.$amapPromise.then(() => { this.map = new AMap.Map(this.$refs['mapContainer'], { zoom: 10, // 设置缩放级别 center: [116.397428, 39.90923], // 地图中心点坐标 }); }); }, beforeDestroy() { if (this.map) { this.map.destroy(); } } }; </script> ``` 这里通过`$amapPromise`等待高德地图脚本完全加载后再执行后续的地图初始化工作。另外注意清理资源防止内存泄漏。 #### 四、样式调整与优化 为了使地图更好地融入到整个页面布局当中，可能还需要针对不同屏幕尺寸做响应式设计以及自定义一些视觉效果。这部分可以根据实际需求灵活处理。 --- ###

### Ruoyi-Vue 项目与 Keycloak SSO 单点登录集成 #### 背景介绍 Keycloak 是一款功能强大的开源身份认证和单点登录解决方案，支持多种协议（如 OAuth2 和 OpenID Connect）。通过将其与 RuoYi-Vue 进行集成，可以实现统一的身份管理和安全控制。 以下是关于如何将 RuoYi-Vue 项目与 Keycloak 集成的具体说明： --- #### 1. 准备工作 在开始之前，需完成以下准备工作： - **安装并配置 Keycloak**：下载并启动 Keycloak 实例[^3]。 - **创建 Realm 和 Client**：在 Keycloak 中新建一个 Realm 并注册一个新的 Client 应用程序。设置 `Access Type` 为 `confidential` 或其他适合选项，并记录下 `Client ID` 和 `Secret` 值。 - **RuoYi-Vue 环境准备**：确保已成功运行 RuoYi-Vue 项目，并能够正常访问前端页面[^4]。 --- #### 2. 后端调整 为了使后端兼容 Keycloak 的认证机制，需要修改以下几个方面： ##### (1) 添加依赖项 引入必要的 Maven 依赖来处理 JWT 解析以及 OAuth2 授权逻辑。例如，在 `pom.xml` 文件中加入如下内容[^2]: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-oauth2-resource-server</artifactId> </dependency> <!-- 如果需要额外的支持 --> <dependency> <groupId>com.nimbusds</groupId> <artifactId>nimbus-jose-jwt</artifactId> </dependency> ``` ##### (2) 修改 Security 配置类 更新 Spring Boot 安全框架中的配置文件以验证来自 Keycloak 的 Access Token。示例代码如下所示： ```java @Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/oauth2/**").permitAll() // 放开 OAuth2 相关路径 .anyRequest().authenticated(); http.oauth2ResourceServer(OAuth2ResourceServerConfigurer::jwt); } } ``` ##### (3) 自定义 JwtDecoder Bean 为了让应用解析由 Keycloak 发放的 JSON Web Tokens (JWT)，可以通过自定义方式加载公钥资源。具体做法见下面片段： ```java @Bean public JwtDecoder jwtDecoder(RestTemplateBuilder restTemplateBuilder){ String jwkSetUri = "http://localhost:8080/auth/realms/{your-realm}/protocol/openid-connect/certs"; RestOperations restOperations = restTemplateBuilder.build(); JWKSource<SecurityContext> jwksSource = new RemoteJWKSet<>(jwkSetUri,restOperations); return new NimbusJwtDecoder(jwksSource); } ``` --- #### 3. 前端改造 对于 Vue.js 构建的前端部分，则主要集中在用户登录环节上做出相应改动。 ##### (1) 登录接口适配 利用 Axios 请求工具调用 `/loginSso` 方法发起 POST 请求至服务器端执行实际操作: ```javascript // user.js - 用户模块下的 API 封装函数 export function loginSso(queryParam) { return request({ url: '/loginSso', method: 'post', data: queryParam, }); } // 使用场景举例 const paramData = { username:"admin",password:"test@123"}; loginSso(paramData).then((response)=>{ console.log('Login Success:', response.data.token); }).catch(error=>{ alert(`Error occurred during Login:${error.message}`); }); ``` ##### (2) 替换默认表单提交行为 如果当前存在传统 HTML 表格形式的手动输入框设计，则建议替换为动态跳转到 Keycloak 提供的标准授权 URL 页面链接上去完成整个过程自动化程度更高一些[^1]. --- #### 4. 测试验证 最后一步就是进行全面的功能测试确认整体流程顺畅无误之后再部署上线正式环境当中去投入使用吧！ --- ###