Contoh untuk menerangkan cara melaksanakan fungsi log masuk pada bahagian hadapan web-Soal Jawab bahagian hadapan-php.cn

Contoh untuk menerangkan cara melaksanakan fungsi log masuk pada bahagian hadapan web

PHPz

Lepaskan： 2023-04-17 14:23:04

asal

2983 orang telah melayarinya

Dengan perkembangan teknologi Internet yang berterusan, semakin banyak laman web dan aplikasi memerlukan pengguna untuk log masuk sebelum ia boleh digunakan. Dalam kes ini, melaksanakan fungsi log masuk pada bahagian hadapan Web telah menjadi tugas yang sangat penting. Artikel ini akan memperkenalkan cara menggunakan hujung hadapan web untuk melaksanakan fungsi log masuk.

1. Prinsip log masuk pengguna
Biasanya, prinsip melaksanakan fungsi log masuk pada bahagian hadapan Web termasuk langkah berikut:

Pengguna memasuki pengguna nama dan kata laluan pada halaman log masuk. Klik butang log masuk;
Kod bahagian hadapan membungkus nama pengguna dan kata laluan ke dalam paket data dan menghantarnya ke bahagian belakang menggunakan teknologi Ajax; backend melakukan pengesahan identiti selepas menerima paket data, dan jika pengesahan lulus Jika maklumat log masuk yang berjaya dikembalikan, maklumat kegagalan akan dikembalikan
Hujung hadapan akan melakukan gesaan atau lompatan halaman yang sepadan berdasarkan maklumat yang dikembalikan oleh; hujung belakang.
2. Kod bahagian hadapan untuk melaksanakan fungsi log masuk

Yang pertama ialah reka bentuk reka letak dan gaya halaman log masuk, yang secara amnya boleh dilaksanakan menggunakan teknologi seperti HTML, CSS dan JavaScript . Berikut ialah contoh halaman log masuk mudah:

Kod di atas melaksanakan halaman log masuk mudah, termasuk kotak input nama pengguna, kotak input kata laluan dan butang log masuk. Seterusnya, anda perlu menulis kod JavaScript untuk menghantar paket data ke bahagian belakang apabila pengguna mengklik butang log masuk. Berikut ialah contoh coretan kod:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>用户登录</title>
  <style type="text/css">
  body {
    background-color: #f4f4f4;
  }
  .container {
    margin: 50px auto;
    width: 500px;
    height: 300px;
    padding-top: 50px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 0px 10px #aaa;
  }
  input[type=text], input[type=password] {
    width: 300px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding-left: 10px;
    margin-bottom: 10px;
    font-size: 16px;
  }
  input[type=submit] {
    width: 100px;
    height: 30px;
    border-radius: 5px;
    background-color: #3385ff;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
  }
  </style>
</head>
<body>
  <div class="container">
    <h1>用户登录</h1>
    <form id="loginForm" action="" method="post">
      <input type="text" name="username" placeholder="请输入用户名" required>
      <br>
      <input type="password" name="password" placeholder="请输入密码" required>
      <br>
      <input type="submit" value="登录">
    </form>
  </div>
</body>
</html>

Salin selepas log masuk

Kod di atas menggunakan JavaScript untuk menambah pendengar kepada acara penyerahan borang Apabila pengguna mengklik butang log masuk, paket data dibina dan dihantar ke siaran melalui akhir Ajax. Selepas menerima respons daripada pelayan, lakukan gesaan dan operasi yang sepadan berdasarkan data respons.

// 获取表单元素
var loginForm = document.getElementById('loginForm');
var usernameInput = loginForm.querySelector('input[name=username]');
var passwordInput = loginForm.querySelector('input[name=password]');

// 监听表单提交事件
loginForm.addEventListener('submit', function (event) {
  event.preventDefault();  // 阻止表单的默认提交行为

  // 构造请求数据
  var formData = new FormData();
  formData.append('username', usernameInput.value);
  formData.append('password', passwordInput.value);

  // 发送Ajax请求
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/login');
  xhr.send(formData);

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {  // 请求已完成
      if (xhr.status === 200) {  // 获取数据成功
        var result = JSON.parse(xhr.responseText);
        if (result.status === 'success') {
          alert('登录成功！');
        } else {
          alert('用户名或密码错误！');
        }
      } else {  // 请求失败
        alert('服务器繁忙，请稍后再试！');
      }
    }
  };
});

Salin selepas log masuk

3. Kod bahagian belakang untuk melaksanakan fungsi log masuk

Kami telah memperkenalkan kod untuk bahagian hadapan Web untuk melaksanakan fungsi log masuk Seterusnya, kami perlu menulis kod bahagian belakang untuk diproses paket data yang dihantar oleh bahagian hadapan dan mengesahkan identiti. Memandangkan pelaksanaan kod back-end berkaitan dengan teknologi back-end tertentu, ia tidak akan diperkenalkan secara terperinci di sini.

Apabila bahagian belakang melengkapkan pengesahan pengguna, ia perlu mengembalikan paket data dalam format JSON Formatnya adalah seperti berikut:

Ringkasan

{
  "status": "success",   // 登录成功，返回 "success"；登录失败，返回 "fail"
  "message": "登录成功！"  // 登录成功的提示信息
}

Salin selepas log masuk

Fungsi log masuk Web front-end adalah kerja penting. Kod bahagian hadapan perlu mengesahkan dan membungkus data yang dimasukkan oleh pengguna dan menghantarnya ke bahagian belakang melalui teknologi Ajax. Kod bahagian belakang memerlukan pengesahan dan mengembalikan maklumat kejayaan atau kegagalan. Apabila melaksanakan fungsi log masuk, anda juga perlu memberi perhatian kepada pengalaman pengguna dan keselamatan data.

Atas ialah kandungan terperinci Contoh untuk menerangkan cara melaksanakan fungsi log masuk pada bahagian hadapan web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!