2023-09-22 10:45:43 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="author" content="zifan">
|
|
|
|
|
<meta name="keywords" content="物联网">
|
|
|
|
|
<title>黑名单列表</title>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
justify-items: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.back {
|
|
|
|
|
background-color: rgba(41, 117, 117, 0.667);
|
|
|
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
form {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div>
|
2023-09-22 11:20:25 +08:00
|
|
|
<form class="blackfrom">
|
2023-09-22 10:45:43 +08:00
|
|
|
<label>ip地址:</label>
|
2023-09-22 11:20:25 +08:00
|
|
|
<input name="ipaddr" id="ipInputID">
|
|
|
|
|
<button type="button" onclick="add_ip()">添加</button>
|
|
|
|
|
<button type="button" id="del" onclick="del_ip()">删除</button>
|
2023-09-22 10:45:43 +08:00
|
|
|
</form>
|
2023-09-22 11:03:46 +08:00
|
|
|
<table class="balckTable back" width="250" align="center" border="1" cellspacing="0">
|
2023-09-22 10:45:43 +08:00
|
|
|
<thead>
|
|
|
|
|
<th>ip地址</th>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="blackTableBody" align="center">
|
|
|
|
|
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
2023-09-22 11:20:25 +08:00
|
|
|
|
|
|
|
|
function loadData() {
|
2023-09-22 10:45:43 +08:00
|
|
|
fetch("/cgi-bin/fw.cgi").then(resp => resp.json()).then(data => {
|
|
|
|
|
blackTableBody.innerText = "";
|
|
|
|
|
data.forEach(rowData => {
|
|
|
|
|
let tr = document.createElement("tr");
|
|
|
|
|
let td1 = document.createElement("td");
|
|
|
|
|
|
2023-09-22 11:03:46 +08:00
|
|
|
td1.innerText = rowData.ip;
|
2023-09-22 10:45:43 +08:00
|
|
|
|
2023-09-22 11:03:46 +08:00
|
|
|
tr.append(td1);
|
2023-09-22 10:45:43 +08:00
|
|
|
blackTableBody.append(tr);
|
|
|
|
|
});
|
2023-09-22 11:20:25 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
window.onload = function () {
|
|
|
|
|
loadData();
|
|
|
|
|
|
2023-09-22 10:45:43 +08:00
|
|
|
}
|
|
|
|
|
|
2023-09-22 11:20:25 +08:00
|
|
|
function add_ip() {
|
|
|
|
|
let url = "/cgi-bin/send.cgi";
|
|
|
|
|
let data = {
|
|
|
|
|
"code": 0,
|
|
|
|
|
"ip": ipInputID.value.trim()
|
2023-09-22 10:45:43 +08:00
|
|
|
};
|
2023-09-22 11:20:25 +08:00
|
|
|
|
|
|
|
|
fetch(url, {
|
2023-09-22 10:45:43 +08:00
|
|
|
method: "post",
|
2023-09-22 11:20:25 +08:00
|
|
|
body: JSON.stringify(data),
|
2023-09-22 10:45:43 +08:00
|
|
|
headers: {
|
|
|
|
|
"Content-Type": "application/json;charset=utf-8"
|
|
|
|
|
}
|
2023-09-22 11:20:25 +08:00
|
|
|
}).then(resp => resp.json()).then(d => {
|
|
|
|
|
console.log(d);
|
|
|
|
|
loadData();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function del_ip() {
|
|
|
|
|
let url = "/cgi-bin/send.cgi";
|
|
|
|
|
let data = {
|
|
|
|
|
"code": 1,
|
|
|
|
|
"ip": ipInputID.value.trim()
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
fetch(url, {
|
|
|
|
|
method: "post",
|
|
|
|
|
body: JSON.stringify(data),
|
|
|
|
|
headers: {
|
|
|
|
|
"Content-Type": "application/json;charset=utf-8"
|
2023-09-22 10:45:43 +08:00
|
|
|
}
|
2023-09-22 11:20:25 +08:00
|
|
|
}).then(resp => resp.json()).then(d => {
|
|
|
|
|
console.log(d);
|
|
|
|
|
loadData();
|
|
|
|
|
});
|
2023-09-22 10:45:43 +08:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
