一、簡介
ruoyi-vue-pro 是一款基於 SpringBoot2.x 全家桶實現、Vue、Element UI 的後台管理系統模板,提供模板功能和CRUD代碼生成,並且支持多租戶系統、多數據源系統,可瀏覽器緩存、工作流、十強排行榜、代碼生成等常用開發功能。
在本章節中,我們將介紹該系統的基本架構和運行環境。
二、系統架構
本系統的架構基於傳統的前後端分離架構模式,採用以下技術棧:
- 前端採用 Vue + Element + Axios + Webpack;
- 後端採用 SpringBoot2.x + MyBatis-Plus + Shiro + Swagger-UI + Log4j2。
三、運行環境
運行該項目需要滿足以下環境:
- JDK8+
- Maven 3.0+
- MySQL 5.5+
- Node.js 10+
四、項目結構
本系統的項目結構如下:
ruoyi-vue-pro/ ├── ruoyi-admin/ 後台管理模塊 ├── ruoyi-common/ 客戶端、服務端公共模塊 ├── ruoyi-framework/ 框架核心模塊 ├── ruoyi-generator/ java代碼自動生成模塊 ├── ruoyi-quartz/ 定時任務模塊 ├── ruoyi-system/ 後台管理業務模塊 ├── ruoyi-tools/ 系統工具模塊 └── src/ Vue前端代碼
五、代碼示例
1. Mybatis-Plus 更改系統默認表名確定方法
在項目中使用Mybatis-Plus的時候,默認情況下表名和實體類名必須一一對應,否則-會出現”無法找到該實體”的錯誤。在系統多數據源的時候,這種情況更加明顯。
/** * 代碼生成前綴配置,表名以sys_開頭才生成代碼 */ strategy.setTablePrefix(new String[] { "sys_" }); /** *根據數據庫表獲取對應實體類 */ @Override public String tableToJava(String tableName) { if (tableName.startsWith("sys_")) { return upperTableName2Camel(tableName.replaceFirst("sys_", "")); } else if (tableName.startsWith("gen_")) { return upperTableName2Camel(tableName.replaceFirst("gen_", "Gen")); } else if (tableName.startsWith("qrtz_")) { return upperTableName2Camel(tableName.replaceFirst("qrtz_", "Qrtz")); } else { return upperTableName2Camel(tableName); } }
2. 自定義異常處理
異常處理是Web應用開發中非常重要的一環,當系統出現異常時,我們需要有一個統一的異常處理機制。在本項目中,我們通過繼承DefaultHandlerExceptionResolver,並重寫它的resolveException()方法實現異常處理。
@RestControllerAdvice public class GlobalExceptionHandler extends DefaultHandlerExceptionResolver { @Autowired private MessageSource messageSource; /** * 處理業務異常 */ @ExceptionHandler(BusinessException.class) @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR) public R businessException(BusinessException e) { String message = messageSource.getMessage(e.getMessage(), null, LocaleContextHolder.getLocale()); return R.error(message); } /** * 處理未知異常 */ @Override protected ResponseEntity
3. 多租戶系統實現
本系統支持多租戶,在開發過程中每個公司可以使用一個數據庫,將每個公司的相關數據存放在各自的數據庫中。我們在引入Mybatis-Plus後,通過繼承MybatisSqlInterceptor實現多租戶的切換。
@Configuration @MapperScan("com.ruoyi.system.mapper") public class MybatisPlusConfig { @Autowired private RuoYiConfig ruoyiConfig; /** * 多租戶方案之一:schema模式 */ @Bean public MybatisSqlInterceptor mybatisSqlInterceptor() { return new MybatisSqlInterceptor() { @Override public void prepare(SqlMappedStatement mappedStatement, Object parameter) { if (SecurityUtils.getMultiTenantId() != null) { final String tenantId = SecurityUtils.getMultiTenantId(); if (StringUtils.isNotBlank(tenantId)) { String originalSql = mappedStatement.getSql(); StringBuilder sqlBuilder = new StringBuilder("SET SCHEMA '") .append(tenantId.toLowerCase()) .append("';"); sqlBuilder.append(originalSql); setPreparedSql(originalSql); setTargetSql(sqlBuilder.toString()); } } } }; } /** * 多租戶方案之二:動態表名 */ @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new DynamicTableNameInnerInterceptor()); return interceptor; } }
4. Vue + Element UI 實現圖標操作
Vue + Element UI 可以通過依賴 fontawesome 實現圖標操作。在這裡我們可以選擇幾種方式來實現圖標的引用:
- 引用CDN上面的fontawesome圖標庫
- 下載fontawesome文件到本地,然後引用本地文件
- 使用vue-awesome作為插件,安裝這個插件,就可以很方便地在vue中使用fontawesome圖標庫的各種圖標了。
npm install --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/vue-fontawesome
import Vue from 'vue' import { library } from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { faUser } from '@fortawesome/free-solid-svg-icons' // 通過library方法引入想要使用的圖標 library.add(faUser) Vue.component('font-awesome-icon', FontAwesomeIcon)
5. Swagger-UI 自動生成API文檔
Swagger-UI 可以根據我們代碼中的註解自動生成 API 文檔。在本項目中,我們可以通過以下配置實現:
/** * swagger配置 */ @Configuration @EnableSwagger2 public class SwaggerConfig { /** * 注入系統基礎配置 */ @Autowired private RuoYiConfig ruoyiConfig; @Bean public Docket createRestApi() { // 添加全局頭部信息 ParameterBuilder parameterBuilder = new ParameterBuilder(); List parameters = new ArrayList(); parameterBuilder.name("Authorization") .description("令牌") .modelRef(new ModelRef("string")) .parameterType("header") .required(false).build(); parameters.add(parameterBuilder.build()); // API文檔基本信息配置 return new Docket(DocumentationType.SWAGGER_2) .apiInfo(apiInfo()) .select() .apis(RequestHandlerSelectors.withClassAnnotation(Api.class)) .paths(PathSelectors.any()) .build() .globalOperationParameters(parameters) .securityContexts(Collections.singletonList(securityContext())) .securitySchemes(Collections.singletonList(securityScheme())); } /** * API文檔基本信息配置 */ public ApiInfo apiInfo() { return new ApiInfoBuilder() .title("若依系統接口文檔") .description("若依管理系統後台接口文檔") .contact(new Contact(ruoyiConfig.getName(), null, null)) .version("版本號:" + ruoyiConfig.getVersion()) .build(); } /** * 通過Swagger解決token問題 */ public SecurityScheme securityScheme() { return new ApiKey("Token", "token", "header"); } /** * 通過Swagger解決token問題 */ private SecurityContext securityContext() { return SecurityContext.builder() .securityReferences(Arrays.asList(new SecurityReference("Token", new AuthorizationScope[]{new AuthorizationScope("global", "")}))) .build(); } }
六、總結
本文主要介紹了ruoyi-vue-pro的基本架構和運行環境、項目結構、以及多個方面的代碼示例。通過學習以上內容,我們可以更好地理解和使用該系統,從而提高我們的開發效率和協同工作能力。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/242720.html