正文

学会Node.js处理简单表单提交：轻松搭建网页表单，实现数据收集与存储

/0 浏览量
0528

在当今的网络时代，网页表单是网站与用户交互的重要途径。通过表单，我们可以收集用户的个人信息、意见反馈等数据。Node.js作为一种高效、灵活的服务器端JavaScript运行环境，非常适合用于处理网页表单的提交。本文将带您轻松搭建网页表单，并实现数据的收集与存储。

了解Node.js和Express框架

首先，我们需要了解Node.js和Express框架的基本概念。

Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许开发者使用JavaScript来编写服务器端代码。由于JavaScript的单线程特点，Node.js在处理I/O密集型任务时表现出色。

Express框架

Express是一个简洁、灵活的Node.js Web应用框架，它极大地简化了Web开发过程。Express提供了路由、模板引擎、中间件等功能，使得开发者可以更加专注于业务逻辑。

搭建网页表单

接下来，我们将使用Node.js和Express框架搭建一个简单的网页表单。

1. 创建项目目录

首先，在您的电脑上创建一个项目目录，并进入该目录。

mkdir form-app
cd form-app

2. 安装Express框架

使用npm（Node.js包管理器）安装Express框架。

npm init -y
npm install express

3. 编写服务器代码

创建一个名为app.js的文件，并编写以下代码：

const express = require('express');
const app = express();
const port = 3000;

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

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}/`);
});

4. 创建静态文件

在项目目录下创建一个名为public的文件夹，并在其中创建以下文件：

  • index.html：用于展示表单的HTML文件。
  • style.css：用于美化表单的CSS文件。

5. 编写HTML表单

在public文件夹下创建index.html文件，并编写以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>简单表单</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form action="/submit" method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">提交</button>
  </form>
</body>
</html>

6. 编写CSS样式

在public文件夹下创建style.css文件，并编写以下代码：

body {
  font-family: Arial, sans-serif;
}

form {
  margin: 20px;
}

label {
  margin-right: 10px;
}

button {
  margin-top: 10px;
}

处理表单提交

现在，我们已经搭建好了网页表单，接下来我们需要处理表单的提交。

1. 引入body-parser中间件

首先，我们需要安装body-parser中间件，它可以帮助我们解析POST请求的数据。

npm install body-parser

2. 编写路由处理函数

修改app.js文件，添加以下代码：

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

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

app.post('/submit', (req, res) => {
  const name = req.body.name;
  console.log(`Hello, ${name}!`);
  res.send(`Hello, ${name}!`);
});

现在，当用户填写表单并提交时，服务器将接收POST请求，并打印用户输入的姓名。

数据存储

为了将用户输入的数据存储起来，我们可以使用Node.js的数据库模块，如MySQL、MongoDB等。以下是一个使用MongoDB存储数据的示例。

1. 安装MongoDB模块

npm install mongoose

2. 连接MongoDB数据库

修改app.js文件，添加以下代码：

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/formdb', { useNewUrlParser: true, useUnifiedTopology: true });

const FormSchema = new mongoose.Schema({
  name: String
});

const Form = mongoose.model('Form', FormSchema);

app.post('/submit', (req, res) => {
  const name = req.body.name;
  const form = new Form({ name });
  form.save((err) => {
    if (err) {
      console.log(err);
      res.send('Error saving data');
    } else {
      console.log(`Data saved successfully`);
      res.send(`Hello, ${name}!`);
    }
  });
});

3. 查询存储的数据

为了查询存储的数据，我们可以添加一个路由来展示所有提交的数据。

app.get('/forms', (req, res) => {
  Form.find({}, (err, forms) => {
    if (err) {
      console.log(err);
      res.send('Error fetching data');
    } else {
      res.json(forms);
    }
  });
});

现在，您可以使用Postman或其他工具向http://localhost:3000/forms发送GET请求，以查询存储的数据。

总结

通过本文的介绍，您已经学会了如何使用Node.js和Express框架搭建网页表单，并实现了数据的收集与存储。希望这篇文章能对您的Web开发之路有所帮助！

-- 展开阅读全文 --