登录页面
style{
body{
background-color: aquamarine;
}
.login{
width: 350px;
height: 400px;
border: 2px solid rebeccapurple;
margin: 100px auto;
}
.login h3{
line-height: 35px;
text-align: center;
font-size: 17px;
font-weight: bold;
}
.login p {
margin: 20px;
}
input[type = password]{
margin-left: 16px;
}
.login-btn{
margin-left: 69px;
}
}
<div class="login">
<h3>校友相亲登录页</h3>
<p>
登录名：
<input type="text">
</p>
<p>
密码：
<input type="password">
</p>
<p>
<button class="login-btn" onclick="login()">登录</button>
</p>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 发送用户名和密码给后台，后台拿到数据，去数据库验证，存在返回成功，不存在返回不存在该用户 */
/* 点击登录调取后台接口 */
function login() {
if (!$('input[type=text]').val().trim() || !$('input[type=password]').val().trim()) {
alert('用户名或者密码不能为空')
return
}
// $.ajax({
// url:"http://timemeetyou.com:8889/api/private/v1/login",
// method:"post",/* 因为登录要加密，所以用post */
// data:{
// username:$('input[type=text]').val(),
// password:$('input[type=password]').val()
// },
// success:function(res){
// if(res.meta.status!=200){
// alert(res.meta.msg)
// return;
// }
// }
// })
/* post简写 */
let url = "http://timemeetyou.com:8889/api/private/v1/login";
$.post(url, {
username: $('input[type=text]').val(),
password: $('input[type=password]').val()
}, function (res) {
if (res.meta.status != 200) {
alert(res.meta.msg)
return;
}
alert(res.meta.msg)
window.localStorage.setItem('token',res.data.token)
window.location.href = 'orderPage.html'
})
}
</script>
退出登录
<button onclick="loginOut()">退出登录</button>
<table border="1">
<tr>
<th>订单ID</th>
<th>用户ID</th>
<th>订单编号</th>
<th>订单价格</th>
<th>是否付款</th>
<th>发票抬头</th>
<th>创建时间</th>
<th>更新时间</th>
</tr>
</table>
<script src="./jquery-1.12.4.js"></script>
<script>
/* 用常量来表示一个基础路径 */
const baseUrl = 'http://timemeetyou.com:8889/api/private/v1/';
getOrderList();
function getOrderList(){
$.ajax({
url: `${baseUrl}orders`,
method: 'get',
data: {
pagenum: 1,/* 必传参数 表示当前是第一页 */
pagesize: 10,/* 必传参数 表示一页显示10条 */
},
/* headers代表请求头 */
headers: {
// Authorization:window.localStorage.setItem('token')
Authorization:localStorage.token
},
success: function (res) {
console.log(res.data.goods);
res.data.goods.forEach(function (item) {
console.log(item)
$('table').append(
`
<tr>
<td>${item.order_id}</td>
<td>${item.user_id}</td>
<td>${item.order_number}</td>
<td>${item.order_price}</td>
<td>${item.order_pay}</td>
<td>${item.order_fapiao_title}</td>
<td>${rq(item.create_time)}</td>
<td>${rq(item.update_time)}</td>
</tr>
`
)
});
}
})
}
function rq(hm){
console.log(hm)
let d = new Date(hm);
let rqStr = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
return rqStr
}
/* 清除本地缓存 退出登录 */
function loginOut(){
/* 清除缓存跳转登录页 */
window.localStorage.removeItem('token');
window.location.href="login.html"
}
</script>
网友评论