📌  相关文章
📜  使用 Node.js 和 MongoDB 的登录表单(1)

📅  最后修改于: 2023-12-03 15:22:14.699000             🧑  作者: Mango

使用 Node.js 和 MongoDB 的登录表单

本文介绍如何使用 Node.js 和 MongoDB 来创建一个基本的登录表单。

准备工作

在开始之前，你需要安装以下软件：

我们也需要使用一些命令行工具：

步骤
1. 创建一个 Express 应用

首先，我们需要创建一个 Express 应用：

$ mkdir login-form
$ cd login-form
$ npm init -y
$ npm install express body-parser ejs mongoose --save

这个应用需要使用以下包：

  • express：创建 Web 应用和 API 的框架。
  • body-parser：解析请求体中的参数。
  • ejs：用于将服务器端的数据渲染到 HTML 页面上。
  • mongoose：用于连接和操作 MongoDB 数据库。

在 index.js 文件中，我们可以创建一个基本的 Express 应用：

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

const app = express()

app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(3000, () => {
  console.log('App listening on port 3000!')
})

在这个应用中，我们启用了用于解析请求体的中间件，并创建了一个基本的路由，返回 "Hello World!" 字符串。

2. 连接 MongoDB 数据库

接下来，我们需要连接 MongoDB 数据库。

在 index.js 文件中，添加如下内容：

mongoose.connect('mongodb://localhost/login-form', { useNewUrlParser: true })
const db = mongoose.connection
db.on('error', console.error.bind(console, 'connection error:'))
db.once('open', () => {
  console.log('Connected to MongoDB!')
})

这个应用中连接了名为 login-form 的数据库，并通过 db.on 监听了连接的错误和成功事件。

3. 定义用户模型

我们需要定义一个用户模型，用于将用户数据存储在 MongoDB 数据库中。

在 index.js 文件中，添加如下内容：

const userSchema = new mongoose.Schema({
  username: { type: String, required: true },
  password: { type: String, required: true }
})
const User = mongoose.model('User', userSchema)

这个应用中定义了一个名为 User 的模型，包含 username 和 password 两个字段，且两个字段均为必需。

4. 创建表单页面

接下来，我们需要创建一个表单页面。

在 index.js 文件中，添加如下内容：

app.set('view engine', 'ejs')

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

这个应用中使用了 EJS 模板引擎，并创建了一个 GET 路由，用于返回名为 login 的模板页面。

在 views/login.ejs 文件中，添加如下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
</head>
<body>
  <h1>Login</h1>
  <form method="post">
    <div>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <div>
      <input type="submit" value="Login">
    </div>
  </form>
</body>
</html>

这个页面包含一个包含用户名和密码字段的表单，以及一个 "Login" 按钮。

5. 处理登录请求

接下来，我们需要处理登录表单的请求。

在 index.js 文件中，添加如下内容：

app.post('/login', (req, res) => {
  const { username, password } = req.body
  User.findOne({ username, password }, (err, user) => {
    if (err) {
      console.error(err)
      res.send('Error occurred during login!')
    } else if (!user) {
      res.send('User not found!')
    } else {
      res.send(`Welcome ${user.username}!`)
    }
  })
})

这个应用中创建了一个 POST 路由，用于处理登录请求。在处理登录请求时，我们使用 User.findOne 方法查询 MongoDB 数据库，查看是否存在具有指定用户名和密码的用户。如果出现错误，我们将错误消息返回给用户；如果找不到用户，我们将 "User not found!" 消息返回给用户；如果成功找到用户，我们将欢迎消息和用户的用户名返回给用户。

6. 运行应用

最后，我们需要运行应用。在终端中执行以下命令：

$ npm start

然后在浏览器中访问 http://localhost:3000/login 地址，应该会看到一个登录表单页面。在填写表单之后点击 "Login" 按钮，应该会看到欢迎消息。

总结

在本文中，我们介绍了如何使用 Node.js 和 MongoDB 来创建一个基本的登录表单：

  • 创建了一个基本的 Express 应用和一个路由。
  • 连接了 MongoDB 数据库，定义了一个用户模型。
  • 创建了一个包含用户名和密码字段的表单页面。
  • 处理了登录表单请求，并从 MongoDB 数据库中检索对应用户信息。

你可以在这个基础上添加其他更加复杂和安全的功能，比如密码加密、用户注册和会话管理等。