ホームページ  >  記事  >  ウェブフロントエンド  >  Nodejsで登録、ログイン、ページにジャンプする方法

Nodejsで登録、ログイン、ページにジャンプする方法

PHPz
PHPzオリジナル
2023-04-17 15:01:261128ブラウズ

Node.js は登録、ログイン、ページ ジャンプを実装します

#Node.js は Chrome V8 エンジンに基づく JavaScript 実行環境です。これはサーバー側で実行でき、HTTP サーバーの作成、Socket.IO リアルタイム通信の実装など、いくつかの一般的なサーバー側機能を簡単に実装するために使用できます。この記事では、Node.js をベースに、Express フレームワークと MongoDB データベースを使用して、簡単な登録、ログイン、ページ ジャンプ機能を実装します。

    Node.js のインストール
まず、Node.js をローカルにインストールする必要があります。現在のオペレーティング システムに対応する Node.js ファイルを公式 Web サイト (https://nodejs.org) からダウンロードしてインストールできます。

    プロジェクトの作成
次に、ローカルにプロジェクトを作成する必要があります。コマンド ラインに次の指示を入力できます。

mkdir node-login

cd node-login

    プロジェクトの初期化
実行次の手順に従ってプロジェクトを初期化します。

npm init

プロンプトに従ってプロジェクト名、バージョン番号、説明などの情報を入力し、package.json ファイルを作成します。

    依存関係のインストール
次に、Express、Mongoose、Body-parser などの依存関係をインストールする必要があります。コマンド ラインに次の指示を入力できます。

npm install Express mongoose body-parser --save

--save パラメーターは、これらの依存関係を package.json ファイルに保存することを意味します。

    データベースの構成
この例では、データベースとして MongoDB を使用します。 MongoDB は、MongoDB 公式 Web サイト (https://www.mongodb.com/) からダウンロードしてインストールできます。次に、接続するデータベースとユーザーを作成します。

    サーバーの作成
次に、サーバー ファイルを作成する必要があります。プロジェクトのルート ディレクトリに、server.js という名前のファイルを作成できます。このファイルでは、依存関係をロードし、データベースに接続し、リクエストをリッスンするための HTTP サーバーを作成する必要があります。

const Express = require('express');

const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app =express();

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extend: true }));

mongoose .connect('mongodb://your-mongodb-url', { useNewUrlParser: true, useUnifiedTopology: true }, (err) => {

if (err) {

console.log(err);
} else {

console.log('Connected to the database');
}

});

app.get('/', (req, res) => {

res.send('Hello World!') ;
});

const port = process.env.PORT || 3000;

app.listen(port, () => {

console.log(
サーバーはポート ${port});});

Mongoose を使用して MongoDB データベースに接続し、エラーが発生した場合にはログを出力します。次に、サーバーが適切に機能しているかどうかをテストするための簡単なルートを作成します。

    ユーザー データ モデルの作成
次に、ユーザー データ モデルを作成する必要があります。プロジェクトのルート ディレクトリに user.js という名前のファイルを作成します。このファイルでは、ユーザー名、電子メール、パスワードなどのフィールドを含む User というデータ モデルを定義します。

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const UserSchema = new Schema({

ユーザー名: {

type: String,
required: true,
unique: true
},

メールアドレス: {

type: String,
required: true,
unique: true
},

パスワード: {

type: String,
required: true
}

});

const ユーザー = mongoose。 model('User', UserSchema);

module.exports = User;

    登録ルートとログイン ルートの作成
次に、登録とログインのルーティング。次のルートをserver.jsに追加します:

const User = require('./user');

// Register

app.post('/register', (req , res) => {
const user = new User({

username: req.body.username,
email: req.body.email,
password: req.body.password
});

user.save((err) => {

if (err) {
  console.log(err);
  res.status(500).send('Error registering new user please try again.');
} else {
  res.redirect('/login');
}
}) ;

});

// Login

app.post('/login', (req, res) => {
const email = req.body.email;
const パスワード = req.body.password;
User.findOne({ email: email }, (err, user) => {

if (err) {
  console.log(err);
  res.status(500).send('Error on the server.');
} else {
  if (!user) {
    res.status(404).send('User not found.');
  } else {
    user.comparePassword(password, (err, isMatch) => {
      if (isMatch && !err) {
        res.redirect('/dashboard');
      } else {
        res.status(401).send('Password is incorrect.');
      }
    });
  }
}
});

});

これらのルートはリクエストを処理し、ユーザーが登録してログインするときにユーザーを作成して認証し、適切なページにジャンプします。

    ビューとテンプレートの作成
最後に、ビューとテンプレートを作成する必要があります。プロジェクトのルート ディレクトリに views という名前のフォルダーを作成し、そのフォルダーの下に次のファイルを作成できます。

    register.ejs: 登録テンプレート
  • login.ejs: ログイン テンプレート
  • dashboard.ejs: ダッシュボード テンプレート
これらのテンプレートでは、HTML、CSS、JavaScript を使用して、美しく使いやすいページを作成します。

    プロジェクトの実行
これで、次のコマンドを使用してプロジェクトを開始できます:

node server.js

Inブラウザ http://localhost:3000 にアクセスして Web ページを表示します。登録情報を入力してログインすると、ダッシュボードページにジャンプします。

要約

この記事では、Node.js、Express フレームワーク、MongoDB データベースを使用して、登録、ログイン、ページへのジャンプを行う簡単なアプリケーションを作成します。 Node.js と関連テクノロジを使用すると、特定のサーバー側機能を実装するアプリケーションを簡単かつ迅速に作成でき、開発とデプロイの効率が大幅に向上します。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。