uliweb-apijson/demo/apps/apijson_demo/templates/index.html at 962a59fcbd867a73316e0c80d65858178a402549 · zhangchunlin/uliweb-apijson · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
{{extend "layout_demo.html"}}

{{block content_header_title}}<h1>uliweb-apijson api examples</h1>{{end content_header_title}}

{{block content_main}}
{{use "ui.vue"}}
{{use "ui.iview"}}

<div id="app" class='box'>
<div class="box-body">
    <tabs v-model:value="tab_current" type="card" :animated="false">
        <tab-pane label="apijson get" name="tab_get"></tab-pane>
        <tab-pane label="apijson head" name="tab_head"></tab-pane>
        <tab-pane label="apijson post" name="tab_post"></tab-pane>
        <tab-pane label="apijson put" name="tab_put"></tab-pane>
        <tab-pane label="apijson delete" name="tab_delete"></tab-pane>
    </tabs>
    <Row>
        <i-col span="3"><div align="center">login user</div></i-col>
        <i-col span="8"><i-input value="{{=user_info}}" readonly/></i-col>
        {{if request.user:}}
        <i-col span="1"><div align="center"><i-button type="warning" size="large" @click="logout">Logout</i-button></div></i-col>
        {{else:}}
        <i-col span="1"><div align="center"><i-button type="primary" size="large" @click="login">Login</i-button></div></i-col>
        {{pass}}
    </Row>
    <Row v-if="tab_current==='tab_get'">
            <i-col span="3"><div align="center">HTTP POST URL</div></i-col>
            <i-col span="8"><i-input value="/apijson/get" readonly/></i-col>
    </Row>
    <Row v-if="tab_current==='tab_get'">
        <i-col span="3"><div align="center"><strong>apijson get</strong> request examples</div></i-col>
        <i-col span="8">
            <i-select v-model="select_current">
                <i-option v-for="item in request_get" :value="item.value" :key="item.value">{ item.label }</i-option>
            </i-select>
        </i-col>
    </Row>

    <Row v-if="tab_current==='tab_head'">
        <i-col span="3"><div align="center">HTTP HEAD URL</div></i-col>
        <i-col span="8"><i-input value="/apijson/head" readonly/></i-col>
    </Row>
    <Row v-if="tab_current==='tab_head'">
        <i-col span="3"><div align="center"><strong>apijson head</strong> request examples</div></i-col>
        <i-col span="8">
            <i-select v-model="select_current">
                <i-option v-for="item in request_head" :value="item.value" :key="item.value">{ item.label }</i-option>
            </i-select>
        </i-col>
    </Row>

    <Row v-if="tab_current==='tab_post'">
            <i-col span="3"><div align="center">POST URL</div></i-col>
            <i-col span="8"><i-input value="/apijson/post" readonly/></i-col>
    </Row>
    <Row v-if="tab_current==='tab_post'">
        <i-col span="3"><div align="center"><strong>apijson post</strong> request examples</div></i-col>
        <i-col span="8">
            <i-select v-model="select_current">
                <i-option v-for="item in request_post" :value="item.value" :key="item.value">{ item.label }</i-option>
            </i-select>
        </i-col>
    </Row>

    <Row v-if="tab_current==='tab_put'">
        <i-col span="3"><div align="center">PUT URL</div></i-col>
        <i-col span="8"><i-input value="/apijson/put" readonly/></i-col>
    </Row>
    <Row v-if="tab_current==='tab_put'">
        <i-col span="3"><div align="center"><strong>apijson put</strong> request examples</div></i-col>
        <i-col span="8">
            <i-select v-model="select_current">
                <i-option v-for="item in request_put" :value="item.value" :key="item.value">{ item.label }</i-option>
            </i-select>
        </i-col>
    </Row>

    <Row v-if="tab_current==='tab_delete'">
        <i-col span="3"><div align="center">DELETE URL</div></i-col>
        <i-col span="8"><i-input value="/apijson/delete" readonly/></i-col>
    </Row>
    <Row v-if="tab_current==='tab_delete'">
        <i-col span="3"><div align="center"><strong>apijson delete</strong> request examples</div></i-col>
        <i-col span="8">
            <i-select v-model="select_current">
                <i-option v-for="item in request_delete" :value="item.value" :key="item.value">{ item.label }</i-option>
            </i-select>
        </i-col>
    </Row>

    <Row>
        <i-col span="3"><div align="center">request data</div></i-col>
        <i-col span="8"><i-input v-model="request_data" type="textarea" :autosize="{minRows: 3,maxRows: 15}" placeholder="request data" /></i-col>
        <i-col span="1"><div align="center"><i-button type="primary" size="large" @click="post_request_data" v-bind:disabled="!can_post">Post</i-button></div></i-col>
    </Row>
    <Row>
        <i-col span="3"><div align="center">response data</div></i-col>
        <i-col span="8"><i-input v-model="response_data" type="textarea" readonly :autosize="{minRows: 5,maxRows: 30}" /></i-col>
    </Row>
</div>
</div>
<script>
var vm = new Vue({
    el: '#app',
    delimiters: ['{', '}'],
    data: {
        request_get : {{<<request_get_json}},
        request_head : {{<<request_head_json}},
        request_post : {{<<request_post_json}},
        request_put : {{<<request_put_json}},
        request_delete : {{<<request_delete_json}},
        request_data : "",
        select_current : "",
        can_post : true,
        response_data : "",
        tab_current : "tab_get",
        tab2url : {
            "tab_get":"{{=url_for('uliweb_apijson.apijson.views.ApiJson.get')}}",
            "tab_head":"{{=url_for('uliweb_apijson.apijson.views.ApiJson.head')}}",
            "tab_post":"{{=url_for('uliweb_apijson.apijson.views.ApiJson.post')}}",
            "tab_put":"{{=url_for('uliweb_apijson.apijson.views.ApiJson.put')}}",
            "tab_delete":"{{=url_for('uliweb_apijson.apijson.views.ApiJson.delete')}}"
        }
    },
    methods: {
        init_default: function(){
            vm.request_data = vm.request_get[0].value
            vm.select_current = vm.request_data
        },
        post_request_data: function(){
            $.ajax({
                type: "POST",
                contentType: 'application/json',
                url: vm.tab2url[vm.tab_current],
                data: vm.request_data,
                success: function (data) {
                    vm.response_data = JSON.stringify(data,null,4)
                    vm.can_post = false
                }
            })
        },
        login: function(){window.location.href="{{=url_for('uliweb_apps.login.views.login')}}"},
        logout: function(){window.location.href="{{=url_for('uliweb_apps.login.views.logout')}}"}
    },
    watch: {
        request_data : function(n,o){
            vm.can_post = true
        },
        tab_current : function(n,o){
            if (n=="tab_get") {
                vm.request_data = vm.request_get[0].value
            }
            else if (n=="tab_head") {
                vm.request_data = vm.request_head[0].value
            }
            else if (n=="tab_post") {
                vm.request_data = vm.request_post[0].value
            }
            else if (n=="tab_put") {
                vm.request_data = vm.request_put[0].value
            }
            else if (n=="tab_delete") {
                vm.request_data = vm.request_delete[0].value
            }
            vm.select_current = vm.request_data
            vm.response_data = ""
        },
        select_current : function(n,o){
            if (n!=null && n!="" && n!==vm.request_data) {
                vm.request_data = n
            }
            else {
                vm.select_current = vm.request_data
            }
        }
    }
})
vm.init_default()
</script>
{{end content_main}}