Nodejsログインページジャンプページジャンプ-フロントエンドQ&A-php.cn

Nodejsログインページジャンプページジャンプ

王林

リリース： 2023-05-25 12:38:41

オリジナル

517 人が閲覧しました

Web 開発では、ユーザーのログインは非常に重要なリンクです。 Node.js では、いくつかのフレームワークとライブラリを使用してログインページにジャンプできます。この記事ではExpress.jsを使ってログインページに飛ぶ方法を紹介します。

Express.js のインストール

まず、Express.js をインストールし、コマンドラインから次のコマンドを入力する必要があります:

npm install express --save

ログイン後にコピー

This command Express .js をプロジェクトにインストールし、package.json ファイルに保存します。

ログインページの作成

プロジェクトディレクトリに新しい ejs ファイルを作成し、login.ejs という名前を付けます。このファイルはログインページとして機能します。 login.ejs では、以下に示すように、いくつかの HTML フォーム要素を追加できます。

<!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>

ログイン後にコピー

上記のコードでは、基本的な HTML ページと、ユーザー名とパスワードを含むフォームを作成しました。ユーザーがフォームを送信すると、「/login」ルートがトリガーされ、ユーザーが送信したリクエストを処理します。

Express アプリケーションの作成

次に、Express アプリケーションを作成する必要があります。プロジェクトディレクトリに、次の内容を含む app.js という名前の新しいファイルを作成します:

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('程序已启动！');
});

ログイン後にコピー

上記のコードでは、Express アプリケーションを作成し、ビューエンジンとパブリックフォルダーのパスを設定しました。 app.get('/') は、ユーザーがルートパスにアクセスすると、login.ejs ページが表示されることを意味します。 app.post('/login') は、ユーザーがフォームを送信すると、ログイン要求が処理されることを意味します。

ログインリクエストの処理

次に、ログインリクエストを処理するコードを記述する必要があります。 app.post('/login') ルートでは、ユーザーによって送信されたユーザー名とパスワードを取得できます。

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

ログイン後にコピー

次に、ユーザー名とパスワードに基づいていくつかの処理を実行できます。検証が成功した場合は、他のページにリダイレクトできます。

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: '用户名或密码不正确'});
    }
});

ログイン後にコピー

上記のコードでは、ユーザー名とパスワードの検証が成功した場合はダッシュボードページにリダイレクトされ、そうでない場合はログインページがリダイレクトされます。レンダリングされ、エラーメッセージが表示されます。他のページにリダイレクトしたい場合は、 res.redirect('/') や res.redirect('/dashboard') のようなステートメントを使用できます。

ダッシュボードページの作成

最後に、dashboard.ejs という名前の新しい ejs ファイルを作成し、ユーザーインターフェイスにレンダリングする必要があります。以下に示すように、dashboard.ejs ページにいくつかの HTML 要素を追加できます。

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

ログイン後にコピー

これで、Node.js ログインページジャンプ関数が完成しました。ユーザーがログインに成功すると、ダッシュボードページにリダイレクトされます。

概要

この記事では、Express.js を使用して Node.js のログインページジャンプ機能を実装する方法を紹介します。基本的なログインページと、ログインリクエストを処理するルートを作成しました。ユーザーがログインに成功すると、ダッシュボードページにリダイレクトされます。 Web 開発に Node.js と Express.js を使用すると、効率的な Web アプリケーションを迅速に構築でき、快適なユーザーエクスペリエンスも提供できます。

以上がNodejsログインページジャンプページジャンプの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。