네이버 api를 이용한 검색 사이트 (5)

lroot 2022. 10. 6. 02:55

728x90

1) front - end 구현

main.html

<!DOCTYPE html>
<html lang="ko" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>Search WISH LIST</title>
</head>

<body>
<br/>

<div class="container">
    <!-- search -->
    <div class="row">
        <div class="col-sm-6 col-md-8">
            <input id="searchBox" style="height: 46px" class="form-control form-control-lg" type="text" placeholder="검색해주세요 ex.(판교 갈비집)" value="갈비집">
        </div>
        <div class="col-sm-6 col-md-4">
            <button id="searchButton" type="button" class="btn btn-primary btn-lg" style="width: 100%">검색</button>
        </div>
    </div>

    <br/>
    <!-- search result -->
    <div class="row" id="search-result" style="visibility: hidden">
        <div class="col-sm-6 col-md-8">
            <img id="wish_image" v-bind:src="search_result.imageLink" alt="..." class="img-thumbnail" style="min-width: 100%; min-height: 100%;">
        </div>
        <div class="col-sm-6 col-md-4">
            <ul class="list-group list-group-flush">
                <li class="list-group-item" id="wish_title">{{search_result.title}}</li>
                <li class="list-group-item" id="wish_category">{{search_result.category}}</li>
                <li class="list-group-item" id="wish_address">{{search_result.address}}</li>
                <li class="list-group-item" id="wish_road_address">{{search_result.roadAddress}}</li>
                <li class="list-group-item"><a id="wish_link" target="_blank" v-bind:href="search_result.homePageLink">홈페이지</a> </li>
            </ul>
            <button id="wishButton" type="button" class="btn btn-primary btn-lg" style="width: 96%; position: absolute; bottom: 0">위시리스트 추가</button>
        </div>
    </div>

    <br/><br/><br/>

    <div class="row">
        <div class="alert alert-info col-sm-12 col-md-12" style="text-align: center">
            Search 리스트
        </div>
    </div>

    <br/>
    <div id="wish-list">
        <div v-for="wish in wish_list">
            <br/><hr/>
            <div class="row">
                <div class="col-sm-6 col-md-8">
                    <img v-bind:src="wish.imageLink"
                         alt="..."
                         class="img-thumbnail"
                         style="min-width: 100%;
                         min-height: 100%;"
                    >
                </div>
                <div class="col-sm-6 col-md-4">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">장소 : {{wish.title}}</li>
                        <li class="list-group-item">Category : {{wish.category}}</li>
                        <li class="list-group-item">주소 : {{wish.address}}</li>
                        <li class="list-group-item">도로명 : {{wish.roadAddress}}</li>
                        <li class="list-group-item">방명여부 : {{wish.visit}}</li>
                        <li class="list-group-item">마지막 방문일자 : {{wish.lastVisitDate}}</li>
                        <li class="list-group-item">방문횟수 : {{wish.visitCount}}</li>
                        <li class="list-group-item">
                            <a href="http://imf0010.cafe24.com/m/imf0020">홈페이지</a>
                        </li>
                        <li class="list-group-item">
                            <button v-on:click="addVisit(wish.index)" type="button" class="btn btn-primary btn-lg" style="width: 100%;">방문 추가</button>
                            <br/><br/>
                            <button v-on:click="deleteWish(wish.index)" type="button" class="btn btn-primary btn-lg" style="width: 100%;">위시리스트 삭제</button>
                        </li>
                        <li class="list-group-item"></li>
                    </ul>
                </div>
                <br/>
            </div>
            <hr>
        </div>
    </div>
</div>  <!-- container end -->



</body>


<!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<!-- 개발버전, 도움되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="/main.js"></script>
</html>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
(function ($) {
 
    // 검색 결과 vue object
    var search_result = new Vue({
        el: '#search-result',
        data: {
            search_result : {}
        },
        method: {
            wishButton: function (event) {
                console.log("add");
            }
        }
    });
 
    //  목록 vue object
    var wish_list = new Vue({
        el: '#wish-list',
        data: {
            wish_list : {}
        },
        methods: {
            addVisit: function (index) {
                $.ajax({
                    type: "POST" ,
                    async: true ,
                    url: `/api/${index}`,
                    timeout: 3000
                });
 
                getWishList();
            },
            deleteWish: function (index) {
                $.ajax({
                    type: "DELETE" ,
                    async: true ,
                    url: `/api/${index}`,
                    timeout: 3000
                });
                getWishList();
            }
        }
    });
 
    // search
    $("#searchButton").click(function () {
        const query = $("#searchBox").val();
        $.get(`/api/search?query=${query}`, function (response) {
            search_result.search_result = response;
            $('#search-result').attr('style','visible');
        });
    });
 
    // Enter
    $("#searchBox").keydown(function(key) {
        if (key.keyCode === 13) {
            const query = $("#searchBox").val();
            $.get(`/api/search?query=${query}`, function (response) {
                search_result.search_result = response;
                $('#search-result').attr('style','visible');
            });
        }
    });
 
    $("#wishButton").click(function () {
        $.ajax({
            type: "POST" ,
            async: true ,
            url: "/api",
            timeout: 3000,
            data: JSON.stringify(search_result.search_result),
            contentType: "application/json",
            error: function (request, status, error) {
 
            },
            success: function (response, status, request) {
                getWishList();
            }
        });
    });
 
    function getWishList(){
        $.get(`/api/all`, function (response) {
            wish_list.wish_list = response;
        });
    }
 
    $(document).ready(function () {
        console.log("init")
    });
 
})(jQuery);
Colored by Color Scripter
cs

2) 화면

- 검색

- 위시리스트 추가

- 방문 추가

- 위시리스트 삭제