paulbsd/dip
1
0
Fork 0
Code Issues Pull Requests Releases 10 Wiki Activity

added vue.js ajax request from static page

Browse Source
This commit is contained in:
Paul 2020-03-10 14:58:59 +01:00
parent 91aac1a8f9
commit 565a26dce7
4 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
static/js/main.js
View File

@ -1,3 +1,24 @@
function page_refresh() {
location.reload();
}
var vue = new Vue({
el: '#dip_main_div',
data () {
return {
title: "Public IP Address service",
dip: {"ip": null,
"hostname": null,
"city": null,
"country": null},
}
},
mounted () {
axios.get("https://ip.paulbsd.com")
.then(response => {
this.dip = response.data
})
.catch(err => {
// Manage the state of the application if the request
// has failed
});
}
});

1
templates/footer_js.html Normal file
View File

@ -0,0 +1 @@
<script src="static/js/main.js"></script>

6
templates/head.html
View File

@ -1,11 +1,15 @@
<head>
<title>{{ .Title }}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="static/css/main.css" />
<link rel="stylesheet" href="static/css/uikit.min.css" />
<link rel="stylesheet" href="static/css/font-awesome.min.css" />
<script src="static/js/main.js"></script>
<script src="static/js/uikit.min.js"></script>
<script src="static/js/uikit-icons.min.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/vue.min.js"></script>
</head>

10
templates/index.html
View File

@ -7,21 +7,21 @@
<caption>IP informations</caption>
<tr>
<td>IP</td>
<td>{{ .IP.IP }}</td>
<td>{{ "{{" }} dip.ip {{ "}}" }}</td>
</tr>
<tr>
<td>Reverse DNS</td>
<td>{{ .IP.Hostname }}</td>
<td>{{ "{{" }} dip.hostname {{ "}}" }}</td>
</tr>
<tr>
<td>City</td>
<td>{{ .IP.City }}</td>
<td>{{ "{{" }} dip.city {{ "}}" }}</td>
</tr>
<tr>
<td>Country</td>
<td>{{ .IP.Country }}</td>
<td>{{ "{{" }} dip.country {{ "}}" }}</td>
</tr>
<button class="dip_btn" onclick="page_refresh()">Refresh</button>
</div>
{{ template "footer_js.html" .}}
</body>
</html>