新手写demo，一个基于本地的text submit功能实现 Nodejs版

新手写demo，一个基于本地的text submit功能实现 Nodejs版

一个text submit功能，大家一起学习改进https://github.com/J-Chung/GProject

2 回复

新手写demo，一个基于本地的text submit功能实现 Nodejs版

大家好！今天我将分享一个简单的Node.js项目，实现了一个基于本地的文本提交功能。这个项目非常适合初学者学习Node.js的基本操作，包括文件读写、HTTP服务器搭建等。

项目结构

text-submit-demo/
├── index.html
├── server.js
└── submissions.txt

步骤1: 创建HTML表单

首先，我们需要一个简单的HTML表单用于用户输入文本并提交。创建一个名为index.html的文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text Submit Demo</title>
</head>
<body>
    <h1>Submit Your Text</h1>
    <form action="/submit" method="POST">
        <textarea name="text" rows="4" cols="50"></textarea><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

步骤2: 创建Node.js服务器

接下来，我们将使用Node.js来处理表单提交。创建一个名为server.js的文件，内容如下：

const http = require('http');
const fs = require('fs');
const path = require('path');

const PORT = 3000;

const server = http.createServer((req, res) => {
    if (req.method === 'GET' && req.url === '/') {
        // 返回HTML页面
        fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
            if (err) throw err;
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.end(data);
        });
    } else if (req.method === 'POST' && req.url === '/submit') {
        // 处理表单提交
        let body = [];
        req.on('data', chunk => {
            body.push(chunk);
        }).on('end', () => {
            body = Buffer.concat(body).toString();
            const text = body.split('=')[1].replace(/\+/g, ' ');

            // 将提交的文本保存到文件中
            fs.appendFile(path.join(__dirname, 'submissions.txt'), text + '\n', err => {
                if (err) throw err;
                res.writeHead(302, { Location: '/' });
                res.end();
            });
        });
    } else {
        res.writeHead(404, { 'Content-Type': 'text/plain' });
        res.end('Not Found');
    }
});

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

步骤3: 运行项目

  1. 确保你已经安装了Node.js。
  2. 在项目目录下运行命令 node server.js 启动服务器。
  3. 打开浏览器，访问 http://localhost:3000/。
  4. 输入一些文本并提交，文本将会被保存到 submissions.txt 文件中。

总结

通过这个简单的例子，我们实现了基本的文本提交功能。这个项目不仅适合初学者学习Node.js的基础知识，还可以作为进一步扩展功能的基础，例如增加数据库支持、前端框架集成等。希望这个项目对你有所帮助！

更多详细信息和代码改进，欢迎访问我的GitHub仓库：GProject。

希望这个示例能够帮助你理解如何用Node.js实现一个简单的文本提交功能。如果你有任何问题或建议，请随时留言交流！


新手写demo，一个基于本地的text submit功能实现 Nodejs版

为了实现一个基于本地的 text submit 功能，我们可以使用 Node.js 和 Express 框架来创建一个简单的 Web 应用。这个应用允许用户提交文本，并将其保存到本地文件中。

示例代码

首先，确保你已经安装了 Node.js。接下来，创建一个新的项目目录，并初始化一个新的 Node.js 项目：

mkdir text-submit-app
cd text-submit-app
npm init -y

然后，安装必要的依赖包：

npm install express body-parser

现在，创建一个名为 app.js 的文件，并添加以下代码：

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

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));

app.get('/', (req, res) => {
    res.send(`
        <form action="/submit" method="POST">
            <input type="text" name="text" placeholder="Enter your text here" required />
            <button type="submit">Submit</button>
        </form>
    `);
});

app.post('/submit', (req, res) => {
    const text = req.body.text;
    
    // 将文本保存到本地文件
    fs.appendFile('submission.txt', text + '\n', (err) => {
        if (err) throw err;
        res.send(`Text submitted successfully!`);
    });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

运行项目

在终端中运行以下命令启动服务器：

node app.js

现在，打开浏览器并访问 http://localhost:3000。你会看到一个简单的表单，可以输入文本并提交。提交后，文本将被保存到当前目录下的 submission.txt 文件中。

解释

  • Express: 用于创建服务器和处理 HTTP 请求。
  • body-parser: 用于解析请求体中的数据。
  • fs: Node.js 的内置模块，用于操作文件系统。

通过这些简单的步骤，你可以快速搭建一个基于本地的文本提交功能。

回到顶部