added vue.js ajax request from static page

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

View File

@ -1,3 +1,24 @@
function page_refresh() { var vue = new Vue({
location.reload(); 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>

View File

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

View File

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