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

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

Node.js は、Chrome V8 エンジンに基づく JavaScript 実行環境です。これにより、JavaScript をサーバー側で実行できるようになり、フロントエンドとバックエンドの統合開発言語の概念が実現します。 Node.js は Web 開発で広く使用されており、特にログイン機能やページ ジャンプで重要な役割を果たしています。この記事では、コード実装を組み合わせて、Node.js のログインとページジャンプに関する知識を詳しく紹介します。

1. ログイン機能の実装

Node.js を使用してログイン機能を実装する場合は、以下の点に注意する必要があります:

1) HTTP を使用する場合パスワードが平文で送信されないようにするには、HTTPS プロトコルを使用する必要があります。

2) フロントエンドは、ユーザーが入力したユーザー名とパスワードを AJAX リクエストを通じてバックエンドに送信します。

3) バックエンドは、ユーザー名とパスワードが正しいかどうかを判断するための検証に合格する必要があります。検証に合格した場合は、セッションを設定してユーザーのログイン状態を保存します。

次は、ログイン機能を実装するサンプル コードです:

バックエンド コード:

const express = require('express')
const bodyParser = require('body-parser')
const session = require('express-session')

const app = express()

// 配置 body-parser，用于解析 post 请求体
app.use(bodyParser.urlencoded({
  extended: false
}))

// 配置 express-session，用于保存 session
app.use(session({
  secret: 'keyboard cat',
  cookie: { maxAge: 60000 }
}))

// 登录接口
app.post('/login', (req, res) => {
  const username = req.body.username
  const password = req.body.password

  // TODO: 验证用户名和密码是否正确，这里省略代码...

  // 设置 session
  req.session.username = username

  // 返回登录成功信息
  res.status(200).send('登录成功！')
})

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

フロントエンド コード:

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="button" onclick="login()">登录</button>
</form>

<script>
function login() {
  // 获取用户名和密码
  const username = document.getElementsByName('username')[0].value
  const password = document.getElementsByName('password')[0].value

  // 发送登录请求
  const xhr = new XMLHttpRequest()
  xhr.open('POST', '/login', true)
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      alert(xhr.responseText)
    }
  }
  xhr.send(`username=${username}&password=${password}`)
}
</script>

2。ページジャンプの実装

ユーザーがログインに成功した後、ログイン成功後のページにユーザーをジャンプする必要があります。ページジャンプを実現する鍵は、ユーザーのリクエストを指定された URL にリダイレクトすることです。 Node.js は、ページ ジャンプを実装するための res.redirect() メソッドを提供します。以下は、ページ ジャンプを実装するサンプル コードです。

// 需要登录才能访问的页面
app.get('/secret', (req, res) => {
  // 如果用户未登录，重定向到登录页
  if (!req.session.username) {
    res.redirect('/login.html')
    return
  }

  // 如果用户已登录，返回页面内容
  res.send('这是一篇需要登录才能访问的文章。')
})

上記のコードでは、req.session を使用してユーザーがログインしているかどうかを判断します。ユーザーがログインしていない場合は、res.redirect() を使用してログイン ページにリダイレクトします。

さらに、Node.js では、静的ファイル (HTML、CSS、JS、その他のファイルなど) にアクセスするには、express.static() ミドルウェアを使用する必要があります。静的ファイルをパブリック ディレクトリに配置し、次のコードを使用してアプリケーションを起動します。

app.use(express.static('public'))

app.listen(3000, () => {
  console.log('Server is running on port 3000')
})

これにより、ユーザーは http://localhost:3000/login.html および http://localhost:3000 にアクセスできるようになります。 /secret アドレスが静的ファイルと動的ページにアクセスするのを待ちます。

概要

Node.js にログイン機能とページ ジャンプ機能を実装するには、検証、セッション、リダイレクトなどのテクノロジが必要です。その中で、ユーザーのユーザー名とパスワードが正しいかどうかを確認することがログイン機能を実現するための鍵であり、セッションを使用してユーザーのログイン状態を保存し、後続のリクエストでユーザーがログインしたかどうかを判断すること、res.redirect() メソッドを使用してページジャンプを実装します。実際の開発では、ニーズに応じて適切な改良や改善を行う必要があります。

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