前端学习的第五周

最新推荐文章于 2024-07-24 23:00:08 发布

鲲罹

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量37

点赞数 1

文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/2202_75675550/article/details/129781030

版权

这周学习了有关scss和Jquery中的ajax请求，并运用ajax请求写了一个关于登录注册的页面

但仍然有很多的不足需要改进，我也希望在后面的学习不断地完善自我，提升自我对编程和前端开发的能力。

HTML界面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>logIn</title>
    <link rel="stylesheet" href="../css/new01.css">
  //引入外部的css文件
</head>

<body>
    <div id="main">
        <div class="user">
<!--设置用户登录账户-->
            <h2>账户登录</h2>
            <p>你若不离不弃，我便生死相依</p>
            <form class="loginForm">
                <h3>账号</h3>
                <input id="us" type="text" placeholder="请输入你的账户名"><br>
                <h3>密码</h3>
                <input id="ps" type="password" placeholder="请输入你的密码"><br>
            </form>
        <!--特别注意，不要在form标签中设置点击事件或者button，可能会死效-->
         <button id="btn">登录</button></div>
        //设置登录按钮
        <div id="logUp"><span>没有账号</span>
            <button id="block">立即注册</button>
<!--若没有账户，可以点击此处注册用户-->
        </div>
        <div class="img">
            <img src="img/login.png" alt="">
            <p>欢迎使用偌伊登录界面</p>
            <p style="top:180px ;font-size:10px">Welcome to use Ruoyi landing page</p>
        </div>
    </div>
    <script src="login.js"></script>
<!--引入外部的JS文件-->
</body>

</html>

scss文件

$baseColor : rgb(210, 228, 247);
$width-box : 100%;
$height: 500px;
$cursor: pointer;
$weight:400;
$baseBorder:1px black solid;
#main {
 background: linear-gradient(to right,rgb(210, 228, 247),rgb(105, 167, 232)  );
 margin-top: 100px;
 height: $height;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: $width-box;
 display: flex;
 justify-content: center;
  #logUp{
      bottom: 10%;
      left: 32%;
      cursor: $cursor;
      position: absolute;
      span{
         font-size: 12px;
      }
      button{
         border: none;
         background:rgba(0, 0, 0,0);
         color: black;
      }
      button:hover{
         color: purple;
      }
    }
    #btn{
   background-color:beige;
   border-radius: 5px;
   color: rgb(167, 182, 182);
   width: $width-box;
   height: 20px;
   margin-top: 20px;
   border: none;
   cursor: $cursor;
}
 .user {
    height:$height;
   margin-top:50px;
   width: $width-box/4;
   padding-right: 30px;
    font-size: 10px;
    line-height: 2;
   
    h2{
      font-weight: $weight;
      font-size: 20px;
    }
    h3{
      font-size: 15px;
      font-weight: $weight;
    }
    p{
      font-weight: $weight/2;
      font-size:10px;
    }
   .loginForm{
      width: $width-box;
      input{
   cursor: text;
   border: none;
   background-color: $baseColor;
   border-bottom: $baseBorder;
   width: $width-box;
   margin: 10px 0;
}
#code{
   cursor: text;
   border-bottom: $baseBorder;
   margin: 10px 0;
   width: $width-box/2;
}
.codeimg{
 width: 70px;
 height: 20px;
 display: block;
 background-color: #fff;
 border: 0.5px black solid;
border-radius: 2px;
}

   }
 };
 .img{
 img{
    width: 100%;
    height: $height;
    position: relative;
 }
 p{
   width: $width-box/4;
   position: absolute;
 left: 50%;
 transform: translate(0,-125%);
   top: 150px;
   text-align: center;
   line-height: 1.5;
   cursor:pointer;
   color: rgb(0, 0, 0);
   font-size:20px;
 }
 }
}

js文件

let btn = document.getElementById('btn')
let ps= document.getElementById('ps')
let us= document.getElementById('us')
btn.addEventListenter("click",function(){

    //console.log("登录");
let passname={
    us : us.value,
    ps : ps.value
}
$.ajax({
    url:"http://118.195.129.130:3000/user/login",
    type:"post",
    data:passname,
    dataType:"json",
    success:function(msg){
        console.log(msg);
        alert("登录成功")
    },
    error:function(msg){
        console.log(msg);
         alert("用户名或密码错误")
    }
})
})

其中在JS文件中最好不要用Jquery中引入的方法，虽然确实能方便不少，但前期还是以原生的js为主，而且随着编码的不断进步，jquery也逐渐走向下坡路。但最最重要的还是不断地提升自己的实力和为自己创造能改变现状的能力，我们一直都在路上。

学习前端的第35天

鲲罹

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习的第五周

其中在JS文件中最好不要用Jquery中引入的方法，虽然确实能方便不少，但前期还是以原生的js为主，而且随着编码的不断进步，jquery也逐渐走向下坡路。但最最重要的还是不断地提升自己的实力和为自己创造能改变现状的能力，我们一直都在路上。这周学习了有关scss和Jquery中的ajax请求，并运用ajax请求写了一个关于登录注册的页面。但仍然有很多的不足需要改进，我也希望在后面的学习不断地完善自我，提升自我对编程和前端开发的能力。
复制链接

扫一扫