halaman log masuk nodejs lompat halaman lompat-Soal Jawab bahagian hadapan-php.cn

halaman log masuk nodejs lompat halaman lompat

王林

Lepaskan： 2023-05-25 12:38:41

asal

536 orang telah melayarinya

Dalam pembangunan web, log masuk pengguna ialah pautan yang sangat kritikal. Dalam Node.js, kita boleh menggunakan beberapa rangka kerja dan perpustakaan untuk melompat ke halaman log masuk. Artikel ini akan memperkenalkan cara menggunakan Express.js untuk melompat ke halaman log masuk.

Pasang Express.js

Pertama, kita perlu memasang Express.js, masukkan arahan berikut melalui baris arahan:

npm install express --save

Salin selepas log masuk

Arahan ini akan memasang Express .js ke dalam projek kami dan menyimpannya dalam fail package.json.

Buat halaman log masuk

Buat fail ejs baharu dalam direktori projek dan namakannya login.ejs. Fail ini akan berfungsi sebagai halaman log masuk kami. Dalam login.ejs, kami boleh menambah beberapa elemen borang HTML seperti yang ditunjukkan di bawah:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<body>
    <h1>欢迎登录</h1>
    <form action="/login" method="post">
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="password" name="password" placeholder="请输入密码">
        <input type="submit" value="登录">
    </form>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami telah mencipta halaman HTML asas dan borang yang mengandungi nama pengguna dan kata laluan. Apabila pengguna menyerahkan borang, laluan "/log masuk" akan dicetuskan, yang akan mengendalikan permintaan yang diserahkan oleh pengguna.

Membuat aplikasi Ekspres

Seterusnya, kita perlu mencipta aplikasi Ekspres. Cipta fail baharu dalam direktori projek, bernama app.js, dengan kandungan berikut:

const express = require('express');
const app = express();

app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
    res.render('login');
});

app.post('/login', (req, res) => {
    // 处理用户提交的请求
});

app.listen(3000, () => {
    console.log('程序已启动！');
});

Salin selepas log masuk

Dalam kod di atas, kami mencipta aplikasi Express dan menyediakan enjin paparan dan laluan folder awam. app.get('/') bermakna apabila pengguna mengakses laluan akar, halaman login.ejs akan dipaparkan. app.post('/login') bermakna apabila pengguna menyerahkan borang, permintaan log masuk akan diproses.

Mengendalikan permintaan log masuk

Sekarang, kita perlu menulis kod yang mengendalikan permintaan log masuk. Dalam laluan app.post('/login'), kita boleh mendapatkan nama pengguna dan kata laluan yang diserahkan oleh pengguna:

app.post('/login', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;
    
    // 处理用户名和密码
});

Salin selepas log masuk

Seterusnya, kita boleh melakukan beberapa pemprosesan berdasarkan nama pengguna dan kata laluan. Jika pengesahan berjaya, kami boleh mengubah hala ke halaman lain:

app.post('/login', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    if (username === 'admin' && password === '123456) {
        res.redirect('/dashboard');
    } else {
        res.render('login', {message: '用户名或密码不正确'});
    }
});

Salin selepas log masuk

Dalam kod di atas, jika pengesahan nama pengguna dan kata laluan berjaya, ia akan mengubah hala ke halaman papan pemuka, jika tidak halaman log masuk akan di- diberikan dan mesej ralat akan dipaparkan. Jika anda ingin mengubah hala ke halaman lain, anda boleh menggunakan pernyataan seperti res.redirect('/') atau res.redirect('/dashboard').

Buat halaman Papan Pemuka

Akhir sekali, kita perlu mencipta fail ejs baharu, bernama dashboard.ejs, dan memberikannya kepada antara muka pengguna. Anda boleh menambah beberapa elemen HTML pada halaman papan pemuka.ejs, seperti yang ditunjukkan di bawah:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>欢迎访问Dashboard</title>
</head>
<body>
    <h1>欢迎访问Dashboard</h1>
</body>
</html>

Salin selepas log masuk

Kini, kami telah melengkapkan fungsi lompat halaman log masuk Node.js. Apabila pengguna berjaya log masuk, dia akan dialihkan ke halaman papan pemuka.

Ringkasan

Artikel ini memperkenalkan cara menggunakan Express.js untuk melaksanakan fungsi lompat halaman log masuk Node.js. Kami mencipta halaman log masuk asas dan laluan yang mengendalikan permintaan log masuk. Apabila pengguna berjaya log masuk, dia akan dialihkan ke halaman papan pemuka. Menggunakan Node.js dan Express.js untuk pembangunan web boleh membantu kami membina aplikasi web yang cekap dengan cepat dan juga memberikan pengalaman pengguna yang menyenangkan.

Atas ialah kandungan terperinci halaman log masuk nodejs lompat halaman lompat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!