http 서버 구축을 위해 노드를 0부터 1(2)까지 학습합니다.
이전 수업 전 학습에서는 다양한 모듈 사양 간의 연관성과 차이점에 대해 배웠습니다. 이번 섹션에서는 본격적으로 노드 학습을 시작합니다. 먼저 간단한 프로그램을 실행할 수 있는 http 서버를 구축하는 것부터 시작합니다.
1. Hello World
가장 클래식한 hello world. 먼저 코드를 저장하기 위해 server.js을 생성합니다:
console.log( 'hello world' );
실행하려면 터미널에 node server.js를 입력합니다:
node server.js
터미널 hello world라는 단어를 출력합니다. 하지만 노드 서버 프로그램은 항상 브라우저에서 액세스해야 합니다. 여기서는 노드와 함께 제공되는 http 모듈을 사용해야 합니다.
var http = require('http'); // 引入http模块// 创建http服务器// request : 从浏览器带来的请求信息// response : 从服务器返回给浏览器的信息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...');여기에 다시 node server.js를 입력합니다. 터미널에 서버가 시작되었습니다...라는 메시지가 터미널에 출력되어 서버가 생성되어 실행 중임을 나타냅니다. 그런 다음 브라우저에서 127.0.0.1:3000을 방문합니다. hello world 페이지가 출력되는 것을 볼 수 있습니다.
2. 양식
지금은 페이지에 간단한 텍스트를 출력했지만 이제 사용자가 정보를 입력하고 제출할 수 있는 양식을 페이지에 표시하려고 합니다.
// server.js
var http = require('http');
http.createServer(function(request, response){
var html = '<html>\ <head>\ <meta charset=UTF-8" />\ </head>\ <body>\ <form action="/" method="post">\ <p>username : <input type="text" name="username" /></p>\ <p>password : <input type="password" name="password" /></p>\ <p>age : <input type="text" name="age" /></p>\ <p><input type="submit" value="submit" name="submit" /></p>\ </form>\ </body>\ </html>';
response.writeHead(200, {'content-type': 'text/html'}); // 输出html头信息
response.write(html); // 将拼接的html字符串输出到页面中
response.end(); // 结束
}).listen(3000);
console.log('server has started...');server.js의 콘텐츠를 수정하고 다시 실행하세요.
node server.js
페이지를 새로 고친 후 텍스트 상자 3개와 제출 버튼 1개를 발견했습니다. 우리 프로그램은 페이지만 렌더링하고 다른 처리는 수행하지 않기 때문에 페이지에 데이터를 제출하면 현재 페이지가 새로 고쳐집니다.
참고: 노드의 코드를 수정할 때마다 다시 시작해야 합니다.
2.1 GET 방식으로 제출된 데이터 가져오기
위 코드에서는 POST 방식을 사용했지만, 여기서는 먼저 GET 방식으로 제출된 데이터에 대해 살펴보겠습니다. 먼저 생각하지 마십시오. 데이터 보안은 get 메소드를 사용하여 제출된 양식 데이터를 얻는 방법을 배우고, post를 get으로 변경하고, 다시 실행하는 것입니다.
get 메소드를 사용하여 데이터를 제출하면 데이터가 URL 매개변수로 전달된다는 것을 알고 있으므로 URL의 매개변수를 구문 분석하여 데이터를 얻습니다. 여기서는 url 모듈의 메소드가 사용됩니다. 🎜 >
// server.js
var http = require('http'),
url = require('url');
http.createServer(function(request, response){
var html = '<html>\ <head>\ <meta charset=UTF-8" />\ </head>\ <body>\ <form action="/" method="get">\ <p>username : <input type="text" name="username" /></p>\ <p>password : <input type="password" name="password" /></p>\ <p>age : <input type="text" name="age" /></p>\ <p><input type="submit" value="submit" name="submit" /></p>\ </form>\ </body>\ </html>';
var query = url.parse( request.url, true ).query;
if( query.submit ){
var data = '<p><a href="/">back</a></p>'+
'<p>username:'+query.username+'</p>'+
'<p>password:'+query.password+'</p>'+
'<p>age:'+query.age+'</p>';
response.writeHead(200, {'content-type': 'text/html'});
response.write(data);
}else{
response.writeHead(200, {'content-type': 'text/html'});
response.write(html);
}
response.end(); // 结束
}).listen(3000);
console.log('server has started...');url.parse(request.url);
result:
Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: '?username=111113&password=123&age=122&submit=submit',
query: 'username=111113&password=123&age=122&submit=submit',
pathname: '/',
path: '/?username=111113&password=123&age=122&submit=submit',
href: '/?username=111113&password=123&age=122&submit=submit'
}url.parse(request.url, true);result:Url {
...
query: {
username: '111113',
password: '123',
age: '122',
submit: 'submit' },
...
}var query = url.parse( request.url, true ).query;
/*
{
username: '111113',
password: '123',
age: '122',
submit: 'submit'}
*/// server.js
var http = require('http'),
querystring = require('querystring');
http.createServer(function(request, response){
var html = '<html>\ <head>\ <meta charset=UTF-8" />\ </head>\ <body>\ <form action="/" method="post">\ <p>username : <input type="text" name="username" /></p>\ <p>password : <input type="password" name="password" /></p>\ <p>age : <input type="text" name="age" /></p>\ <p><input type="submit" value="submit" name="submit" /></p>\ </form>\ </body>\ </html>';
if( request.method.toLowerCase()=='post' ){
var postData = '';
request.addListener('data', function(chunk){
postData += chunk;
});
request.addListener('end', function(){
var data = querystring.parse(postData);
console.log( 'postData: '+postData );
console.log(data);
var s = '<p><a href="/">back</a></p>'+
'<p>username:'+data.username+'</p>'+
'<p>password:'+data.password+'</p>'+
'<p>age:'+data.age+'</p>';
response.writeHead(200, {'content-type': 'text/html'});
response.write(s);
response.end();
})
}else{
response.writeHead(200, {'content-type': 'text/html'});
response.write(html);
response.end();
}
}).listen(3000);
console.log('server has started...');- 더 이상 URL 모듈을 도입하지 않고 쿼리 문자열 대신 가져오기를 사용합니다. 기준 치수. 더 이상 URL을 운영하지 않으므로 소개할 필요가 없습니다.
- 현재 제출된 데이터가 있는지 확인하려면
request.method.toLowerCase()=='post' 데이터는 데이터 이벤트에 연결되어 종료 이벤트에서 처리됩니다. - 은
이벤트 내부에 기록됩니다. 비동기 작업이므로 반드시 데이터 출력이 완료된 후에만 실행할 수 있습니다.
response.end()endresponse.end() 콘솔에서 postData가 다음과 같은 문자열임을 확인할 수 있습니다.
아아아아
因此我们使用query.parse将postData解析为对象类型，以便获取提交过来的数据。
3. 路由
现在我们所有的逻辑都是在根目录下进行的，没有按照url区分，这里我们按照功能进行路由拆分。以上面的post请求为例，我们可以拆分为：页面初始化和form提交后的处理。
页面初始化：
// starter.js 页面初始化
function start(request, response){
var html = '<html>\ <head>\ <meta charset=UTF-8" />\ </head>\ <body>\ <form action="/show" method="post">\ <p>username : <input type="text" name="username" /></p>\ <p>password : <input type="password" name="password" /></p>\ <p>age : <input type="text" name="age" /></p>\ <p><input type="submit" value="submit" name="submit" /></p>\ </form>\ </body>\ </html>';
response.writeHead(200, {"Content-Type":"text/html"});
response.write( html );
response.end();
}
exports.start = start;展示获取的数据：
// uploader.js 展示获取的数据var querystring = require('querystring');function upload(request, response){ var postData = '';
request.addListener('data', function(chunk){
postData += chunk;
});
request.addListener('end', function(){ var data = querystring.parse(postData); console.log( 'postData: '+postData ); console.log(data); var s = '<p><a href="/">back</a></p>'+ '<p>username:'+data.username+'</p>'+ '<p>password:'+data.password+'</p>'+ '<p>age:'+data.age+'</p>';
response.writeHead(200, {'content-type': 'text/html'});
response.write(s);
response.end();
})
}
exports.upload = upload;然后在server.js中进行路由选择
// server.jsvar http = require('http'),
url = require('url');
http.createServer(function(request, response){ var pathname = url.parse(request.url).pathname; console.log(pathname);
response.end();
}).listen(3000);console.log('server has started...');我们任意改变URL地址，会看到输出的每个地址的pathname（忽略/favicon.ico）：
http://127.0.0.1:3000/ // 输出： / http://127.0.0.1:3000/show/ // 输出： /show/ http://127.0.0.1:3000/show/img/ // 输出： /show/img/ http://127.0.0.1:3000/show/?username=wenzi // 输出： /show/
因此我们就根据pathname进行路由，对路由进行方法映射：
// server.jsvar http = require('http'),
url = require('url'),
starter = require('./starter'),
uploader = require('./uploader');
http.createServer(function(request, response){ var pathname = url.parse(request.url).pathname; var routeurl = { '/' : starter.start, '/show' : uploader.upload
} if( typeof routeurl[pathname]=== 'function' ){
routeurl[pathname](request, response);
}else{ console.log('404 not found!');
response.end();
}
}).listen(3000);console.log('server has started...');如果匹配到路由 / ，则执行 starter.start(request, response) ；如果匹配到路由 /show ，则执行 uploader.upload(request, response) 。如果都没匹配到，则显示404。
4. 图片上传并显示
在上面我们已经能成功提交数据了，这里来讲解如何进行图片上传并显示。使用node自带的模块处理起来非常的麻烦，这里我们使用别人已经开发好的formidable模块进行编写，它对解析上传的文件数据做了很好的抽象。
npm install formidable --save-dev
在starter.js中，我们添加上file控件：
// starter.js
function start(request, response){
var html = '<html>\
<head>\
<meta charset=UTF-8" />\
</head>\
<body>\
<form action="/upload" method="post" enctype="multipart/form-data">\
<p>file : <input type="file" name="upload" multiple="multiple" /></p>\
<p><input type="submit" value="submit" name="submit" /></p>\
</form>\
</body>\
</html>';
response.writeHead(200, {"Content-Type":"text/html"});
response.write( html );
response.end();
}
exports.start = start;4.1 图片上传
首先我们进行的是图片上传操作，首先我们要确保当前目录中存在tmp和img目录。在 uploader.js 中：
// uploader.jsvar formidable = require('formidable'),
util = require('util'),
fs = require('fs');function upload(request, response){ if( request.method.toLowerCase()=='post' ){ var form = new formidable.IncomingForm();
form.uploadDir = './tmp/';
form.parse(request, function(err, fields, files) { var oldname = files.upload.name,
newname = Date.now() + oldname.substr(oldname.lastIndexOf('.'));
fs.renameSync(files.upload.path, "./img/"+newname ); // 上传到 img 目录
response.writeHead(200, {'content-type': 'text/plain'});
response.write('received upload:\n\n');
response.end(util.inspect({fields: fields, files: files}));
}); return;
}
}
exports.upload = upload;我们上传图片后跳转到upload路径，然后显示出相应的信息：
received upload:
{
fields: { // 其他控件，如input, textarea等
submit: 'submit'},
files:{ // file控件
upload:{
domain: null,
_events: {},
_maxListeners: undefined,
size: 5097,
path: 'tmp\\upload_b1f7c3e83af224e9f3a020958cde5dcd',
name: 'chrome.png',
type: 'image/png',
hash: null,
lastModifiedDate: Thu Jan 12 2017 23:09:50 GMT+0800 (中国标准时间),
_writeStream: [Object]
}
}
}我们再查看img目录时，就会发现我们刚才上传的照片了。
4.2 图片显示
将图片上传到服务器后，怎样才能把图片显示在浏览器上呢。这里我们就使用到了fs模块来读取文件，创建一个shower.js来专门展示图片：
// shower.jsvar fs = require('fs'),
url = require('url');function show(request, response){ var query = url.parse(request.url, true).query,
imgurl = query.src; // 读取图片并进行输出
// 这里读取链接中的src参数，指定读取哪张图片 /show?src=1484234660592.png
fs.readFile('./img/'+imgurl, "binary", function(err, file){ if(err) throw err;
response.writeHead(200, {"Content-Type": "image/png"});
response.write(file, "binary");
response.end();
})
}
exports.show = show;然后在 server.js 中添加上 show 的路由映射：
var routeurl = {
'/' : starter.start,
'/upload' : uploader.upload,
'/show' : shower.show
// 添加
};最后在 upload.js 中进行图片的引用：
form.parse(request, function(err, fields, files) { var oldname = files.upload.name,
newname = Date.now() + oldname.substr(oldname.lastIndexOf('.'));
fs.renameSync(files.upload.path, "./img/"+newname ); // 同步上传图片
response.writeHead(200, {'content-type': 'text/html'}); var s = '<p><a href="/">back</a></p><p><img src="/show?src='+newname+'" /></p>'; // 显示刚才的图片
response.write(s);
response.end();
});5. 综合
刚才学习了上传数据和上传图片，这里我们将其综合一下，拟定一个题目：“设定用户名密码，并上传头像”。希望可以自己实现一下。
6. 接口的实现
在第2部分学习了GET和POST请求，那么在这里写一个简单json或jsonp接口应该不是什么难事儿了吧。
创建一个 inter.js ：
// inter.jsvar url = require('url');function init(request, response){ if( request.method.toLowerCase()=='get' ){ var query = url.parse(request.url, true).query; var data = {"code":0, "msg":"success", "data":[{"username":"wenzi", "age":26}, {"username":"bing", "age":25}]}; if( query && query.callback ){ // jsonp
response.end( query.callback + '(' + JSON.stringify(data) + ')' );
}else{ // json
response.end( JSON.stringify(data) );
}
}
}
exports.init = init;在server中添加inter的引用和路由映射：
var routeurl = { '/' : starter.start, '/upload' : uploader.upload, '/show' : shower.show, '/inter' : inter.init // 添加};然后对 http://127.0.0.1:3000/inter 进行json请求或jsonp请求即可。
7. 总结
这节还是写了不少的内容，最核心的就是讲解如何搭建一个简单的http服务器，进行数据和图片的提交与处理，在最后稍微讲了下接口的编写，后面有机会的话，会再具体讲解下接口的编写。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7529
15
1378
52
81
11
54
19
21
75
eMule 검색이 서버에 연결할 수 없는 문제를 해결하는 방법
Jan 25, 2024 pm 02:45 PM
해결책: 1. eMule 설정을 확인하여 올바른 서버 주소와 포트 번호를 입력했는지 확인하십시오. 2. 네트워크 연결을 확인하고, 컴퓨터가 인터넷에 연결되어 있는지 확인하고, 라우터를 재설정하십시오. 설정이 온라인인 경우 네트워크 연결에 문제가 없으면 서버가 온라인인지 확인해야 합니다. 4. eMule 버전을 업데이트하고 eMule 공식 웹사이트를 방문하여 최신 버전의 eMule 소프트웨어를 다운로드합니다. 5. 도움을 구하세요.
RPC 서버 연결 불가 및 데스크탑 진입 불가 현상에 대한 해결 방법
Feb 18, 2024 am 10:34 AM
RPC 서버를 사용할 수 없고 데스크톱에서 접속할 수 없는 경우 어떻게 해야 합니까? 최근 몇 년 동안 컴퓨터와 인터넷이 우리 생활 곳곳에 침투했습니다. RPC(원격 프로시저 호출)는 중앙 집중식 컴퓨팅 및 리소스 공유를 위한 기술로서 네트워크 통신에서 중요한 역할을 합니다. 그러나 때때로 RPC 서버를 사용할 수 없어 데스크탑에 들어갈 수 없는 상황이 발생할 수 있습니다. 이 문서에서는 이 문제의 가능한 원인 중 일부를 설명하고 해결 방법을 제공합니다. 먼저 RPC 서버를 사용할 수 없는 이유를 이해해야 합니다. RPC 서버는
CentOS 설치 퓨즈 및 CentOS 설치 서버에 대한 자세한 설명
Feb 13, 2024 pm 08:40 PM
LINUX 사용자로서 CentOS에 다양한 소프트웨어와 서버를 설치해야 하는 경우가 많습니다. 이 글에서는 관련 작업을 원활하게 완료할 수 있도록 CentOS에 퓨즈를 설치하고 서버를 설정하는 방법을 자세히 소개합니다. CentOS 설치 퓨즈Fuse는 권한이 없는 사용자가 맞춤형 파일 시스템을 통해 파일 시스템에 액세스하고 작동할 수 있도록 하는 사용자 공간 파일 시스템 프레임워크입니다. CentOS에 퓨즈를 설치하는 것은 매우 간단합니다. 다음 단계를 따르십시오. 1. 터미널을 열고 다음 계정으로 로그인합니다. 루트 사용자. 2. 다음 명령을 사용하여 퓨즈 패키지를 설치합니다. ```yuminstallfuse3. 설치 프로세스 중 프롬프트를 확인하고 'y'를 입력하여 계속합니다. 4. 설치 완료
Dnsmasq를 DHCP 릴레이 서버로 구성하는 방법
Mar 21, 2024 am 08:50 AM
DHCP 릴레이의 역할은 두 서버가 서로 다른 서브넷에 있더라도 수신된 DHCP 패킷을 네트워크의 다른 DHCP 서버로 전달하는 것입니다. DHCP 릴레이를 사용하면 네트워크 센터에 중앙 집중식 DHCP 서버를 배포하고 이를 사용하여 모든 네트워크 서브넷/VLAN에 IP 주소를 동적으로 할당할 수 있습니다. Dnsmasq는 네트워크에서 동적 호스트 구성을 관리하는 데 도움이 되도록 DHCP 릴레이 서버로 구성할 수 있는 일반적으로 사용되는 DNS 및 DHCP 프로토콜 서버입니다. 이 기사에서는 dnsmasq를 DHCP 릴레이 서버로 구성하는 방법을 보여줍니다. 내용 항목: 네트워크 토폴로지 중앙 집중식 DHCP 서버의 DHCP 릴레이 D에서 고정 IP 주소 구성
PHP를 사용한 IP 프록시 서버 구축을 위한 모범 사례 가이드
Mar 11, 2024 am 08:36 AM
네트워크 데이터 전송에서 IP 프록시 서버는 사용자가 실제 IP 주소를 숨기고 개인정보를 보호하며 액세스 속도를 향상시키는 데 도움을 주는 중요한 역할을 합니다. 이 기사에서는 PHP를 사용하여 IP 프록시 서버를 구축하는 방법에 대한 모범 사례 가이드를 소개하고 구체적인 코드 예제를 제공합니다. IP 프록시 서버란 무엇입니까? IP 프록시 서버는 사용자와 대상 서버 사이에 위치한 중간 서버로서 사용자와 대상 서버 사이의 전송 스테이션 역할을 하며 사용자의 요청과 응답을 전달합니다. IP 프록시 서버를 사용하여
TFTP 서버를 활성화하는 방법
Oct 18, 2023 am 10:18 AM
TFTP 서버를 시작하는 단계에는 TFTP 서버 소프트웨어 선택, 소프트웨어 다운로드 및 설치, TFTP 서버 구성, 서버 시작 및 테스트가 포함됩니다. 자세한 소개: 1. TFTP 서버 소프트웨어를 선택할 때 먼저 필요에 맞는 TFTP 서버 소프트웨어를 선택해야 합니다. 현재 Tftpd32, PumpKIN, tftp-hpa 등과 같이 선택할 수 있는 TFTP 서버 소프트웨어가 많이 있습니다. 모두 간단하고 사용하기 쉬운 기능과 구성 옵션을 제공합니다. 2. TFTP 서버 소프트웨어 등을 다운로드하고 설치합니다.
에픽서버가 오프라인 상태일 때 게임에 접속할 수 없으면 어떻게 해야 하나요? 에픽게임즈가 오프라인으로 게임에 입장할 수 없는 이유에 대한 해결책
Mar 13, 2024 pm 04:40 PM
에픽서버가 오프라인 상태일 때 게임에 접속할 수 없으면 어떻게 해야 하나요? 이 문제는 많은 친구들이 겪었을 것입니다. 이 메시지가 나타나면 정품 게임을 시작할 수 없습니다. 이 문제는 일반적으로 네트워크 및 보안 소프트웨어의 간섭으로 인해 발생합니다. 이 문제의 편집자는 어떻게 설명합니까? 저는 여러분과 솔루션을 공유하고 싶습니다. 오늘의 소프트웨어 튜토리얼이 문제 해결에 도움이 되기를 바랍니다. 에픽 서버가 오프라인일 때 게임에 들어갈 수 없는 경우 해결 방법: 1. 게임 플랫폼과 보안 소프트웨어의 방해를 받을 수 있습니다. 2. 두 번째는 네트워크 변동이 너무 심하다는 것입니다. 라우터를 다시 시작하여 작동하는지 확인해보세요. 조건이 괜찮다면 5g 모바일 네트워크를 사용해 작동해 보세요. 3. 그럼 더 있을 수도 있겠네요
PI 노드 교육 : PI 노드 란 무엇입니까? Pi 노드를 설치하고 설정하는 방법은 무엇입니까?
Mar 05, 2025 pm 05:57 PM
Pinetwork 노드에 대한 자세한 설명 및 설치 안내서이 기사에서는 Pinetwork Ecosystem을 자세히 소개합니다. Pi 노드, Pinetwork 생태계의 주요 역할을 수행하고 설치 및 구성을위한 전체 단계를 제공합니다. Pinetwork 블록 체인 테스트 네트워크가 출시 된 후, PI 노드는 다가오는 주요 네트워크 릴리스를 준비하여 테스트에 적극적으로 참여하는 많은 개척자들의 중요한 부분이되었습니다. 아직 Pinetwork를 모른다면 Picoin이 무엇인지 참조하십시오. 리스팅 가격은 얼마입니까? PI 사용, 광업 및 보안 분석. Pinetwork 란 무엇입니까? Pinetwork 프로젝트는 2019 년에 시작되었으며 독점적 인 Cryptocurrency Pi Coin을 소유하고 있습니다. 이 프로젝트는 모든 사람이 참여할 수있는 사람을 만드는 것을 목표로합니다.
