아빠는 개발자

[Aqqle] Admin 본문

Aqqle/WEB

[Aqqle] Admin

father6019 2024. 1. 27. 20:20
728x90
반응형

 

bootstrap 무료 어드민을 사용해 aqqle 관리화면을 만들 예정 

https://github.com/ColorlibHQ/AdminLTE 

 

개발환경 요약

  • java thymeleaf
  • jQuery + axios
  • bootstrap

우선 thymeleaf 로 레이아웃을 나눠보자

 

build.gradle 에 추가 

    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
    compileOnly group: 'org.webjars.npm', name: 'axios', version: axiosVersion

 

 

Controller 생성 

메인화면에서 사용할 컨트롤러 생성 

 

@Controller
public class MainController {
    @GetMapping("")
    public String main(Model model){
        Map<String, String> dataMap = new HashMap<>();
        dataMap.put("api", "http://localhost:8080");
        model.addAllAttributes(dataMap);
        return "index";
    }

 

 

그리고 resources 하위에 static , templates 디렉토리를 만들자 

 

static 디렉토리 하위에는 

admin 스킨에서 사용중인 dist, plugins 디렉토리를 넣어준다. 

 

templates 디렉토리 하위에는 fragments 와 layout 디렉토리를 만들고 아래와 같이 구성하였다. 

 

 

layout/default.html 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<!-- Head -->
<head>
  <div th:replace="fragments/title::title"></div>
  <th:block layout:fragment="css" class="css" ></th:block>
</head>
<!-- / .Head -->
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
  <!-- Preloader -->
  <div class="preloader flex-column justify-content-center align-items-center" id = "admin_lte_logo" >
    <img class="animation__shake" src="/dist/img/AdminLTELogo.png" alt="AdminLTELogo" height="60" width="60">
  </div>

  <!-- Navbar -->
  <div th:replace="fragments/navbar::navbar"></div>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <div th:replace="fragments/aside::aside"></div>
  <!-- / .Main Sidebar Container -->

  <!-- Content Wrapper. Contains page content -->
  <div layout:fragment="content" class="content"></div>

  <!-- /.content-wrapper -->
  <!-- footer -->
  <div th:replace="fragments/footer::footer"></div>
  <!-- footer -->

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<div th:replace="fragments/script::script"></div>
<th:block layout:fragment="script" th:class="script"></th:block>
</body>
</html>

 

fragments 의 css 와 script 는 공통파일 예를들면 jquery 같은 

th:block 의 css 와 script는 페이지별 css 와 script 

 

fragments/title.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="title">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Aqqle | Dashboard</title>
</th:block>
</html>

title 과 meta 도 block 로 감싸고  index.html 에서 사용하는  css 도 아래와 같이 감싸서 처리

<th:block layout:fragment="css" th:class="css">
    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Tempusdominus Bootstrap 4 -->
    <link rel="stylesheet" href="/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- JQVMap -->
    <link rel="stylesheet" href="/plugins/jqvmap/jqvmap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/dist/css/adminlte.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="/plugins/daterangepicker/daterangepicker.css">
    <!-- summernote -->
    <link rel="stylesheet" href="/plugins/summernote/summernote-bs4.min.css">
</th:block>

 

 

fragments/navbar.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<nav class="main-header navbar navbar-expand navbar-white navbar-light" th:fragment="navbar">
  <!--  navbar 내용 -->
</nav>
</html>

 

실행화면

 

block 로 나누어진 titie 과 공통 css 영역 / 페이지별 css 영역 

딱히 뭐 없고 처음화면과 동일하면 성공 

기존에 만들었던 aqqle 전용 api 를 연동해서 페이지를 완성해보잣. 

728x90
반응형

'Aqqle > WEB' 카테고리의 다른 글

[Apple] Admin > keyword 관리  (1) 2024.01.28
'Aqqle/WEB' Related Articles more