登录/注册js切换

最新推荐文章于 2024-07-20 10:36:53 发布
zhaoyifei01
最新推荐文章于 2024-07-20 10:36:53 发布
阅读量131
点赞数
文章标签： javascript css
本文链接：https://blog.csdn.net/zhaoyifei01/article/details/129201406
版权
<!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>Ajax-02-登录注册-准备代码</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background: #e9eaea;
        font-family: roboto;
        user-select: none;
      }

      .container {
        width: 450px;
        margin: 30px auto;
      }

      .signup,
      .login {
        width: 50%;
        background: #fff;
        float: left;
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
        text-transform: uppercase;
      }
      .login {
        background: none;
      }
      .signup-form,
      .login-form {
        background: #fff;
        padding: 40px;
        clear: both;
        width: 100%;
        box-sizing: border-box;
        height: 400px;
      }
      .login-form {
        display: none;
      }

      .input {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        margin-bottom: 25px;
        border: 2px solid #e9eaea;
        color: #3e3e40;
        font-size: 14px;
        outline: none;
        transform: all 0.5s ease;
      }

      .input:focus {
        border: 2px solid #34b3a0;
      }

      .btn {
        width: 100%;
        background: #34b3a0;
        height: 60px;
        text-align: center;
        line-height: 60px;
        text-transform: uppercase;
        color: #fff;
        font-weight: bold;
        letter-spacing: 1px;
        cursor: pointer;
        margin-bottom: 30px;
      }

      span a {
        text-decoration: none;
        color: #000;
      }

      ::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #3e3e40;
        font-family: roboto;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="container">
        <div class="signup">注册</div>
        <div class="login">登录</div>

        <div class="signup-form">
          <input type="text" placeholder="请输入用户名" class="input" /><br />
          <input type="password" placeholder="请输入密码" class="input" /><br />
          <input
            type="password"
            placeholder="再次确认密码"
            class="input"
          /><br />
          <div class="btn">创建账号</div>
        </div>

        <div class="login-form">
          <input type="text" placeholder="请输入用户名" class="input" /><br />
          <input type="password" placeholder="请输入密码" class="input" /><br />
          <div class="btn">登录</div>
          <span><a href="#">忘记密码</a></span>
        </div>
      </div>
    </div>

    <script src="./js/axios.js"></script>
    <script>
      /* 
        接口说明:
        axios返回status 200 请求成功; data即后端返回的数据;

        注册(用户名长度需要2~15位; 密码名长度需要6~15位):
        地址: http://www.itcbc.com:8000/api/register
        方式: post
        数据: username , password
        后端响应数据如下:
        data: {
          code: 0
          message: "注册成功"
        }

        登录:
        地址: http://www.itcbc.com:8000/api/login
        方式: post
        数据: username , password
        后端响应数据如下:
        data: {
          code: 0
          message: "登录成功"
          token: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.........."
        }


        具体数据看控制台!!!
      */
      //  -----------------------START-----------------------
         const signup = document.querySelector('.signup')
      const login = document.querySelector('.login')
      const signupForm = document.querySelector('.signup-form')
      const loginForm = document.querySelector('.login-form')
      const signupBtn = document.querySelector('.signup-form .btn')
      const loginBtn = document.querySelector('.login-form .btn')

      // 注册登录转换
      signup.addEventListener('click', function() {
        loginForm.style.display = 'none'
        signupForm.style.display = 'block'

        login.style.background = 'none'
        signup.style.background = '#fff'
      })
      login.addEventListener('click', function() {
        loginForm.style.display = 'block'
        signupForm.style.display = 'none'
        login.style.background = '#fff'
        signup.style.background = 'none'
      })

      // 注册
      signupBtn.addEventListener('click', async function() {
        console.log(111)
        const username = document.querySelector('.signup-form .username').value
        const password = document.querySelector('.signup-form .password').value
        const apassword = document.querySelector('.signup-form .apassword').value

        const {data: regRes} = await axios.post('http://www.itcbc.com:8000/api/register', {
          username,
          password
        })
        console.log(regRes)
        signupForm.value = ''
        if(regRes.code === 0) {
          login.click()
        } else {
          alert(regRes.message)
        }
      })

      // 登录
      loginBtn.addEventListener('click', async function() {
        // console.log(111)
        const username = document.querySelector('.login-form .username').value
        const password = document.querySelector('.login-form .password').value

        const {data: logRes} = await axios.post('http://www.itcbc.com:8000/api/login', {
          username,
          password
        })
        console.log(logRes)
        loginForm.value = ''
        if( logRes.code === 0 ) {
          location.href = 'https://www.baidu.com'
        } else {
          alert(logRes.message)
        }
      }) 


    </script>
  </body>
</html>