使用node中http搭建伺服器以及自己寫介面傳送請求
阿新 • • 發佈：2020-12-19
如果搭建伺服器的話，可以通過http模組（也可以通過第三方模組express搭建伺服器，express模組對http模組進行了封裝）
步驟：
1、引入http模組
2、建立伺服器
3、設定埠，開啟服務
4、監聽瀏覽器請求事件（設定request事件）
判斷檔案存在，則讀取檔案；如果檔案不存在，頁面顯示Not Found（或者顯示圖片）
const http = require('http'); const server = http.createServer(); server.listen(3000,()=>console.log("伺服器開啟了")); server.on('request', (request,response)=>{ response.writeHead(200,{ //設定狀態碼和響應頭 "Content-Type": "text/html;charset=utf-8" }) response.end('你好，伺服器已經搭建完成，不在轉圈圈了') //響應結果（也叫響應體），最後必須設定end做出響應 })
server.on('request',(request,response)=>{}) 中引數response的方法：
response.statusCode=200; //設定狀態碼
response.setHeader() //設定響應頭
response.write() //設定響應體
response.writeHead() //同時設定響應狀態碼和響應頭
response.end() //做出響應（必須設定）-引數是響應的結果（響應體）
demo1(根據不同url做出響應)
每進行修改一次程式碼，都要重新啟動node服務
停止伺服器（ctrl + c）
執行伺服器（node 檔名）//檔案開頭+Tab鍵
const fs = require('fs'); const http = require("http"); const server = http.createServer(); server.listen(3000,()=>console.log('伺服器已開啟')) server.on("request", (req,res)=>{ //根據req的Url判斷是什麼地址，做出不同響應 if(req.url==='/demo.html'){ fs.readFile('./demo.html', 'utf-8', (err,data)=>{ if(err) throw err; res.end(data); }) }else if(req.url==='/form.html'){ fs.readFile('./form.html','utf-8', (err,data)=>{ if(err) throw err; res.end(data); }) }else { // res.statusCode = 404; res.writeHead(404,{ "Content-Type": "text/html;charset=utf-8" }) res.end('Not found 沒有此檔案'); ///demo.html } })
demo2一套程式碼根據url做出不同響應
無論請求的是什麼檔案，如果檔案存在的話，那麼就去請求，得到響應；如果檔案不存在，伺服器響應404（Not Found）
const fs = require('fs');
const http = require("http");
const serve = http.createServer();
serve.listen(3000,()=>console.log('伺服器開啟了~'));
serve.on('request', (req,res)=>{
fs.access('.'+req.url, (err)=>{ //判斷檔案是否存在
if(err){
//如果沒有檔案
res.writeHead(404,{
"Content-Type":"text/html;charset=utf-8"
})
res.end("Not Found");
} else {
//如果有檔案
fs.readFile('.'+req.url,'utf-8',(err,data)=>{
if(err) throw err;
res.end(data);
})
}
})
})
實現下圖的前後端操作
使用者輸入使用者名稱和內容後，前端調介面傳送請求，後端需要有寫好的介面來收集資訊，儲存前端提交的資料。
1、後端操作：node寫介面
獲取留言：get方式介面的操作
新增留言：post方式介面的操作
如果請求的不是介面，那麼將當作檔案來處理，如果能讀取到檔案，將檔案資訊響應給前端，如果讀取不到檔案，將錯誤丟擲去。
⭐nodemon啟動伺服器
全域性安裝nodemon啟動伺服器，儲存時自動幫我們重啟伺服器。（nodemon app.js啟動伺服器）
（否則當我們修改node中程式碼時，需要頻繁重新啟動伺服器）
全域性安裝nodemon：npm i -g nodemon
作用：代替node啟動伺服器
優點：只要程式碼修改，自動重啟伺服器
//node.js
const fs = require("fs");
const querystring = require("querystring");
const mime = require("mime"); //引入mime第三方模組
const http = require("http");
const server = http.createServer();
server.listen(3000,()=>console.log("伺服器啟動了"));
server.on("request",(req,res)=>{ //監聽請求事件（只要有請求就觸發該事件）
var url = req.url;
//介面1：獲取留言
if(url=='/getMessage'){
//讀取json檔案，將結果響應給瀏覽器
fs.readFile('./msg.json',"utf-8",(err,data)=>{
if(err) throw err;
res.writeHead(200,{
"Content-Type":"application/json;charset=utf-8"
})
res.end(data);
})
//不reutrn報錯（記得return否則程式碼一直往下執行）
return
}
//介面2：新增留言
if(url==='/addMessage'){
//收集使用者資訊，儲存在json中
var str = '';
req.on('data',(chunk)=>{ //收集的資訊是一塊一塊接收的
str+=chunk;
})
req.on('end',()=>{
//接收完畢的結果，存在json中
let msg = querystring.parse(str); //轉為物件形式，通過.push將新資料放在原本json中
//儲存資料
//1、載入json檔案 2、將新資料放入json中 3、儲存json檔案(重新寫入json)
let resjson = require('./msg.json');
resjson.push(msg);
fs.writeFile('./msg.json',JSON.stringify(resjson),err=>{
if(err) {
res.end(JSON.stringify({msg:'請求失敗'}));
}else {
res.setHeader("Content-Type","application/json");
res.end(JSON.stringify({code:200,msg:'新增成功'}));
}
})
})
return;
}
//當作檔案處理
fs.access('./public/'+url, (err)=>{ //判斷有沒有檔案
if(err){
//如果沒有檔案
res.writeHead(404,{
"Content-Type":"text/html;chartset=utf-8"
})
res.end("Not Found");
} else {
//如果有檔案
fs.readFile("./public/"+url,(err,data)=>{
if(err) throw err;
res.setHeader("Content-Type",mime.getType(url));//mime是解決不同html/css/png/jpg的格式
res.end(data);
})
}
})
})
mime：第三方模組下載安裝，引入後即可使用，解決mime警告問題
2、使用原生ajax請求介面
<script>
function loadData () {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/getMessage');
xhr.onload = function () {
console.log(this.response);
var data = JSON.parse(this.response);
var str = '';
data.forEach(function (item) {
str += `
<li>
<div class="info"><img src="images/03.jpg"><span>${item.name}</span>
<p>釋出於：2019-08-20</p>
</div>
<div class="content">${item.content}</div>
</li>`;
});
// 把拼接=好的str放到ul中
document.querySelector('ul').innerHTML = str;
}
xhr.send();
}
loadData();
//新增留言功能
var send = document.getElementById("send");
send.onclick = function(){
var nickname = document.querySelector("#username").value.trim();
var content = document.querySelector("#area").value.trim();
var xhr = new XMLHttpRequest();
xhr.open("POST",'addMessage');
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onload = function(){
// console.log(this.response);
var res = this.response;
if(res.code===200){
alert(res.msg);
loadData();
}
}
xhr.send('name='+nickname+'&content='+content); //name=11&content=22
}
</script>