ในขั้นแรกจะแนะนำการติดตั้ง node.js จากนั้นจึงแนะนำการใช้ node.js เพื่อสร้างเว็บเซิร์ฟเวอร์แบบง่าย สุดท้ายนี้ ตัวอย่างง่ายๆ ใช้เพื่อสาธิตการใช้งานการโต้ตอบข้อมูลระหว่าง หน้าเว็บและเซิร์ฟเวอร์
เว็บ เซิร์ฟเวอร์
เว็บเซิร์ฟเวอร์เรียกอีกอย่างว่าเซิร์ฟเวอร์ WWW ฟังก์ชันพื้นฐานของเซิร์ฟเวอร์ WWW (เวิลด์ไวด์เว็บ แปลเป็นภาษาจีน: เวิลด์ไวด์เว็บหรือเครือข่ายข้อมูลทั่วโลก) คือการให้บริการเรียกดูข้อมูลบนเว็บ เว็บเซิร์ฟเวอร์สามารถจัดเตรียมเอกสารให้กับลูกค้า เช่น เว็บเบราว์เซอร์ ยังสามารถวางไฟล์เว็บไซต์เพื่อให้โลกเรียกดู และยังสามารถวางไฟล์ข้อมูลเพื่อให้โลกดาวน์โหลดได้อีกด้วย
ซอฟต์แวร์เว็บเซิร์ฟเวอร์ทั่วไป ได้แก่ Apache, Internet Information Server (Internet Information Services, IIS) เป็นต้น
เซิร์ฟเวอร์ Apache: เซิร์ฟเวอร์ Apache เป็นโอเพ่นซอร์สและซอฟต์แวร์เซิร์ฟเวอร์ฟรีที่สามารถทำงานบนแพลตฟอร์มคอมพิวเตอร์เกือบทั้งหมด เนื่องจาก Apache เป็นโอเพ่นซอร์ส ทุกคนจึงสามารถมีส่วนร่วมในการพัฒนาคุณสมบัติใหม่และปรับปรุงเซิร์ฟเวอร์ Apache อย่างต่อเนื่อง Apache HTTP Server (เรียกสั้น ๆ ว่า Apache) เป็นหน้าเว็บโอเพ่นซอร์สของ Apache Software Foundation เป็นเซิร์ฟเวอร์แบบแยกส่วนที่สามารถทำงานบนแพลตฟอร์มคอมพิวเตอร์ที่ใช้กันอย่างแพร่หลายเกือบทั้งหมด (นั่นคือรองรับหลายแพลตฟอร์ม) มันเป็นของแอปพลิเคชันเซิร์ฟเวอร์
เซิร์ฟเวอร์ IIS: เซิร์ฟเวอร์ IIS คือเซิร์ฟเวอร์ของ Microsoft ที่อนุญาตให้ IIS เผยแพร่เว็บเซิร์ฟเวอร์ที่เชื่อถือได้บนอินทราเน็ตสาธารณะหรืออินเทอร์เน็ต IIS สามารถใช้ได้ภายใต้ระบบปฏิบัติการ Windows ของ Microsoft เท่านั้น
คุณสามารถสร้างเว็บเซิร์ฟเวอร์โดยใช้ Node.js ได้โดยไม่ต้องอาศัยซอฟต์แวร์บริการเว็บที่กล่าวถึงก่อนหน้านี้
Node.js คืออะไร ?
พูดง่ายๆ ก็คือ Node.js เป็นโอเพ่นซอร์สและสภาพแวดล้อมรันไทม์ JavaScript ฝั่งเซิร์ฟเวอร์ข้ามแพลตฟอร์มที่อนุญาตให้ใช้ JavaScript เป็นแบ็กเอนด์ได้
การติดตั้ง Node.js บน Windows
หากต้องการใช้ Node.js คุณต้องติดตั้งก่อน
หากต้องการใช้ Node.js คุณต้องติดตั้งก่อน ก่อนอื่นให้ไปที่เว็บไซต์อย่างเป็นทางการของ nodejs Node.js หรือไปที่เว็บไซต์ภาษาจีน เพื่อดาวน์โหลด | . Node.js ดาวน์โหลดเว็บไซต์จีน
LTS ย่อมาจาก "การสนับสนุนระยะยาว" และขอแนะนำให้ผู้ใช้ส่วนใหญ่ใช้เวอร์ชันนี้ สิ่งที่ฉันดาวน์โหลดคือ node-v14.18.1-x64.msi
เพียงดับเบิลคลิกแพ็คเกจการติดตั้งที่ดาวน์โหลดมาและติดตั้งโดยตรง คุณสามารถปรับแต่งเส้นทางได้ ตัวแปรสภาพแวดล้อมจะได้รับการกำหนดค่าโดยอัตโนมัติระหว่างการติดตั้ง (ตามค่าเริ่มต้น เส้นทางการติดตั้งจะถูกเพิ่มให้กับตัวแปรสภาพแวดล้อมของเส้นทางโดยอัตโนมัติ) เพื่อการดูแลมือใหม่มีขั้นตอนการติดตั้งแสดงรายละเอียดด้านล่าง
ดับเบิลคลิกแพ็คเกจการติดตั้งที่ดาวน์โหลดมาเพื่อติดตั้ง ดังที่แสดงด้านล่าง
คลิกปุ่มถัดไป จากนั้นอินเทอร์เฟซต่อไปนี้จะปรากฏขึ้น:
ตรวจสอบตัวเลือกยอมรับข้อตกลงแล้วคลิกปุ่มถัดไป
ไดเร็กทอรีการติดตั้งเริ่มต้นของ Node.js คือ "C:Program Filesnodejs" คุณสามารถแก้ไขไดเร็กทอรี (ฉันเปลี่ยนอักษรระบุไดรฟ์ D) จากนั้นคลิกปุ่มถัดไปจะปรากฏขึ้น:
คุณสามารถคลิกที่โหนดไอคอนรูปต้นไม้เพื่อเลือกโหมดการติดตั้งที่คุณต้องการ เก็บค่าเริ่มต้นไว้ที่นี่แล้วคลิกปุ่มถัดไปจะปรากฏขึ้น:
คลิกช่องทำเครื่องหมายหากคุณต้องการติดตั้งเครื่องมือเพื่อคอมไพล์โมดูลดั้งเดิม โดยปกติแล้ว ไม่จำเป็นต้องติดตั้งเครื่องมือเหล่านี้ ดังนั้นจึงไม่จำเป็นต้องทำเครื่องหมายในช่องนี้
คลิกปุ่มติดตั้งเพื่อเริ่มการติดตั้ง Node.js และอินเทอร์เฟซต่อไปนี้จะปรากฏขึ้น:
กรุณารอสักครู่ หน้าจอต่อไปนี้จะปรากฏขึ้น:
ณ จุดนี้ คลิกปุ่มเสร็จสิ้นเพื่อออกจากวิซาร์ดการตั้งค่า
ไดเร็กทอรีหลังการติดตั้งมีดังนี้:
คุณจะเห็น npm.cmd ในไดเร็กทอรี มันคืออะไร?
เมื่อติดตั้ง Node.js npm จะถูกติดตั้งพร้อมกันโดยอัตโนมัติ เป็นเครื่องมือการจัดการแพ็คเกจโหนด (โมดูล) ที่สามารถแก้ไขปัญหาต่างๆ ในการปรับใช้โค้ด Node.js ได้ดังต่อไปนี้:
อนุญาตให้ผู้ใช้ดาวน์โหลดจาก เซิร์ฟเวอร์ NPM ที่เขียนโดยแพ็คเกจบุคคลที่สามสำหรับการใช้งานในเครื่อง
อนุญาตให้ผู้ใช้ดาวน์โหลดและติดตั้งโปรแกรมบรรทัดคำสั่งที่เขียนโดยผู้อื่นจากเซิร์ฟเวอร์ NPM เพื่อการใช้งานในเครื่อง
อนุญาตให้ผู้ใช้อัปโหลดแพ็คเกจหรือโปรแกรมบรรทัดคำสั่งที่พวกเขาเขียนไปยังเซิร์ฟเวอร์ NPM เพื่อให้ผู้อื่นนำไปใช้
หากคุณติดตั้ง npm เวอร์ชันเก่า คุณสามารถอัปเกรดได้อย่างง่ายดายผ่านคำสั่ง npm สำหรับระบบ Windows ให้ใช้คำสั่งต่อไปนี้:
npm install npm -g
ใช้เครื่องมือการจัดการแพ็คเกจ npm เพื่อติดตั้งไลบรารีบุคคลที่สาม (แพ็คเกจ npm) วิธีการติดตั้งมีสองประเภท: การติดตั้งส่วนกลางและการติดตั้งในเครื่อง:
เมื่อพิจารณาจากบรรทัดคำสั่งความแตกต่างก็คือว่ามี -g หรือไม่เช่น
การติดตั้ง npm X # การติดตั้งบางส่วน (ในเครื่อง) จะดาวน์โหลดโมดูลไปยังไดเร็กทอรีที่คำสั่งปัจจุบัน เส้นตั้งอยู่ คุณอาจพบข้อผิดพลาด "'X' ไม่ใช่คำสั่งภายในหรือภายนอกหรือโปรแกรมที่ทำงานได้" npm install X -g # การติดตั้ง Global สามารถใช้งานได้โดยตรงในบรรทัดคำสั่ง
ตรวจสอบว่าติดตั้ง Node.js และ npm อย่างถูกต้องหรือไม่
เปิดการรันด้วย win+r และป้อน cmd เพื่อเข้าสู่อินเทอร์เฟซบรรทัดคำสั่ง จากนั้นป้อนคำสั่ง node -v และ npm -v เพื่อดูหมายเลขเวอร์ชันของโหนดและหมายเลขเวอร์ชัน npm ดูภาพด้านล่าง:
หมายเลขเวอร์ชันแสดงอย่างถูกต้อง ตกลง!
ใช้ node.js เพื่อสร้างเว็บเซิร์ฟเวอร์แบบธรรมดา
สร้างไฟล์ชื่อ myServer.js ในไดเร็กทอรีของโปรเจ็กต์ของคุณ (ที่นี่ ใช้โฟลเดอร์ D:test เป็นตัวอย่าง) และเขียนโค้ดต่อไปนี้:
var http = need( 'http');
http.createServer (ฟังก์ชัน (คำขอ การตอบสนอง) {
//ส่งส่วนหัว HTTP //ค่าสถานะ HTTP: 200: ตกลง
// ประเภทเนื้อหา: ข้อความ/ธรรมดา และใช้ charset=UTF-8 เพื่อแก้ปัญหาการตอบกลับเอาต์พุตภาษาจีนที่อ่านไม่ออก response.writeHead(200, {'Content-Type': 'text/plain; charset=UTF-8'});
//ประโยคถัดไปคือการส่งข้อมูลการตอบสนอง response.end('Hello World! This is a simple web server test.n');
}).ฟัง(8888);
//เทอร์มินัลพิมพ์ข้อมูลต่อไปนี้ console.log('Server running at http://127.0.0.1:8888/'); หมายเหตุ: var http = need("http"); ใช้คำสั่ง need เพื่อโหลดโมดูล http และกำหนดค่า HTTP ที่สร้างอินสแตนซ์ให้กับตัวแปร http
เมื่อคุณเขียนโปรแกรม .js คุณจะต้องรันโปรแกรมผ่าน node.js ใน CMD ให้สลับไปที่ไดเร็กทอรีที่โปรแกรมถูกเขียน จากนั้นใช้โหนด XXX.js เพื่อเริ่มบริการ หากคุณไม่สลับ path ก่อน จากนั้นใช้ node pathXXX.js เพื่อเริ่มบริการ จากนั้นป้อนที่อยู่ IP การฟังและหมายเลขพอร์ตที่เกี่ยวข้องในเบราว์เซอร์ หมายเลขพอร์ตที่นี่อาจมีขนาดใหญ่กว่า เนื่องจากเป็นการทดสอบแบบย้อนกลับ จึงใช้ 127.0.0.1 เป็น IP ทดสอบ
ใช้โหนด D:test foldermyServer.js ดูภาพด้านล่าง:
ตัวอย่างง่ายๆ ทำงานสำเร็จ ซึ่งจริงๆ แล้วใช้ node.js เพื่อสร้างเซิร์ฟเวอร์ จากนั้นรับฟังเหตุการณ์การเข้าถึงของพอร์ต และในที่สุดก็ตอบสนองตามนั้น ควรชี้ให้เห็นว่าเมื่อเราปิด CMD หรือกด CTRL+C บริการ ปิดแล้ว.
ตอนนี้ เปิดเบราว์เซอร์และไปที่ http://127.0.0.1:8888/ คุณจะเห็นหน้าเว็บต่อไปนี้:
ความสำเร็จ!
ตัวอย่างการโต้ตอบข้อมูลระหว่างหน้าเว็บและเซิร์ฟเวอร์
ตอนนี้เราจะใช้ตัวอย่างง่ายๆ เพื่อสาธิตการใช้งานการโต้ตอบข้อมูลระหว่างหน้าเว็บและเซิร์ฟเวอร์
ตัวอย่างนี้มีสองส่วน: รหัสเซิร์ฟเวอร์และรหัสหน้าเว็บ
รหัสเซิร์ฟเวอร์มีดังนี้:
//require แสดงถึงแพ็คเกจการแนะนำ และแพ็คเกจการแนะนำหมายถึงฟังก์ชันพิเศษที่อ้างถึงตัวเอง var http = need("http") ;
var url = ต้องการ ("url");
เซิร์ฟเวอร์ var = http.createServer(ฟังก์ชั่น(req,res){
//รับส่วนของแบบสอบถาม เนื่องจาก true ถูกเขียน จึงเป็นวัตถุ var queryObj = url.parse(req.url,true).query;
ชื่อ var = queryObj.name;
อายุ var = queryObj.age;
var sex = queryObj.sex;
res.writeHead(200,{"Content-Type":text/html;charset=UTF-8"});
res.end("เซิร์ฟเวอร์ได้รับคำขอแบบฟอร์ม" + ชื่อ + อายุ + เพศ);
-
//เรียกใช้เซิร์ฟเวอร์และฟังพอร์ต 3000 (หมายเลขพอร์ตสามารถเปลี่ยนแปลงได้ตามต้องการ)
เซิร์ฟเวอร์.ฟัง(3000,"127.0.0.1");
//เทอร์มินัลพิมพ์ข้อมูลต่อไปนี้ console.log('Server running at http://127.0.0.1:3000/') และบันทึกไฟล์ชื่อ server2.js ในไดเร็กทอรีของโปรเจ็กต์ (ในที่นี้ ให้นำ D: โฟลเดอร์ทดสอบเป็นตัวอย่าง)
รันโดยใช้โหนด D:test folderServer2.js:
รหัสหน้าเว็บเป็นดังนี้:
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<title>การโต้ตอบกับหน้าเว็บเซิร์ฟเวอร์</title>
</หัว>
<ร่างกาย>
<การกระทำของฟอร์ม = "http://127.0.0.1:3000/" วิธีการ = "GET">
ชื่อ:
<ประเภทอินพุต = "ข้อความ" ชื่อ = "ชื่อ" /> <br />
อายุ:
<input type="text" name="age" /> <br />
<input type="radio" name="sex" value="Male"/> ชาย<input type="radio" name="sex" value="Female"/> หญิง<br />
<ประเภทอินพุต = "ส่ง">
</แบบฟอร์ม>
</ร่างกาย>
</html> บันทึกชื่อไฟล์เป็นตัวอย่างของการโต้ตอบกับ Server.html และรันด้วยเบราว์เซอร์:
โดยเฉพาะอย่างยิ่ง ตัวอย่างนี้ค่อนข้างง่าย โดยเฉพาะอย่างยิ่งแบ็คเอนด์ทำให้การประมวลผลข้อมูลง่ายขึ้น ในระบบแอปพลิเคชันจริง โดยทั่วไปแบ็คเอนด์จะใช้ฐานข้อมูลเพื่อบันทึกข้อมูล โดยมีจุดประสงค์หลักเพื่อให้มือใหม่ใช้งานง่าย -เข้าใจการรับรู้ มีภาพรวมเพื่อช่วยให้คุณเริ่มต้นได้อย่างรวดเร็ว ด้วยเหตุนี้ จึงมีรากฐานสำหรับการเรียนรู้เชิงลึก
แนะนำ: "วิดีโอสอน Node.js"
ด้านบนนี้เป็นคำอธิบายกราฟิกและข้อความเกี่ยวกับวิธีสร้างเว็บเซิร์ฟเวอร์ด้วย Node.js สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP Chinese!
