사례 1

개발 환경

Language

Java
Javascript

Platform

Node

Framework

Spring Boot
express.js
vue.js

서버 구성

<body>
<div class="wrap">
    <div class="header">
        <h1 class="logo">
            <a class="link_logo" @click="logoClick">
                <img :src="logo" class="image_logo">
            </a>
        </h1>
    </div>

    <div class="contents">
        <h2 class="box_heading text_overflow1">당신이 놓친 이야기</h2>
        <a class="powered-by" target="_parent">
            <span class="by">by</span> <strong>Discovery+</strong>
        </a>

        <!TEMPLATE_ELEMENTS>
    </div>

    <div class="footer">
        <p class="copyright">Copyright@#FOOTER All rights reserved.</p>
    </div>
</div>

<!TEMPLATE_SCRIPT>
</body>

<content-big-image 
    :items="items.content_big_image_1" 
    :info="items.content_big_image_1_info" 
    v-on:set-log="setClickLog">
</content-big-image>

<adsense 
    :items="items.adsense_2" 
    :info="items.adsense_2_info" 
    v-on:set-log="setClickLog">
</adsense>

<content-recommend-grid 
    :items="items.content_recommend_grid_3" 
    :info="items.content_recommend_grid_3_info" 
    v-on:set-log="setClickLog">
</content-recommend-grid>

<script id="v-content-category-recommend-panel" type="text/x-template">
    <div class="box color_box">
        <h3 class="box_heading text_overflow1">{{info.category}}</h3>

        <ul class="grid_comps clear">
            <li v-for="(item, i) in itemList" class="grid_item">
                <a class="link_grid" @click="clickBind(item, i)">
                    <div class="pic">
                        <img v-if="!isNull(item.articleThumbnailImgUrl)" :src="item.articleThumbnailImgUrl" alt="">
                        <img v-else :src="item.articleImgUrl" alt="">
                    </div>
                    <div class="txt">
                        <p class="heading text_overflow3">{{item.articleTitle}}</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</script>

<script>
  Vue.component('content-category-recommend-panel', {
    template: '#v-content-category-recommend-panel',
    props: ['items', 'info'],
    computed: {
      itemList: function () {
        return shuffle(this.items).slice(0, this.info.size)
      }
    },
    methods: {
      clickBind: function (item, i) {
        this.$emit('set-log', item, 'content-category-recommend-panel', i, this.info.id);
      },
      isNull: function (value) {
        if (value == "" || value == null || value == undefined || (value != null && typeof value == "object" && !Object.keys(value).length)) {
          return true
        } else {
          return false
        }
      }
    }
  });
</script>

사례 2

개발 환경

Language

Java
Javascript

Framework

Spring Boot
Thymeleaf
vue.js

어플리케이션 구성

View

Thymeleaf

layout.html

content.html

Vue

Controller

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

</html>

layout.html

header

left menu

footer

<div layout:fragment="content"></div>
<div layout:fragment="v-template"></div>
<script type="text/javascript" layout:fragment="script"></script>

<div th:replace="/layout/component/left-menu-item.html"></div>

<div th:replace="/layout/component/left-menu-item.html"></div>

fragment content

<div th:replace="/layout/component/footer.html"></div>

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{layout/layout}">

</html>

content.html

<div layout:fragment="v-template">
    <!-- 공통 컴포넌트 -->
    <div th:replace="/layout/component/content-header.html"></div>
    <div th:replace="/layout/component/content-body.html"></div>
    <div th:replace="/layout/component/box/box.html"></div>
    <div th:replace="/layout/component/box/box-title.html"></div>
    <div th:replace="/layout/component/box/box-content.html"></div>
    <div th:replace="/layout/component/box/box-footer.html"></div>
    <div th:replace="/layout/component/grid/grid.html"></div>

    <!-- Util 컴포넌트 -->
    <div th:replace="/util/component/datetime-picker.html"></div>
</div>

<div id="v-content" layout:fragment="content">

</div>

<script th:inline="javascript" layout:fragment="script">

</script>

vue template code

vue script code

vue template code

<div id="v-content" layout:fragment="content">
    <form class="form-horizontal" onsubmit="return false;">
        <v-content-header
            :title="header.title"
            :dep="header.dep"
        ></v-content-header>

        <v-content-body>
            <!-- 내용 -->
        </v-content-body>
    </form>
</div>

vue script code

new Vue({
    el: '#v-content',
    data: function () {
        return {
          rootPath: [[${rootPath}]],
          header: {
            title: '캠페인 관리',
            dep: [
              {name: 'Home', path: '/', active: false},
              {name: '캠페인 관리', active: true}
            ]
          },
          grid: {
            titles: [
              '#', '캠페인명', '상태', '시작일시', '종료일시', '클릭수', '등록일', ''
            ],
            items: [[${items}]],
            start: [[${start}]],
            limit: [[${limit}]],
            count: [[${count}]]
          },
          form: {
            status: 'all',
            title: ''
          }
        }
      }
});

{{component}}.html

<script id="grid-row" type="text/x-template">
    <!-- Template -->
</script>




<script>

    // Vue Script
    Vue.component('tag-name', {
        

    });

</script>

정리

vue는 원하는 방향대로 개발이 가능

혁신보다는 점진적인 개선을 통한 변화를 추구

fin

deck

By attdro

deck

More from attdro