Web_Vue/test.html at main · Playdata-Bigdata-Course/Web_Vue · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }
        td,
        th {
            border: 1px solid #DDDDDD;
            text-align: left;
            padding: 8px;
        }
        tr:nth-child(even) {
            background-color: #DDDDDD;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>Hello App!</h1>
        <p>
            <!-- 기본적으로 `<router-link>`는 `<a>` 태그로 렌더링됩니다.-->
            <router-link to="/name">Go to name</router-link>
            <router-link to="/table">Go to table</router-link>
        </p>
        <router-view></router-view>
    </div>
    <template id="tables">
        <table>
            <tr>
                <th v-for="(item, key, index) in dataList[0]">{{key}}</th>
            </tr>
            <template v-for="item in dataList">
                <tr>
                    <template v-for="(item2, key2) in item">
                        <td>{{item[key2]}}</td>
                    </template>
                </tr>
            </template>
        </table>
    </template>
    <script>
        //추가 미션 - 버튼 클릭하면 서버의 dept 등의 table들 select 해서 화면에 table 구조로 출력하기
        let model = {dataList : []};
        (() => {
            let tempmodel = {};
            axios.get('http://localhost/step11_BackLogic/index.jsp')
                .then(function (response) {
                    console.log("성공");
                    console.log(response);
                    console.log(response.data);
                    model.dataList = (response.data);
                })
                .catch(function (error) {
                    console.log("실패");
                    console.log(error);
                });
                return tempmodel;
        })();
        function myFun(){
            alert("myFun");
        }
        //router라는 기술로 개발되는 각각의 component들을 개별 객체들로 간주
        const name = { template: '<div><button v-on:click="this.myFun()">유재석</button></div>' }
        const table = {
            data: ()=>{return model},
            template: `#tables`
        }
        const routes = [
            { path: '/name', component: name },
            { path: '/table', component: table }
        ]
        const router = new VueRouter({
            routes // `routes: routes`의 줄임
        })
        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>
</html>