登陆
查询
用户名:
密码:
邮箱:
手机号:
</tbody>
</table>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 点击登陆 */
let url = "http://timemeetyou.com:8889/api/private/v1/";
$('#buttonId1').click(function () {
$.post(url + 'login', { username: 'admin', password: '123456' }, function (res) {
localStorage.token = res.data.token;//储存数据
$('#buttonId1').slideUp('slow');
getUsers();
})
})
/* 获取用户列表数据 */
function getUsers() {
$.ajax({
url: url + 'users',
headers: {
Authorization: localStorage.token
},
data: {
pagenum: 1,
pagesize: 10
},
success: function (res) {
console.log(res);
$('tbody').html('');/* 先清空数据 */
for (var i in res.data.users) {
$('tbody').append(/* 在抽入 */
`<tr>
<td>${res.data.users[i].username}</td>
<td>${res.data.users[i].mobile}</td>
<td>${res.data.users[i].email}</td>
<td><button onclick='del(${res.data.users[i].id})'>删除</button></td>
</tr>`
//删除列表
)
}
}
})
}
$('#buttonId2').click(function () {
$.ajax({
url: url + 'users/' + $('#userId').val(),
headers: {
Authorization: localStorage.token
},
success: function (res) {
/* 出现提示 */
$('#msg').html(res.meta.msg)
/* 过三秒 提示消失 */
setTimeout(function () {
$('#msg').html('')
}, 3000)
/* 更新最新的表格信息 */
// getUsers();
$('tbody').html('');
$('tbody').append(
`
<tr>
<td>${res.data.username}</td>
<td>${res.data.mobile}</td>
<td>${res.data.email}</td>
<td><button onclick="del(${res.data.id})">删除</button></td>
</tr>
`
)
}
})
})
/* 删除 */
function del(id) {
console.log(id);
$.ajax({
url: url + 'users/' + id,
method: 'delete',
headers: {
Authorization: localStorage.token
},
/* */
success: function (res) {
$('#msg').html(res.meta.msg)
setTimeout(function () {
$('#msg').html('')
}, 3000)
getUsers();/* 更新最新表格信息 */
}
})
}
/* 添加数据 */
$('#submit').click(function () {
$.ajax({
url: url + 'users',
method: 'post',
headers: {
Authorization: localStorage.token
},
data: {
username: $('#username').val(),
password: $('#password').val(),
email: $('#email').val(),
mobile: $('#mobile').val(),
},
success: function (res) {
$('#msg').html(res.meta.msg)
setTimeout(function () {
$('#msg').html('')
}, 3000)
$('#username').val('')
$('#password').val('')
$('#email').val('')
$('#mobile').val('')
getUsers();
}
})
})
</script>
| 姓名 | 电话 | 电子邮箱 |
|---|