Nodejs mengendalikan permintaan log masuk
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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?
Mar 19, 2025 pm 03:58 PM
Artikel ini membincangkan useeffect dalam React, cangkuk untuk menguruskan kesan sampingan seperti pengambilan data dan manipulasi DOM dalam komponen berfungsi. Ia menerangkan penggunaan, kesan sampingan yang biasa, dan pembersihan untuk mencegah masalah seperti kebocoran memori.
Terangkan konsep pemuatan malas.
Mar 13, 2025 pm 07:47 PM
Lazy memuatkan kelewatan memuatkan kandungan sehingga diperlukan, meningkatkan prestasi web dan pengalaman pengguna dengan mengurangkan masa beban awal dan beban pelayan.
Bagaimanakah algoritma Rekonsiliasi React berfungsi?
Mar 18, 2025 pm 01:58 PM
Artikel ini menerangkan algoritma perdamaian React, yang dengan cekap mengemas kini DOM dengan membandingkan pokok DOM maya. Ia membincangkan manfaat prestasi, teknik pengoptimuman, dan kesan terhadap pengalaman pengguna. Kira -kira: 159
Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya?
Mar 18, 2025 pm 01:45 PM
Artikel ini membincangkan kari dalam JavaScript, teknik yang mengubah fungsi multi-argumen ke dalam urutan fungsi argumen tunggal. Ia meneroka pelaksanaan kari, faedah seperti aplikasi separa, dan kegunaan praktikal, meningkatkan kod baca
Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?
Mar 18, 2025 pm 01:44 PM
Fungsi pesanan yang lebih tinggi dalam JavaScript meningkatkan ketabahan kod, kebolehgunaan semula, modulariti, dan prestasi melalui abstraksi, corak umum, dan teknik pengoptimuman.
Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen?
Mar 19, 2025 pm 03:59 PM
Artikel ini menerangkan USEContext dalam React, yang memudahkan pengurusan negara dengan mengelakkan penggerudian prop. Ia membincangkan faedah seperti keadaan terpusat dan penambahbaikan prestasi melalui pengurangan semula yang dikurangkan.
Bagaimana anda menyambungkan komponen React ke kedai Redux menggunakan Connect ()?
Mar 21, 2025 pm 06:23 PM
Artikel membincangkan penyambungan komponen reaksi ke kedai redux menggunakan Connect (), menerangkan MapStateToprops, MapdispatchToprops, dan kesan prestasi.
Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara?
Mar 19, 2025 pm 04:10 PM
Artikel membincangkan menghalang tingkah laku lalai dalam pengendali acara menggunakan kaedah pencegahanDefault (), faedahnya seperti pengalaman pengguna yang dipertingkatkan, dan isu -isu yang berpotensi seperti kebimbangan aksesibiliti.
