Rumah > Artikel > hujung hadapan web > Contoh untuk menerangkan cara melaksanakan fungsi log masuk pada bahagian hadapan web
Contoh untuk menerangkan cara melaksanakan fungsi log masuk pada bahagian hadapan web
- PHPzasal
- 2023-04-17 14:17:302956semak imbas
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
<!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>
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('服务器繁忙，请稍后再试！');
}
}
};
});
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:
{
"status": "success", // 登录成功，返回 "success"；登录失败，返回 "fail"
"message": "登录成功！" // 登录成功的提示信息
}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!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn