Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Nodejs mengendalikan permintaan log masuk
Nodejs mengendalikan permintaan log masuk
- WBOYasal
- 2023-05-13 20:25:06568semak imbas
Dengan perkembangan berterusan Internet, log masuk pengguna telah menjadi fungsi penting perkhidmatan Internet. Mengendalikan permintaan log masuk juga merupakan tugas yang sangat biasa dalam Node.js. Dalam artikel ini, saya akan menerangkan cara mengendalikan permintaan log masuk pengguna menggunakan Node.js.
Langkah 1: Sediakan persekitaran
Sebelum mula memproses permintaan log masuk, kita perlu menyediakan persekitaran terlebih dahulu, termasuk memasang Node.js, rangka kerja Express dan perpustakaan bergantung yang berkaitan. Di sini kami mengambil rangka kerja Express sebagai contoh untuk dijelaskan.
Masukkan arahan berikut pada baris arahan untuk dipasang:
npm install express --save npm install body-parser --save npm install express-session --save
Perpustakaan bergantung yang kami gunakan di sini termasuk:
- Express: Menyediakan rangka kerja program aplikasi web yang ringkas ;
- penghurai badan: digunakan untuk menghuraikan data dalam badan permintaan HTTP
- sesi ekspres: menyediakan fungsi pengurusan sesi yang ringkas dan mudah digunakan.
Langkah 2: Laksanakan antara muka bahagian hadapan
Sebelum memproses permintaan log masuk, kami perlu melaksanakan antara muka bahagian hadapan yang ringkas. Di sini kita akan menggunakan HTML dan JavaScript untuk mencapainya.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
<form action="/login" method="post">
<label>用户名：</label>
<input type="text" name="username"><br>
<label>密码：</label>
<input type="password" name="password"><br>
<button type="submit">登录</button>
</form>
</body>
</html>JavaScript:
window.onload = function () {
var form = document.querySelector('form');
form.addEventListener('submit', function (e) {
e.preventDefault(); // 阻止表单默认提交
var username = document.querySelector('input[name="username"]').value;
var password = document.querySelector('input[name="password"]').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/login');
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
alert(data.message);
};
xhr.send(JSON.stringify({ username: username, password: password }));
});
};Di sini kami melaksanakan borang log masuk mudah dan menghantar data borang ke bahagian pelayan melalui objek XMLHttpRequest. Perlu diingat bahawa kami menetapkan Content-Type pengepala permintaan kepada format application/json semasa menghantar data.
Langkah 3: Memproses permintaan log masuk
Sekarang kami telah melaksanakan antara muka bahagian hadapan yang mudah, kami perlu menerima dan memproses permintaan log masuk di bahagian pelayan.
app.js:
var express = require('express');
var bodyParser = require('body-parser');
var session = require('express-session');
var app = express();
app.use(bodyParser.json());
app.use(session({
secret: 'your secret',
resave: false,
saveUninitialized: true
}));
// 处理登录请求
app.post('/login', function (req, res) {
var username = req.body.username;
var password = req.body.password;
if (username === 'admin' && password === '123456') {
req.session.username = username; // 将用户名存储到session中
res.send({ success: true, message: '登录成功！' });
} else {
res.send({ success: false, message: '用户名或密码不正确！' });
}
});
app.listen(3000, function () {
console.log('Server running on http://localhost:3000');
});Di sini kami menggunakan kaedah app.post yang disediakan oleh rangka kerja Express untuk mengendalikan permintaan POST Jika nama pengguna dan kata laluan adalah betul, kami menyimpan nama pengguna ke dalam session dan Mengembalikan respons, sebaliknya mengembalikan respons lain.
Perlu diambil perhatian bahawa sebelum memproses permintaan, kami menggunakan body-parser middleware untuk menghuraikan data format JSON dalam badan permintaan HTTP, dan menggunakan express-session middleware untuk menyediakan fungsi pengurusan sesi.
Langkah 4: Kendalikan status log masuk
Kini, kami boleh mengendalikan permintaan log masuk pengguna, tetapi kami masih perlu mengendalikan status log masuk. Dalam antara muka bahagian hadapan, kami boleh mendapatkan status log masuk pengguna semasa dengan menghantar permintaan GET.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>检查登录状态</title>
</head>
<body>
<button id="checkLogin">检查登录状态</button>
<script>
document.getElementById('checkLogin').addEventListener('click', function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/checkLogin');
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
alert(data.message);
};
xhr.send();
});
</script>
</body>
</html>JavaScript:
window.onload = function () {
var btn = document.getElementById('checkLogin');
var xhr = new XMLHttpRequest();
xhr.open('GET', '/checkLogin');
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
if (data.success) {
btn.innerHTML = '您已登录，点击注销';
} else {
btn.innerHTML = '您未登录，点击登录';
}
};
xhr.send();
};Di sini kami melaksanakan fungsi untuk menyemak status log masuk, dengan menghantar permintaan GET kepada pelayan untuk menentukan sama ada pengguna semasa log masuk. Kami menukar teks butang kepada "Klik untuk log keluar" jika sudah log masuk, jika tidak kepada "Klik untuk log masuk".
app.js:
// 检查登录状态
app.get('/checkLogin', function (req, res) {
var username = req.session.username;
if (username) {
res.send({ success: true, message: '您已经登录了！' });
} else {
res.send({ success: false, message: '您还没有登录！' });
}
});Di sini kami menggunakan kaedah app.get untuk mengendalikan permintaan GET Jika pengguna semasa log masuk, kami mengembalikan respons, jika tidak, kami mengembalikan respons yang lain.
Langkah 5: Proses permintaan log keluar
Akhir sekali, kami juga perlu memproses permintaan log keluar pengguna. Dalam antara muka bahagian hadapan, apabila pengguna mengklik butang log keluar, kami perlu menghantar permintaan log keluar ke pelayan.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注销</title>
</head>
<body>
<button id="logout">注销</button>
<script>
document.getElementById('logout').addEventListener('click', function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/logout');
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
alert(data.message);
};
xhr.send();
});
</script>
</body>
</html>JavaScript:
window.onload = function () {
var btn = document.getElementById('logout');
var xhr = new XMLHttpRequest();
xhr.open('GET', '/checkLogin');
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
if (data.success) {
btn.style.display = 'block';
btn.innerHTML = '注销';
} else {
btn.style.display = 'none';
}
};
xhr.send();
btn.addEventListener('click', function () {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/logout');
xhr.onload = function () {
var data = JSON.parse(xhr.responseText);
if (data.success) {
btn.style.display = 'none';
alert(data.message);
}
};
xhr.send();
});
};Di sini kami melaksanakan fungsi log keluar untuk log keluar pengguna semasa dengan menghantar permintaan GET ke pelayan. Perlu diingat bahawa apabila mengklik butang log keluar, kita perlu terlebih dahulu menyemak sama ada pengguna semasa telah log masuk.
app.js:
// 处理注销请求
app.get('/logout', function (req, res) {
req.session.destroy(function () {
res.send({ success: true, message: '您已经成功注销了！' });
});
});Di sini kami menggunakan kaedah req.session.destroy untuk memusnahkan sesi semasa untuk melaksanakan fungsi log keluar.
Ringkasan:
Artikel ini memperkenalkan cara menggunakan rangka kerja Node.js dan Express untuk mengendalikan permintaan log masuk pengguna. Dengan melaksanakan antara muka hadapan yang mudah, kami telah menguasai cara menggunakan objek XMLHttpRequest untuk menghantar permintaan POST dan GET, sekali gus merealisasikan fungsi interaktif bahagian hadapan. Dengan melaksanakan fungsi log masuk dan log keluar pada bahagian pelayan, kami mempelajari cara menggunakan perisian tengah yang disediakan oleh rangka kerja Express untuk mengendalikan permintaan HTTP dan fungsi pengurusan sesi. Saya percaya bahawa selepas menguasai kandungan yang diperkenalkan dalam artikel ini, anda sudah boleh mengendalikan permintaan log masuk pengguna dengan mudah.
Atas ialah kandungan terperinci Nodejs mengendalikan permintaan log masuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!