正文

学会Express框架快速接收并处理表单数据，实战教程一步到位

/0 浏览量
0419

Express框架，作为Node.js最流行的Web应用框架之一，以其简洁、灵活和高效的特点，深受开发者喜爱。本文将带你一步步学会如何使用Express框架来接收并处理表单数据，让你在实战中快速上手。

环境准备

在开始之前，请确保你的电脑已经安装了Node.js和npm（Node.js包管理器）。你可以通过以下命令检查是否已安装：

node -v
npm -v

如果未安装，请前往Node.js官网下载并安装。

创建项目

  1. 打开终端，进入你想要创建项目的目录。
  2. 使用以下命令创建一个新的Node.js项目：
mkdir express-form-data
cd express-form-data
npm init -y
  1. 安装Express框架：
npm install express

编写代码

  1. 创建一个名为app.js的文件，并添加以下代码：
const express = require('express');
const app = express();
const port = 3000;

// 设置模板引擎为ejs
app.set('view engine', 'ejs');

// 设置静态文件目录
app.use(express.static('public'));

// 解析表单数据
app.use(express.urlencoded({ extended: true }));

// 处理GET请求
app.get('/', (req, res) => {
  res.render('index');
});

// 处理POST请求
app.post('/submit', (req, res) => {
  const username = req.body.username;
  const email = req.body.email;
  console.log(`用户名：${username}，邮箱：${email}`);
  res.send(`收到表单数据：用户名：${username}，邮箱：${email}`);
});

// 启动服务器
app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});
  1. 在项目根目录下创建一个名为views的文件夹，并在其中创建一个名为index.ejs的文件，添加以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单提交示例</title>
</head>
<body>
  <h1>请输入您的信息</h1>
  <form action="/submit" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>
    <br>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    <br>
    <button type="submit">提交</button>
  </form>
</body>
</html>
  1. 在项目根目录下创建一个名为public的文件夹，并在其中创建一个名为style.css的文件，添加以下样式：
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}

h1 {
  color: #333;
}

form {
  max-width: 300px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

运行项目

  1. 在终端中，运行以下命令启动服务器：
node app.js

  1. 打开浏览器，访问http://localhost:3000，你将看到一个简单的表单页面。

  2. 在表单中输入用户名和邮箱，点击提交按钮。你将在控制台看到接收到的表单数据。

通过以上步骤，你已经学会了如何使用Express框架接收并处理表单数据。希望这个实战教程能帮助你快速上手，祝你学习愉快！

-- 展开阅读全文 --