從0到1學習node(二)建造http伺服器
在上節的課前學習中，我們了解了一下不同模組規範之間的聯繫與區別。本節我們正式開始node的學習，首先我們先從建立一個http伺服器，能運行簡單的程式開始說起。
1. hello world
最經典的hello world。首先我們建立一個server.js來保存我們的程式碼：
console.log( 'hello world' );
在終端輸入node server.js運行:
node server.js
終端就會輸出 的字樣。可是我們一個node伺服器程序，總是要在瀏覽器上訪問的呀，這裡就要用到node裡自帶的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...');運行，終端機裡會有輸出server has started… 的字樣，表示伺服器已創建並正在運行，然後我們在瀏覽器上訪問127.0.0.1:3000，就可以看到頁面中輸出了hello world 。 2. form表單
剛才我們只是在頁面中輸出了一段簡單的文本，現在我們要在頁面中呈現一個表單，可以讓用戶輸入資訊並進行提交：
// 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...');node server.js
我們每次修改node中的任何程式碼後，都要重新啟動。 2.1 取得表單GET方式提交的資料
我們上面的程式碼中使用的是POST方式，不過這裡要先討論使用
GET方式提交過來的數據，我們先不考慮資料的安全性，只是學習如何取得使用get方式提交過來的form表單數據，將post改為get，重新運行。 我們知道，使用get方式提交數據，會將數據作為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是用來解析URL字串的，並且傳回解析後的URL物件。若我們只輸出一下url.parse(request.url) ：
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'
}如果將第2個參數設為true，則會將返回結果中的query屬性解析為一個對象，其他屬性不變；預設值為false ，即query屬性是一個字串：
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'}
*/現在我們使用post方式來提交資料。因為POST請求一般都比較「重」 （使用者可能會輸入大量的內容），如果用阻塞的方式來處理處理，必然會導致使用者操作的阻塞。因此node將post資料拆分為許多小的資料塊，然後透過data事件（表示新的小資料塊到達了）和end事件傳遞這些小資料塊（表示所有的資料都已經接收完畢）。 所以，我們的思路應該是：在data事件中取得資料塊，在end事件中操作資料。
// 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模組， 改用引入querystring模組。因為我們不再對URL進行操作了，也沒必要引入了；
- 使用
- request.method.toLowerCase()=='post'
判斷當前是否有資料提交；
data 在data事件中進行資料的拼接，在end事件中進行的處理； - response.end()
寫在了
end事件內部，因為end事件是非同步操作，因此必須得資料輸出完成之後才能執行response .end()我們在控制台中可以看出，postData是這樣的一個字串：
'username=123&password=123&age=23&submit=submit';
因此我们使用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 Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
電驢搜尋連不上伺服器如何解決
Jan 25, 2024 pm 02:45 PM
解決方法：1、檢查電驢設置，確保已輸入正確的伺服器位址和連接埠號碼；2、檢查網路連接，確保電腦已連接到互聯網，並重置路由器；3、檢查伺服器是否在線，如果您的設定和網路連線都沒有問題，則需要檢查伺服器是否在線上；4、更新電驢版本，造訪電驢官方網站，下載最新版本的電驢軟體；5、尋求協助。
無法連接到RPC伺服器導致無法進入桌面的解決方法
Feb 18, 2024 am 10:34 AM
RPC伺服器不可用進不了桌面怎麼辦近年來，電腦和網路已經深入到我們的生活中的各個角落。作為一種集中運算和資源共享的技術，遠端過程呼叫（RPC）在網路通訊中起著至關重要的作用。然而，有時我們可能會遇到RPC伺服器無法使用的情況，導致無法進入桌面。本文將介紹一些可能導致此問題的原因，並提供解決方案。首先，我們需要了解RPC伺服器不可用的原因。 RPC伺服器是一種
CentOS安裝fuse及CentOS安裝伺服器詳解
Feb 13, 2024 pm 08:40 PM
身為LINUX用戶，我們經常需要在CentOS上安裝各種軟體和伺服器，本文將詳細介紹如何在CentOS上安裝fuse和建置伺服器的過程，幫助您順利完成相關操作。 CentOS安裝fuseFuse是一個使用者空間檔案系統框架，允許非特權使用者透過自訂檔案系統實現對檔案系統的存取和操作，在CentOS上安裝fuse非常簡單，只需按照以下步驟操作：1.開啟終端，以root用戶登入。 2.使用下列指令安裝fuse軟體包：```yuminstallfuse3.確認安裝過程中的提示，輸入`y`繼續。 4.安裝完
如何將Dnsmasq設定為DHCP中繼伺服器
Mar 21, 2024 am 08:50 AM
DHCP中繼的作用是將接收到的DHCP封包轉送到網路上的另一個DHCP伺服器，即使這兩台伺服器位於不同的子網路中。透過使用DHCP中繼，您可以實現在網路中心部署集中式的DHCP伺服器，並利用它為所有網路子網路/VLAN動態分配IP位址。 Dnsmasq是一種常用的DNS和DHCP協定伺服器，可設定為DHCP中繼伺服器，以協助管理網路中的動態主機設定。在本文中，我們將向您展示如何將dnsmasq配置為DHCP中繼伺服器。內容主題：網路拓樸在DHCP中繼上設定靜態IP位址集中式DHCP伺服器上的D
用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伺服器軟體，目前有許多可供選擇的TFTP伺服器軟體，例如Tftpd32、PumpKIN、tftp-hpa等，這些軟體都提供了簡單易用的介面和設定選項；2、下載和安裝TFTP伺服器軟體等等。
epic伺服器離線進不了遊戲怎麼辦？ epic離線進不了遊戲解決方法
Mar 13, 2024 pm 04:40 PM
epic伺服器離線進不了遊戲怎麼辦？這個問題想必很多小夥伴都有遇過，出現了此提示就是導致正版的遊戲無法啟動，那麼出現這個問題一般是網絡和安全軟體幹擾導致的，那麼應該怎麼解決呢，本期小編就來和大夥分享解決方法，希望今日的軟體教學可以幫助各位解決問題。 epic伺服器離線進不了遊戲怎麼辦： 1、很可能是被安全軟體幹擾了，將遊戲平台和安全軟體關閉在重啟。 2、其次就是網路波動過大，嘗試重啟一次路由器，看看是否有效，如果條件可以的話，可以嘗試使用5g移動網絡來進行操作。 3、然後有可能是更
Pi Node教學：什麼是Pi節點？如何安裝和設定Pi Node？
Mar 05, 2025 pm 05:57 PM
PiNetwork節點詳解及安裝指南本文將詳細介紹PiNetwork生態系統中的關鍵角色——Pi節點，並提供安裝和配置的完整步驟。 Pi節點在PiNetwork區塊鏈測試網推出後，成為眾多先鋒積極參與測試的重要環節，為即將到來的主網發布做準備。如果您還不了解PiNetwork，請參考Pi幣是什麼？上市價格多少？ Pi用途、挖礦及安全性分析。什麼是PiNetwork？ PiNetwork項目始於2019年，擁有其專屬加密貨幣Pi幣。該項目旨在創建一個人人可參與
