后台管理系统：登录页

本次项目为后台管理系统，在本系统内第一个页面是登录页面

登录页的各种功能介绍

作为登录页需要具有的功能有：点击登录时记录账户密码，对比账户密码的正确性，提示用户当前状态，登录完成后跳转至首页等功能。

一、网页设计

以下面图片为例搭建框架和编写样式

二、HTML代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后台管理系统登录界面</title><link rel="stylesheet" href="./CSS/reset.css"><link rel="stylesheet" href="./CSS/index.css">
</head><body><div class="bd"><div class="b1"><div class="b3">CopyRight &copy; 2019 </div><div class="b4 pos">All Right Reserved</div><div class="b5"><div class="b6"></div><div class="i1 img"></div><div class="i2 img"></div><input type="text" class="b7" value="admin" id="username"><input type="password" class="b7 pos2" value="123456" id="password"><button class="b8" id="btn">登 录</button></div></div></div>
</body>
<script src="./JS/jquery.min.js"></script>
<script src="./JS/index.js"></script></html>

三、CSS样式

/* 将所有标签的字体大小设置为16px */
*
{font-size: 16px;
}
/* 设置背景图片 */
.bd
{width: 100vw;height: 100vh;/* background-position: center; */background-size:100% 100%;  background-repeat: no-repeat;background-image: url(../images/index/login_bg.jpg);
}
/* 设置位于顶部的组件大盒子的位置 */
.b1
{width: 1200px;height: 100%;/* background-color: black; */margin: 0 auto;position: relative;
}
/* 设置在顶部右侧的文字排列 */
.b3 , .b4
{font-size: 10px;color: white;position: absolute;right: 0;top: 35px;
}
.pos
{top:55px ;
}/* 设置页面中间位置的文本登录提示框 */
.b5
{width: 400px;height: 310px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;background-color: #edeff0;/* position: relative; */
}
.b6
{width: 100%;height: 60px;background-color: white;background-repeat: no-repeat;background-position: center;background-image: url(../images/index/login_title.png);
}
.b7
{width: 280px;height: 35px;position: absolute;left: 50%;margin-left: -160px;top: 85px;padding-left: 40px;border-radius: 0px;border:1px solid #dddddd ;color: #585757;
}
.pos2
{top: 150px;
}
.b7:focus
{outline: none;
}.img{background-position: center;background-size: 100% 100% ;
}
.i1
{width: 18px;height: 18px;position: absolute;top: 94px;left: 49px;z-index: 99;background-image: url(../images/index/用户.png);
}
.i2
{width: 18px;height: 18px;position: absolute;top: 160px;left: 49px;z-index: 99;background-image: url(../images/index/钥匙.png);
}.b8
{width: 320px;height: 40px;position: absolute;background-color: #19b9e7;text-align: center;line-height: 40px;font-size: 18px;color: white;margin-left: -160px;left: 50%;bottom: 40px;cursor: pointer;
}

四、js代码

//创建一个入口函数
$(function () {//创建一个盒子的点击事件$("#btn").on({"click": function (e) {//阻止默认事件e.preventDefault()//获取用户名和密码并赋值给username和passwordvar username = $("#username").val();var password = $("#password").val();//判断用户名和密码是否正确if (username == "admin" && password == "123456") {//发送ajax请求$.ajax({//请求地址url: "http://localhost:8080/api/v1/admin/user/login",//发送请求方式，请求方式为posttype: "post",//请求参数data: {username: username,password: password},//请求头dataType: "json",//当头请求成功时success: function (res) {//判断返回的msg值是否为"登录成功"if (res.msg == "登录成功") {//如果为登录成功，将token存入本地存储sessionStoragesessionStorage.setItem("token", res.token)//并提示用户登录成功alert("登录成功")//等用户点击后进行最后跳转至目标页面location.href = "./homepage.html"}},//如果为登录失败，对用户进行提示error: function (err) {//对用户弹窗提示登录失败alert("登录失败")}})}//用户名或密码错误时对用户提示else {alert("账号或密码错误")}}})})