[Day2] Node.js利用Express訪問index.html

蝸牛烏龜誰跑的快發表於2020-10-16
Node.jsExpressIndexHTML

[Day2] Node.js利用Express訪問index.html

文章目錄

要求

  • 瞭解Express框架
  • 瞭解JavaScript和html基礎知識
  • 瞭解node.js常用模組：http,fs
  • 瞭解require, exports

環境

  1. OS: Win10
  2. Node.js: v12.19.0
  3. Notepad++
  4. Express: v4.17.1

實戰

  1. 編寫一個簡單index.html檔案.
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
			<title>Hello HTML</title>
		</head>
		<body>
			<h1>看到這句話表示html頁面成功顯示了。</h1>
		</body>
	</head>
</html>
  1. 編寫index.js
var app=require("./server")

app.listen(3000);
console.log("Server running at localhost:3000");

  1. 編寫server.js

    var express=require("express");
var path=require("path");
var app=express();

app.get('/', (req, res) => {    
	var options = {
        root: __dirname,    
		headers: {
		  "Content-Type": "text/html"
		}
	}
	res.sendFile('index.html',options, function(error){
		if(error){
			console.log('Sent failed:', 'index.html' + error);
		}else{
			console.log('Sent sucess:', 'index.html');
		}
	});
});

module.exports = app;

  2. install Express

    npm install express

  3. 執行index.js

node index.js
  1. 瀏覽器看效果，及整個過程
    在這裡插入圖片描述

相關文章