<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="text" class="username"><br>
<input type="text" class="password"><br>
<input type="button" value="登录" class="btn">
<table border="1" width="600">
<thead>
<tr>
<th>姓名</th>
<th>手机号</th>
<th>部门编号</th>
<th>权限</th>
<th>注册时间</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script src="./js/get.js"></script>
<script>
// 选项器
const loginUrl = "http://10.11.55.86:3000/login";
const getUserUrl = "http://10.11.55.86:3000/getuser";
// 1. 初始获取用户信息;
getUser();
// 2. 点击登录按钮
$(".btn").onclick = function(){
// 3. 发起登录请求
ajaxGet({
url: loginUrl,
data: {
username: $(".username").value,
password: $(".password").value
},
success(xhr){
// 解析数据
const res = JSON.parse(xhr.responseText);
// 判断是否登录成功
if(res.code === 0){
// 4. 将登录成功后的用户信息存到本地存储中
localStorage.setItem("userData", JSON.stringify(res.data));
// 5. 获取用户信息
getUser();
}
}
})
}
// 获取用户信息功能
function getUser(){
// 初始获取本地存储中可能存在的用户信息中的token
const userData = JSON.parse(localStorage.getItem("userData")) || {};
const token = userData.token;
// 发起获取用户信息请求
ajaxGet({
url: getUserUrl,
data: { token },
success(xhr){
// 解析数据
const res = JSON.parse(xhr.responseText);
// 拼接页面结构
let str = "";
res.data.forEach(val=>{
str += `<tr>
<td>${val.uName}</td>
<td>${val.tel}</td>
<td>${val.tId}</td>
<td>${val.power}</td>
<td>${new Date(val.joinTime).toLocaleDateString()}</td>
</tr>`;
})
// 设置到指定视图
$("tbody").innerHTML = str;
}
})
}
function $(s){
return document.querySelector(s)
}
</script>
</html>
655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
