Nodejs之http的表单提交

首先，在Node.js中，通过使用内置的http模块，我们可以轻松地创建一个Web服务器。本文将围绕如何实现HTTP表单提交展开，先介绍如何在Node.js中创建一个简单的Web服务器，然后展示如何接收并处理表单提交数据。

创建Web服务器

我们先来看一下如何使用Node.js的http模块创建一个简单的Web服务器，示例代码如下：

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
  res.write('<h1>Hello, World!</h1>');
  res.end();
});

server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

上面的代码中，我们调用了Node.js内置的http模块，并使用该模块提供的createServer()方法创建了一个基本的Web服务器。createServer()方法接受一个回调函数，该函数接收两个参数：请求对象(req)和响应对象(res)。我们在回调函数中先调用res.writeHead()方法设置响应头信息，然后调用res.write()方法写入响应内容，最后调用res.end()方法结束响应。

在本地运行上述代码后，访问http://localhost:3000，我们可以看到浏览器输出“Hello, World!”。

接收表单数据

接下来我们来看如何接收HTTP表单提交数据。在HTTP协议中，表单提交数据默认以POST方式发送，Node.js可以通过解析请求体数据来获取表单提交数据。

const http = require('http');
const {parse} = require('querystring');

const server = http.createServer((req, res) => {
  if (req.method === 'POST') {
    let body = '';
    req.on('data', chunk => {
      body += chunk.toString();
    });
    req.on('end', () => {
      const data = parse(body);
      res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
      res.write(`<h1>Hello, ${data.name}!</h1>`);
      res.end();
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
    res.write(`
      <form method="POST">
        <label>
          Your name:
          <input type="text" name="name" />
        </label>
        <br/>
        <br/>
        <button type="submit">Submit</button>
      </form>
    `);
    res.end();
  }
});

server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

上述代码中，我们通过判断请求的方法是否为POST来区分表单提交请求和普通GET请求。当请求为POST时，我们通过data事件和end事件分别接收请求体数据，并使用Node.js内置的querystring模块解析表单数据。

最后，我们在响应中动态生成HTML表单，使用label和input元素收集用户输入的数据，并将数据通过POST方式提交到Web服务器。当收到表单提交的请求时，我们将表单数据解析出来，并动态生成响应体数据。

示例说明

示例1：计算正方形面积

下面的示例演示如何使用表单收集用户输入数据，并计算正方形的面积。

const http = require('http');
const {parse} = require('querystring');

const server = http.createServer((req, res) => {
  if (req.method === 'POST') {
    let body = '';
    req.on('data', chunk => {
      body += chunk.toString();
    });
    req.on('end', () => {
      const data = parse(body);
      const side = parseInt(data.side, 10);
      const area = Math.pow(side, 2);
      res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
      res.write(`<h1>The area of the square is ${area}</h1>`);
      res.end();
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
    res.write(`
      <form method="POST">
        <label>
          Side length:
          <input type="number" name="side" />
        </label>
        <br/>
        <br/>
        <button type="submit">Submit</button>
      </form>
    `);
    res.end();
  }
});

server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

在浏览器中访问http://localhost:3000，我们可以看到生成的表单，输入正方形的边长，点击'提交'按钮，服务器返回计算结果。

示例2：注册账号

下面的示例演示如何使用表单收集用户的注册信息，并将用户信息保存到数据库中。

const http = require('http');
const {parse} = require('querystring');
const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'testdb'
});

const server = http.createServer((req, res) => {
  if (req.method === 'POST') {
    let body = '';
    req.on('data', chunk => {
      body += chunk.toString();
    });
    req.on('end', () => {
      const data = parse(body);
      const username = data.username;
      const password = data.password;
      connection.query(`INSERT INTO users (username, password) VALUES ('${username}', '${password}')`, (error, result) => {
        if (error) {
          console.log(error);
          res.writeHead(500, {'Content-Type': 'text/plain'});
          res.write('Oops, something went wrong!');
          res.end();
        } else {
          res.writeHead(201, {'Content-Type': 'text/html; charset=utf-8'});
          res.write(`<h1>You have successfully registered an account with username ${username}</h1>`);
          res.end();
        }
      });
    });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
    res.write(`
      <form method="POST">
        <label>
          Username:
          <input type="text" name="username" />
        </label>
        <br/>
        <br/>
        <label>
          Password:
          <input type="password" name="password" />
        </label>
        <br/>
        <br/>
        <button type="submit">Sign up</button>
      </form>
    `);
    res.end();
  }
});

server.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

在这个示例中，我们使用了mysql模块连接MySQL数据库，并在表单提交成功后将用户信息插入到数据库中。需要注意，上述示例代码中使用了明文的SQL语句，这是非常不安全的，我们应该使用参数化查询或ORM库来避免SQL注入攻击。