后台管理系统：登录页

天郁青

已于 2024-11-08 16:24:45 修改

阅读量926

点赞数 4

分类专栏： # 项目文章标签：前端

于 2024-11-08 09:02:22 首次发布

本文链接：https://blog.csdn.net/Jourkern/article/details/143612891

版权

项目专栏收录该内容

5 篇文章

订阅专栏

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

登录页的各种功能介绍

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

一、网页设计

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

二、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和password
      var username = $("#username").val();
      var password = $("#password").val();

      //判断用户名和密码是否正确
      if (username == "admin" && password == "123456") {

        //发送ajax请求
        $.ajax(
          {

            //请求地址
            url: "http://localhost:8080/api/v1/admin/user/login",

            //发送请求方式，请求方式为post
            type: "post",

            //请求参数
            data: {
              username: username,
              password: password
            },

            //请求头
            dataType: "json",

            //当头请求成功时
            success: function (res) {

              //判断返回的msg值是否为"登录成功"
              if (res.msg == "登录成功") {

                //如果为登录成功，将token存入本地存储sessionStorage
                sessionStorage.setItem("token", res.token)

                //并提示用户登录成功
                alert("登录成功")

                //等用户点击后进行最后跳转至目标页面
                location.href = "./homepage.html"
              }
            },

            //如果为登录失败，对用户进行提示
            error: function (err) {

              //对用户弹窗提示登录失败
              alert("登录失败")
            }
          }
        )
      }
      
    //用户名或密码错误时对用户提示
      else {
        alert("账号或密码错误")
      }

    }

  })

})