在我們上次學到的是万哪,http模塊的基礎搭建。分為三個步驟抡秆。我們來看看我們的基礎的http外部搭建的服務器的步驟奕巍。
? ?//引入http模塊. 我們需要什么功能就需要引入什么支持的模塊。
? ? ? ? ? ? ? ? ?var http = require("http");
// 用http模塊來創(chuàng)建服務器的服務儒士。來進行發(fā)送服務的止。接受前端的發(fā)過來的數(shù)據(jù)和返回給前端的數(shù)據(jù)。
? ?var server = http.createServer(function(req,res){
? ? ? ? ? ? ?// 這里的req和res是我們的http模塊的重要的兩個對象着撩,第一個是前端請求對象冲杀,第二 ? ? ? ? ? ? ? ? ?個是服務器的(后端)響應的對象。在這個數(shù)據(jù)交互成功時睹酌,才會觸發(fā)回調(diào)函數(shù),在回調(diào)函數(shù)里权谁,我們可以傳兩個參數(shù),req,res來進行操作憋沿。架設路由旺芽,進行邏輯業(yè)務分支判斷。
? ? ? ? ? ? ?if(req.url=="/index.html"){ ??
? ? ? ? ? ? ? ? ? // 這是前端要請求這個文件路徑辐啄。就進入這個邏輯判斷采章,業(yè)務分支進行操作。
? ? ? ? ? ? ? ? }else if(req.url=="./text.html"){
? ? ? ? ? ? ? ? // ?這是請求的另個分支壶辜。
? ? ? ? ? ? ? ? }
})
//最后一步是讓服務器監(jiān)聽端口號進行判斷是否啟動成功悯舟。通過調(diào)用listen()方法。
server.listen(8080砸民,function(){
? ? ? console.log("success")
})
這是抵怎,我們最基礎的搭建node.js外部服務器。三個步驟岭参。
我們來更加深入了解一下node.js反惕。首先,我們看一下如何用node.js來接受get請求演侯。在我們很多前端和后端的交互中姿染,get請求是非常重要的,也是最重要的請求方法秒际。因為在get請求中悬赏,有個非常重要的地方就是狡汉,在接口拼接參數(shù)。我們首先要對請求的對象的路徑要分清闽颇。就是牽涉到接口和參數(shù)的分開轴猎。所以,要引入的是 url模塊进萄。在res返回對象中捻脖,我們要進行頁面的返回操作。就是要讀取服務器的文件中鼠,要寫入返回前端的res對象中可婶,所以,我們要引入的是援雇,fs模塊矛渴。我們看一下例子。
//首先還是要引入的是http模塊的
var http = require("http");
//要引入的是url模塊惫搏。
var url =require("url")
//創(chuàng)建服務的發(fā)送和響應
var server = http.crateServer(function(req,res){
// 注意:在req對象中具温,url屬性的值也包含著參數(shù),并且是以字符串來進行的筐赔。所以铣猩,我們要進行轉(zhuǎn)化。用url模塊下的parse()的方法來進行轉(zhuǎn)化茴丰,其一是分開請求路徑和端口达皿。其二是把參數(shù)轉(zhuǎn)化為對象格式』呒纾可以通過對象點屬性的方法進行操作峦椰。所以,傳入兩個參數(shù)汰规。req.url和true汤功。
var urlObj = url.parse(req.url,true) ?// 然后通過urlObj對象的pathname屬性去來進行路由架設。
? ? ?if(urlObj.pathname=="/index.html"){ ? ? // 這是第一條路由分支溜哮,如果前端來訪問index.html就走這條路由分支滔金。
? ? ? ? ? ? ? ? ? // 我們服務器(后端)可以通過fs模塊來寫入res對象中返回前端的數(shù)據(jù)。
? ? ? ? ? ? ? ? ? ? ?fs.createReadSteam("./index.html").pipe(res);?
? ? ? ?}else if(urlObj.pathname=="/index"){ ?// 這是個端口茬射,如果前端訪問這個路由的話鹦蠕,就走這 ? ? ? ? ?個邏輯分支冒签,進行操作在抛。假如是表單提交的話(提交方式是:get請求方法,我們可以判斷提 交的數(shù)據(jù)是否符合進行驗證萧恕。
? ? ?if(urlObj.query.user=="123"&&urlObj.query.pass=="321"){
? ? ? ? ? ? ?//我們可以給后臺發(fā)送一段文字刚梭。來作為提示登錄的狀態(tài)肠阱。用json的格式來進行返回給前端。
? ? ? ? ? ? ? ? ? ?res.write('{"des":"登錄成功了"}')朴读;
? ? ? ? ? ? ? ? ? ? res.end() // tcp面向協(xié)議來進行斷開屹徘。保證數(shù)據(jù)的交互成功。在write()方法里衅金,我們需要手動斷開噪伊。在;pipe()方法里氮唯,是不需要斷開的鉴吹。
}else{
? ? ? ? ? ? ? ? ? ?res.write('{"des":"登錄失敗了"}');
? ? ? ? ? ? ? ? ? res.end() ?// 斷開
}
? ? ? }
})
//服務器監(jiān)聽端口號.
server.listen(8888,function(){
console.log("success")
}) ? ? ? ? ? ? ?// 這樣的就是前端需要在接受數(shù)據(jù)時惩琉,就需要解析json格式豆励。
// 我們可以比較深入來簡化我們的路由分支。在前端我們用的方式是兩種瞒渠。(用ip地址和域名):一種是post 請求良蒸。一種是get請求。我們先看看伍玖,如果前端用post請求方式我們的node.js服務器.我們看看代碼嫩痰。
// 我們先練習ajax的post請求。
varinpt_one=document.querySelector("#inpt");
varinpt_two=document.querySelector("#inp");
varbtn=document.querySelector("#btn");
// 在點擊btn按鈕的時候觸發(fā)的是ajax的post請求窍箍。
btn.onclick=function(){
// 創(chuàng)建請求對象始赎。兼容寫法。
varxhr=window.XMLHttpRequest ?newXMLHttpRequest() :newActiveXObect("Microsoft.XMLHTTP") ;
// 配置請求方法
xhr.open("POST","http://10.0.153.236:8880/index",true)
// 發(fā)送參數(shù)仔燕。
// 參數(shù)的轉(zhuǎn)化造垛。 創(chuàng)建對象的方法來進行。也可以通過獲取值的變化來進行拼接到data里面晰搀。
vardataObj= {
"user":inpt_one.value,
"pass":inpt_two.value
}
vardata="user="+dataObj.user+"&pass="+dataObj.pass;
xhr.send(data)
// 監(jiān)聽狀態(tài)五辽。
xhr.onreadystatechange=function() {
if(xhr.readyState==4&&xhr.status==200){
varresultObj=JSON.parse(xhr.responseText)//這是前端來接受后臺的數(shù)據(jù)格式來進行轉(zhuǎn)化。用JSON.parse()來進行轉(zhuǎn)化為嚴格的json格式外恕。
alert(resultObj.des);
}
}
}
// 我們先練習ajax的post請求杆逗。
varinpt_one=document.querySelector("#inpt");
varinpt_two=document.querySelector("#inp");
varbtn=document.querySelector("#btn");
// 在點擊btn按鈕的時候觸發(fā)的是ajax的post請求。
btn.onclick=function(){
// 創(chuàng)建請求對象鳞疲。兼容寫法罪郊。
varxhr=window.XMLHttpRequest ?newXMLHttpRequest() :newActiveXObect("Microsoft.XMLHTTP") ;
// 配置請求方法
xhr.open("POST","http://10.0.153.236:8880/index",true)
// 發(fā)送參數(shù)。
// 參數(shù)的轉(zhuǎn)化尚洽。 創(chuàng)建對象的方法來進行悔橄。也可以通過獲取值的變化來進行拼接到data里面。
? ? vardataObj= {
? ? ? ? ? ? "user":inpt_one.value,
? ? ? ? ? ? "pass":inpt_two.value
}
vardata="user="+dataObj.user+"&pass="+dataObj.pass;
xhr.send(data)
// 監(jiān)聽狀態(tài)。
xhr.onreadystatechange=function() {
if(xhr.readyState==4&&xhr.status==200){
? ? var resultObj=JSON.parse(xhr.responseText)//這是前端來接受后臺的數(shù)據(jù)格式來進行轉(zhuǎn)化癣疟。 ? ? ? 用JSON.parse()來進行轉(zhuǎn)化為嚴格的json格式挣柬。
? ? ? ? ? ? ? ? ? ?alert(resultObj.des);
? ? ? ? }
? ? }
}
? ?我們在前端請求的時候,我們需要請求的其他文件睛挚。比如是html的css樣式邪蛔。還有其他的文件 的請求。我們需要的是服務器從的