나는 당신이 제공 한 코드를 사용하고, 먼 미래에있는 사람들을 수용하기 위해 귀하의 질문에 덮여 것보다 더 철저 답변을 제공하겠습니다. "바닐라 JS"(http://www.vanilla-js.com/)를 사용하는 답변도 제공 할 것입니다. 너무 많은 허풍꾼이 어떻게 작동 하는지를 배우려고 할 때 "프레임 워크 사용"이라고 생각하기 때문입니다. 나는 그들이 그렇게하는 이유는 누군가가 어떻게 작동 하는지를 배울 때 "프레임 워크를 사용하라"고 말했기 때문이라고 생각합니다. 그들은 해커가 아니기 때문에 프로세스를 시도하고 이해하는 데 신경을 쓰지 않으므로 대다수의 사람들이 프레임 워크없이 유비 쿼터스 프레임 워크를 사용하지 않고 직접이 작업을 수행하는 방법을 이해하지 못하는 경우가 많습니다. 후드에서 진행되는 작업을 이해하면 더 나은 해커가 될 것이며,이 답변이 도움이되기를 바랍니다.
이제 출력하는 양식을 통해 POST (양식) 데이터를 받아들이고 싶다면 서버에 라우팅 메커니즘을 제공해야합니다. 즉, 사이트를 방문하는 사람들에게 양식을 제공하도록 서버에 지시하지만 사용자가 양식을 제출하면 노드는 POST 데이터를 약간의 처리 기능으로 라우트합니다. 코드에서 배우고 자하는 사람들을 수용하기 위해 먼저 완전한 대답을 제공 한 다음이를 더 자세히 분석했습니다.
var http = require('http');
var qs = require('querystring');
var formOutput = '<html><body>'
+ '<h1>XYZ Repository Commit Monitor</h1>'
+ '<form method="post" action="inbound" enctype="application/x-www-form-urlencoded"><fieldset>'
+ '<div><label for="UserName">User Name:</label><input type="text" id="UserName" name="UserName" /></div>'
+ '<div><label for="Repository">Repository:</label><input type="text" id="Repository" name="Repository" /></div>'
+ '<div><label for="Branch">Branch:</label><input type="text" id="Branch" name="Branch" value="master" /></div>'
+ '<div><input id="ListCommits" type="submit" value="List Commits" /></div></fieldset></form></body></html>';
var serverPort = 8124;
http.createServer(function (request, response) {
if(request.method === "GET") {
if (request.url === "/favicon.ico") {
response.writeHead(404, {'Content-Type': 'text/html'});
response.write('<!doctype html><html><head><title>404</title></head><body>404: Resource Not Found</body></html>');
response.end();
} else {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(formOutput);
}
} else if(request.method === "POST") {
if (request.url === "/inbound") {
var requestBody = '';
request.on('data', function(data) {
requestBody += data;
if(requestBody.length > 1e7) {
response.writeHead(413, 'Request Entity Too Large', {'Content-Type': 'text/html'});
response.end('<!doctype html><html><head><title>413</title></head><body>413: Request Entity Too Large</body></html>');
}
});
request.on('end', function() {
var formData = qs.parse(requestBody);
response.writeHead(200, {'Content-Type': 'text/html'});
response.write('<!doctype html><html><head><title>response</title></head><body>');
response.write('Thanks for the data!<br />User Name: '+formData.UserName);
response.write('<br />Repository Name: '+formData.Repository);
response.write('<br />Branch: '+formData.Branch);
response.end('</body></html>');
});
} else {
response.writeHead(404, 'Resource Not Found', {'Content-Type': 'text/html'});
response.end('<!doctype html><html><head><title>404</title></head><body>404: Resource Not Found</body></html>');
}
} else {
response.writeHead(405, 'Method Not Supported', {'Content-Type': 'text/html'});
return response.end('<!doctype html><html><head><title>405</title></head><body>405: Method Not Supported</body></html>');
}
}).listen(serverPort);
console.log('Server running at localhost:'+serverPort);
그리고 지금 내가했던 일을 왜 설명했는지 설명합니다.
var http = require('http');
var qs = require('querystring');
먼저 노드의 기본 '쿼리 문자열'모듈을 추가하여 실제 양식 데이터를 구문 분석합니다. 논리는 다음 훨씬 더 쉽게 읽을 수 있기 때문에
var formOutput = '<html><body>'
+ '<h1>XYZ Repository Commit Monitor</h1>'
+ '<form method="post" action="/inbound" enctype="application/x-www-form-urlencoded"><fieldset>'
+ '<div><label for="UserName">User Name:</label><input type="text" id="UserName" name="UserName" /></div>'
+ '<div><label for="Repository">Repository:</label><input type="text" id="Repository" name="Repository" /></div>'
+ '<div><label for="Branch">Branch:</label><input type="text" id="Branch" name="Branch" value="master" /></div>'
+ '<div><input id="ListCommits" type="submit" value="List Commits" /></div></fieldset></form></body></html>';
var serverPort = 8124;
나는 우리의 서버/라우팅/폼 처리 메커니즘 위의 형태로 출력을 이동했습니다. 또한 포트 정보를 수신하는 서버를 여기까지 옮겼습니다. 그 이유는 아래의 많은 정보 대신 한 곳에서만 정보를 변경해야하기 때문입니다.
http.createServer(function (request, response) {
는 (나는 보통이 기능을 "REQ"와 "입술"의 매개 변수를 단축,하지만 그건 그냥 내 취향이다.)
if(request.method === "GET") {
if (request.url === "/favicon.ico") {
response.writeHead(404, {'Content-Type': 'text/html'});
response.write(notFound);
response.end();
는 여기에 간단한 라우팅 예제를 포함 시켰습니다. 이 경우 우리 서버는 모든 주요 브라우저가 웹 페이지에 대한 거의 모든 초기 요청과 함께 요청한 "favicon.ico"요청을 수신 대기하게합니다. 이 파일은 방문중인 각 웹 페이지의 탭에서 볼 수있는 작은 아이콘입니다. 우리는 favicon을 제공 할 필요가 없지만 인바운드 요청을 처리하여 기본적인 라우팅 메커니즘을 보여줄 것입니다.
} else {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(formOutput);
}
방문자가 (이하 "의 favicon.ico는"우리가 위의 처리 이외의) 기본 GET 방식으로 서버에있는 다른 자원에 대한 자신의 브라우저를한다면, 우리는 그들에게 양식을 제공합니다.
} else if(request.method === "POST") {
그렇지 않은 경우 방문자가 서버에서 POST를 가리키는 경우 이전 GET 요청으로 검색 한 양식을 제출했을 가능성이 큽니다. 위의 작은 세부 사항을 잡은 경우 - -
if (request.url === "/inbound") {
는 여기에서 우리는 "/ 인바운드"라고 인바운드 요청을 듣고 우리의 HTML 양식의 "작업"입니다. 아시다시피, 양식의 "조치"는 양식 데이터를 보낼 위치를 브라우저에 알려줍니다.
var requestBody = '';
request.on('data', function(data) {
requestBody += data;
if(requestBody.length > 1e7) {
response.writeHead(413, 'Request Entity Too Large', {'Content-Type': 'text/html'});
response.end('<!doctype html><html><head><title>413</title></head><body>413: Request Entity Too Large</body></html>');
}
});
request.on('end', function() {
var formData = qs.parse(requestBody);
이것은 다소 혼란 스러울 수 있지만, 나는 그렇지 않다고 약속합니다. POST 요청은 클라이언트 브라우저에서 다중 부분 메시지로 보낼 수 있습니다. 폼에있는 몇 가지 변수만큼 작 으면이 변수를 볼 수는 없겠지만 처리하는 데이터의 크기를 조정하면 볼 수 있습니다. 관찰하는 경우 if() 문에 POST 데이터의 길이를 묻는 메시지가 표시됩니다. 악의적 인 사용자는 끝없는 파일을 업로드하여 서버를 종료 할 수 있지만 조치를 취하지 않을 수는 없습니다. 이렇게하면 POST 데이터 본문이 약 10MB로 제한되지만 그에 따라 조정해야합니다. 이런 일들을 안다면 미래의 두통을 예방할 수 있습니다. 나는 두통을 겪지 않기를 바랍니다.
response.writeHead(200, {'Content-Type': 'text/html'});
response.write('<!doctype html><html><head><title>response</title></head><body>');
response.write('Thanks for the data!<br />User Name: '+formData.UserName);
response.write('<br />Repository Name: '+formData.Repository);
response.write('<br />Branch: '+formData.Branch);
response.end('</body></html>');
});
여기서 우리는 양식 데이터를 사용합니다. Javascript의 특성 때문에 이러한 변수 이름은 대소 문자가 구분됩니다 (예 : "username"대신 "UserName"). 물론이 데이터를 사용하여 원하는 모든 작업을 수행 할 수 있습니다 (Node의 이벤트 루프 및 비동기 성질을 염두에 두십시오).
}
response.writeHead(404, 'Resource Not Found', {'Content-Type': 'text/html'});
return response.end('<!doctype html><html><head><title>404</title></head><body>413: Request Entity Too Large</body></html>');
은, 우리가 여기서했던이 포함되어 우리의 라우팅 예제를 계속하려면 포괄 일반 404 "찾을 수 없음"클라이언트를 전송 if() 문 아래에있는 POST 요청에 회신 우리는 이미하지 않은 처리.
} else {
response.writeHead(405, 'Method Not Supported', {'Content-Type': 'text/html'});
return response.end('<!doctype html><html><head><title>405</title></head><body>405: Method Not Supported</body></html>');
}
}).listen(serverPort);
console.log('Server running at localhost:'+serverPort);
이제 이상한 방법으로 요청을 처리하는 코드를 포함하여 코드를 완성했습니다. 내가 다루지 않은 몇 가지 사항 (함수 구조, 빈 폼 데이터 등)이 있지만 실제로 목표를 달성 할 수있는 많은 방법이 있습니다. 한때 제 CS 교수 중 한 명이 한때 말씀 드린 것처럼, 숙제를 나누어 누가 속임수를 쓰는지 쉽게 볼 수있는 프로그램을 만드는 방법은 너무 많습니다.
Express와 같은 외부 타사 라이브러리에 의존하지 않고 내장 모듈을 사용하여 Node에서 작업을 수행하는 데 다소 난해하거나 약간 어려운 프로세스가 아닌지 확인할 수 있기를 바랍니다. 그 라이브러리는 세계에서 그들의 자리를 차지하고 있지만 무리를 따르지는 않습니다. 하루가 끝날 때 스택 오버플로에 대한 책임이있는 사람이 아니기 때문에 코드에 대한 정보에 입각 한 결정을 내리십시오.
노드가있는 응용 프로그램을 빌드 할 때 (낮은 수준의) 프레임 워크를 사용하는 것이 좋습니다. 나는 개인적으로 익스프레스 (http://expressjs.com/)를 사용하지만, 선택하면 다른 옵션이 있습니다. 그 중에서도 정적 콘텐츠는 물론 다른 요청 유형 및 경로를 쉽게 처리 할 수 있습니다. –
http://stackoverflow.com/questions/6158933/http-post-request-in-node-js – user568109
내 블로그 http : // hectorcorrea에서 Express.js로 HTTP POST를 처리하는 방법에 대한 간단한 예를 볼 수 있습니다. .com/blog/introduction-to-node-js –