ホームページ >ウェブフロントエンド >フロントエンドQ&A >Nodejsログインページジャンプページジャンプ
Nodejsログインページジャンプページジャンプ
- 王林オリジナル
- 2023-05-25 12:38:41561ブラウズ
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 サイトの他の関連記事を参照してください。