从零学习node.js之搭建http服务器（二）

Node.js：一个值得的后端技术之旅

随着前端技术的不断发展，我们不仅要掌握前端知识，还要了解后端技术。Node.js 作为一个为网络应用程序提供强大支持的开源框架，给我们提供了一个学习成本相对较低的捷径。本文将介绍如何在 Node.js 中搭建 HTTP 服务器，帮助你对 Node.js 有更深入的了解。

一、初探 Node.js

让我们从最简单的 "hello world" 开始。创建一个名为 server.js 的文件，写入以下代码：

```javascript

console.log('hello world');

```

在终端输入 `node server.js` 运行，终端会输出 "hello world"。但作为一个服务器程序，我们的目标是在浏览器中展示这些信息。这就需要使用 Node.js 中的 http 模块。

二、创建 HTTP 服务器

通过引入 http 模块，我们可以创建一个 http 服务器。下面是一个简单的例子：

```javascript

var http = require('http'); // 引入 http 模块

http.createServer(function(request, response){

response.writeHead(200, {'content-type': 'text/plain'}); // 设置头部信息，输出 text 文本

response.write('hello world'); // 输出到页面中的信息

response.end(); // 返回结束

}).listen(3000);

console.log('server has started...');

```

在终端运行此代码，服务器将在 3000 端口启动。在浏览器中访问 `127.0.0.1:3000`，可以看到页面输出 "hello world"。

三、呈现表单页面

接下来，让我们在页面中呈现一个表单，可以让用户输入信息并进行提交。修改 server.js 文件，添加以下代码：

这是一个简单的 HTML 表单，包含用户名、密码和年龄输入框，以及一个提交按钮。当用户提交表单时，数据将发送到服务器进行处理。由于我们的程序目前只是呈现页面，并没有处理提交的数据，所以提交数据只是刷新当前页面。

四、后续学习

留意启动Node服务的细节

每当我们对Node中的代码做出改动，都需要重新启动服务以确保新代码生效。今天，我们将聚焦于如何通过GET方式获取表单提交的数据。让我们暂时搁置数据安全性问题，专注于学习如何从使用GET方式提交的表单数据中获取信息。

在Web开发中，GET方法常用于提交表单数据，这些数据会被编码进URL中。要获取这些数据，我们需要URL。这时，url模块就派上了用场。

以下是server.js文件的代码示例：

引入http和url模块：

```javascript

var http = require('http');

var url = require('url');

```

创建一个http服务器，处理get请求的表单数据：

```javascript

http.createServer(function(request, response){

// 如果未提交表单，则显示表单页面

var htmlForm = `

username : password : age :

`;

// URL获取查询参数

var query = url.parse(request.url, true).query; // 使用url模块的parse方法URL中的参数获取数据。如果表单被提交（即存在提交参数），则显示提交的数据。否则显示表单页面。如果表单被提交（即存在提交参数），则显示提交的数据。否则显示表单页面。通过URL中的参数获取数据。此处我们使用了url模块中的parse方法。这个方法可以URL字符串并返回一个URL对象。我们可以通过这个对象访问URL的各个部分，包括查询参数（即表单提交的数据）。这样我们就可以在服务器端获取到用户通过表单提交的数据了。我们只需要监听特定的端口（在这个例子中是端口3000），然后处理接收到的请求即可。一旦服务器启动，我们就可以通过浏览器访问它了。控制台会输出一条消息：“服务器已启动...”。我们可以在页面上填写表单并提交，然后就可以在页面中看到我们提交的数据了。这是一个非常基础的示例，但它展示了如何使用Node.js处理HTTP请求并获取表单数据的基本流程。在此基础上，我们可以构建更复杂的Web应用程序来处理更复杂的数据和交互逻辑。现在让我们运行这个简单的服务器并尝试提交表单吧！让我们看看我们的代码是否能够成功获取并显示我们提交的数据吧！这是一个很好的学习和实践的机会让我们运行这个简单的服务器看看我们的代码是否能够达到预期的效果吧！请注意在每次修改代码后都要重新启动服务器以确保新的代码能够生效哦！让我们开始我们的之旅吧！希望你在这个过程中能够学到有用的知识和技能！URL中的查询参数与POST请求数据的处理

当我们的服务器接收到一个HTTP请求时，无论是GET还是POST请求，URL和请求体中的数据都是重要的步骤。让我们深入如何使用Node.js中的url模块来这些数据。

考虑一个典型的GET请求，其URL可能包含查询参数，如：

`url.parse(request.url)` 的输出可能如下：

```bash

Url {

protocol: null,

slashes: null,

auth: null,

host: null,

port: null,

hostname: null,

hash: null,

search: '?username=111113&password=123&age=122&submit=submit',

...其他属性...

}

```

其中，`search` 属性包含了所有的查询参数。如果我们想进一步这些参数为一个对象，我们可以设置第二个参数为 `true`： `url.parse(request.url, true)`，这样 `query` 属性就会是一个对象，方便我们访问每个参数的值。

当我们处理POST请求时，处理方式有所不同。因为POST请求通常包含大量的数据，我们不会直接阻塞等待所有数据到达。相反，我们会监听 `data` 事件来逐步处理每一个数据块。当所有数据都接收完毕时，`end` 事件会被触发。这时，我们可以汇总所有的数据块并进行处理。

假设我们使用了一个中间件来处理POST数据，代码可能如下：

```javascript

app.post('/your-endpoint', function(req, res) {

let postData = ''; // 用于存储所有的POST数据

req.on('data', (chunk) => { // 当新的数据块到达时触发

postData += chunk; // 累加数据块

});

req.on('end', () => { // 当所有数据都已接收完毕时触发

// postData包含了所有的POST数据，你可以进行进一步的处理

let parsedData = JSON.parse(postData); // 假设POST数据是JSON格式

console.log(parsedData); // 输出后的数据

res.end('Data received'); // 响应客户端数据已接收

});

});

```

这样，我们就可以有效地处理GET请求的查询参数和POST请求的数据了。当接收到请求时，我们可以使用 `url.parse` 来URL，然后使用事件监听来处理POST请求的数据流。这样既能保证性能，又能确保用户体验不受阻塞。一、服务器启动与页面展示

在启动的`server.js`中，我们首先创建了一个HTTP服务器，监听端口3000。当接收到请求时，根据请求的方法（GET或POST）来决定响应的内容。对于初次访问，我们返回一个包含基本HTML表单的响应，让用户可以输入用户名、密码和年龄。表单的提交动作指向服务器的根路径（"/"）。

二、POST请求处理与数据

关于POST数据的与处理

在POST请求的处理过程中，我们注意到控制台输出的`postData`是一个包含所有表单字段的字符串，例如`'username=123&password=123&age=23&submit=submit'`。为了更方便地处理这些数据，我们使用`querystring.parse`方法将其为一个对象。这样，我们可以轻松地通过对象属性（如`data.username`）来访问每个表单字段的值。

三、路由的初步划分

为了优化服务器性能和提高代码的可读性，我们可以按照功能对服务器路由进行划分。在这个例子中，我们可以将服务器逻辑分为两部分：处理初始的GET请求以展示表单页面和处理表单提交的POST请求。这种划分可以使代码更加清晰，更易于管理和维护。未来的扩展和功能增加也将变得更加简单。例如，我们可以为登录、注册、个人信息修改等不同的功能创建单独的路由和处理器。这样，每个功能都可以独立工作，提高了代码的可重用性和可扩展性。

这段代码不仅实现了基本的服务器功能，还展示了如何处理和POST请求数据以及如何进行初步的路由划分。这些功能对于构建更复杂的Web应用程序至关重要。关于页面初始化与数据展示

一、页面初始化

在启动页面时，我们需要构建一个基本的HTML框架来初始化页面。我们的 `starter.js` 文件中的 `start` 函数正是为此目的而设计的。它生成了一个包含基本HTML表单的响应，该表单有三个输入字段：用户名、密码和年龄。一旦提交，这些数据将被发送到服务器进行处理。

二、数据展示

当数据被成功上传并处理后，我们需要在页面上展示这些数据。在 `uploader.js` 文件中，我们定义了一个 `upload` 函数来处理这个过程。这个函数首先接收到的POST数据，然后在控制台中打印出这些数据，并将这些数据嵌入到HTML字符串中以供展示。通过这个过程，用户可以清晰地看到他们提交的数据。同时我们也提供了链接，让用户能够返回主页进行操作。我们也确保了数据的隐私安全，不会在页面中直接展示密码信息。

三、服务器路由选择

四、图片上传并展示功能实现

在成功提交数据之后，我们接下来讲解如何上传并展示图片。使用Node自带的模块处理文件上传可能会相对复杂，我们选择使用已经开发完善的`formidable`模块，它对于上传文件数据的提供了出色的抽象。

通过npm安装`formidable`模块，命令如下：

```bash

npm install formidable --save-dev

```

接下来，我们在`starter.js`文件中添加文件上传的表单控件。

```javascript

// starter.js

function start(request, response) {

var html = `

图片上传 :

`;

response.writeHead(200, {"Content-Type": "text/html"});

response.write(html);

response.end();

}

exports.start = start;

```

4.1 图片上传功能详解

我们的目标是实现图片上传功能。在此之前，需要确保你的项目目录中包含用于临时存储的`tmp`目录和用于展示图片的`img`目录。

当用户在前端页面选择图片并点击上传按钮后，浏览器会构建一个包含文件信息的HTTP请求发送到服务器。我们的服务器通过`formidable`模块来这个请求，处理文件上传。这个模块能够方便地处理文件上传的各种细节，如文件名的处理、文件存储位置的确定等。处理完毕后，我们可以将图片保存到服务器上的指定目录，并返回相应的响应信息给用户。

服务器端的处理逻辑可能包括验证图片格式、大小、安全性等方面的检查，以确保上传的图片符合要求。一旦图片成功上传并保存，我们可以将其路径信息存储在数据库中，以便后续展示或使用。

在前端页面，我们可以通过动态生成img标签的方式来展示上传的图片。当图片上传成功后，服务器会返回相应的信息（如图片路径），前端接收到信息后，可以创建img标签并设置其src属性为图片路径，从而将图片展示给用户。

通过这种方式，我们可以实现图片的上传和展示功能，为用户提供一个完整的文件上传体验。

当我们在浏览器中看到返回的上传信息时，我们可以知道文件已经成功上传。这个信息包含了所有表单字段的内容以及上传文件的详细信息，例如文件大小、路径、名称以及类型等。如果我们前往服务器的img目录查看，就会发现刚刚上传的图片已经在那里静静地等待我们进一步的操作。

那么，如何将这些图片显示在浏览器上呢？我们需要知道图片的URL路径。这个路径通常是服务器的域名加上img目录的路径以及图片的名称。例如，如果我们有一张图片名为“example.jpg”，并且它被上传到了服务器的img目录中，那么它的URL路径可能就是“ src=" 描述图片的文本">`。通过这种方式，我们就可以在网页上展示上传的图片了。

一、文件展示程序构建：

我们来构建一个基于Node.js的程序，使用fs模块读取文件，并创建一个名为`shower.js`的文件专门用于展示图片。

shower.js 文件内容：

引入必要的模块，构建一个名为 `show` 的函数，用于处理图片展示请求。

```javascript

const fs = require('fs');

const url = require('url');

function show(request, response) {

// 请求的URL，获取查询参数中的图片链接

const query = url.parse(request.url, true).query;

const imgurl = query.src;

// 使用fs模块读取图片文件并输出

fs.readFile('./img/' + imgurl, "binary", (err, file) => {

if (err) throw err; // 处理错误情况

response.writeHead(200, {"Content-Type": "image/png"}); // 设置响应头

response.write(file, "binary"); // 写入响应体

response.end(); // 结束响应

});

}

module.exports = { show }; // 导出show函数以便在其他文件中使用

```

二、路由映射配置：

在 `server.js` 文件中添加对 `show` 函数的路由映射。

```javascript

var routeurl = {

'/': starter.start, // 主页路由映射（假设starter模块存在start函数）

'/upload': uploader.upload, // 文件上传路由映射（假设uploader模块存在upload函数）处理文件上传请求。在上传完成后跳转到图片展示页面。添加图片展示路由映射，即 '/show'，映射到上面定义的show函数。 对应的模块是上面定义的shower模块。};module.exports = routeurl; // 将路由映射导出供其他模块使用三、上传功能的扩展：在 upload.js 中实现文件上传功能时，增加对图片的处理。通过表单，获取上传的文件信息，并重命名文件到指定目录。响应中包含一个指向新上传图片的链接。form.parse(request, function(err, fields, files) { // 表单数据const oldname = files.upload.name; // 获取上传文件的原始名称const newname = Date.now() + oldname.substr(oldname.lastIndexOf('.')); // 生成新的文件名fs.renameSync(files.upload.path, "./img/" + newname); // 将文件移动到指定目录response.writeHead(200, {'content-type': 'text/html'}); // 设置响应头const s = '

back

/show?src=' + newname + '" />

'; // 构建响应内容response.write(s);response.end(); // 结束响应});四、综合实践刚才学习了上传数据和上传图片的功能，接下来可以尝试结合这两项功能，实现一个更复杂的场景，如“设定用户名密码并上传头像”。五、接口实现掌握了GET和POST请求后，可以进一步实现简单的JSON或JSONP接口。这些接口可以用于处理更复杂的数据交互和API调用等场景。例如，创建一个用于用户注册的接口，接收用户名、密码和头像信息，并存储到数据库中。通过接口的实现，可以构建更强大的后端服务。通过学习和实践这些技术点，可以逐渐掌握Node.js在Web开发中的应用，为构建高效的后端服务打下基础。通过上面的步骤和实践，相信您可以构建出功能丰富的Web应用！创建 inter.js 文件

在 inter.js 文件中，我们引入了 URL 模块来处理请求的 URL，并定义了一个初始化函数 init。该函数会判断请求方法是否为 GET，如果是，则请求的 URL 查询参数并处理返回的数据。

当接收到 GET 请求时，我们首先 URL 查询参数。接着，我们定义了一个名为 data 的对象，其中包含了一些预设的数据。如果查询参数中包含 callback 参数，则我们通过 JSONP 的方式返回数据；否则，我们通过 JSON 方式返回数据。这种方式允许我们同时支持 JSON 和 JSONP 请求。

在 server 中添加 inter 的引用和路由映射

我们创建了一个路由对象 routeurl，其中包含了几个不同的路由处理函数。在这些路由中，我们添加了 inter 模块的 init 函数，用于处理 /inter 路由的请求。通过这种方式，我们可以轻松地将 inter 模块集成到我们的 server 中。

通过访问 JSON 或 JSONP 请求。为了更方便地查找相关 API 文档，我们还提供了一个中文地址：[

至此，我们完成了文章的讲解。本文介绍了如何搭建一个简单的 HTTP 服务器，进行数据和图片的提交与处理，并简要介绍了接口的编写。在后续的文章中，我们将深入接口的编写，并分享 Node.js 中的文件操作等内容。请大家继续关注我们的博客，共同学习进步。

我们也欢迎大家访问狼蚁 SEO 网站，了解更多关于 SEO 优化的知识和技巧。在此，我们也将不断分享 Node.js 的相关知识，包括文件操作等内容。希望大家能够从中受益，共同提升技术水平和网站优化能力。

我们使用 cambrian.render('body') 来渲染页面内容。这将帮助我们呈现一个清晰、易懂的界面，让用户能够方便地访问和使用我们的服务。