Eladmin介紹及使用教程

Eladmin是一套基於Spring Boot 2.5.2 和 Vue 3.1.3及Element-Plus 開發的開源、易用的後台管理系統，可以幫助開發者們快速構建後端數據服務，前端模型展示。

一、Eladmin側邊欄添加

Eladmin側邊欄是前端頁面左側固定區域，默認支持多級菜單的形式展示，可以通過簡單的配置，方便地添加左側菜單。

使用方法：

在ElAdmin後端管理系統的src/main/mate-inf/resources/static/下找到menu.json文件。

按照以下JSON格式添加菜單：

{
  "name": "menu-name", // 菜單名字
  "icon": "icon-name", // 菜單圖標
  "url": "url-name"  // 菜單指向頁面的路徑
}

完整示例代碼如下：

{
  "name":"儀錶盤",
  "icon":"dashboard",
  "url":"/dashboard"
},
{
  "name":"系統管理",
  "icon":"setting",
  "children":[
    {
      "name": "角色管理",
      "icon": "",
      "url": "/system/role"
    },
    {
      "name": "用戶管理",
      "icon": "",
      "url": "/system/user"
    }
  ]
}

二、Eladmin學習視頻

請移步官網el-admin涵蓋ElAdmin詳細教程視頻。

三、Eladmin 主題切換

在Eladmin後台管理系統的頭部右側，提供了主題切換功能，可以在線切換主題，不影響後端邏輯的同時，使前端展示更加美觀。

使用方法：

在Eladmin 後台管理系統，打開網頁，在右上角選擇框內選擇不同的主題即可快速切換。

四、Eladmin 註解風格

Eladmin 提供了基於註解風格的訪問權限控制，可以更好地實現接口級別的權限控制，提高代碼運行效率。

使用方法：

可以通過使用@PreAuthorize或@Secured註解來標註一個接口需要哪些角色的訪問權限：

@PreAuthorize("hasAnyAuthority('ROLE_ADMIN')")
@PostMapping
public ApiResponse addUser(@RequestBody UserDto userDto){}

完整示例代碼如下：

@Api(tags = "系統：用戶管理")
@RestController
@RequestMapping("/system/user")
public class UserController {

    @Autowired
    private UserService userService;

    @RequiresPermissions("system:user:view")
    @GetMapping
    public ApiResponse userList(UserQueryCriteria criteria, Pageable pageable){
        return ApiResponse.success(userService.queryAll(criteria,pageable));
    }

    // 省略其他接口...

}

五、Eladmin 日誌記錄

Eladmin 提供了基於AOP攔截的日誌記錄功能，可以實時地記錄接口訪問情況，便於開發者們進行後續問題定位和解決。

使用方法：

可以通過使用@Log註解來標註一個接口需要記錄日誌：

@Log("刪除字典")
@ApiOperation("刪除字典")
@DeleteMapping(value = "/{id}")
public ApiResponse delete(@PathVariable Long id){
    dictService.delete(id);
    return ApiResponse.success(null);
}

完整示例代碼如下：

@Aspect
@Component
public class ApiLogAspect {

    @Autowired
    private LogRepository logRepository;

    @Autowired
    private HttpServletRequest request;

    private ThreadLocal startTime = new ThreadLocal();

    /**
     * 自定義註解攔截
     * @param log
     */
    @Around("@annotation(log)")
    public Object around(ProceedingJoinPoint joinPoint, Log log) throws Throwable {
        String username = SecurityUtils.getUsername();
        if (log != null) {
            // 執行方法所花費的時間
            long duration = System.currentTimeMillis() - startTime.get();
            // 保存日誌信息
            SysLog sysLog = new SysLog(log.value(), joinPoint.getSignature().getDeclaringTypeName() + "." + joinPoint.getSignature().getName());
            sysLog.setUsername(username);
            sysLog.setTime(duration);
            sysLog.setCreateTime(new Date());
            sysLog.setIp(IpUtils.getIpAddr(request));
            logRepository.save(sysLog);
        }
        return joinPoint.proceed();
    }

    // @Before,@After,@AfterReturning與上述帶註解攔截註解類似，這裡不再贅述，可進行class的攔截

}

以上便是Eladmin的介紹及使用教程，希望對於開發者們進行後端數據服務和前端模型展示，提供一些有價值的參考。