一、簡介
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 ResponseEntity3. 多租戶系統實現
本系統支持多租戶,在開發過程中每個公司可以使用一個數據庫,將每個公司的相關數據存放在各自的數據庫中。我們在引入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
微信掃一掃
支付寶掃一掃