Serving Files 调用文件

Table of Contents

Serving Files 调用文件

拆分讲解

导入包

主方程扩展：

错误

完善 最终结果

结果

---

在这篇文章中， 主要讲述 如何 调用本地的文件在web server上

举个例子

本地 我们有html css 图片

然后我们收到了 request get 访问这些内容 我们要能顺利的将他们呈现给用户

上图中 

我们能看到在 public 这个文件夹中 包含 三个文件 一个JPD图片 一个HTML代码 一个CSS格式

我们在这就要去应用这些对象在我们的web server中

 

---

拆分讲解

导入包

第一步 我们会导入所需要的module http 或者 https（推荐）

然后fs 是filesystem 我们需要用它修改或者                                               

                        相关文章：https://blog.****.net/Cvan123/article/details/83280358

接下来path 我们需要用它得到 当前文件夹位置         

                        相关文章：https://mp.****.net/postedit/83099818                                

var http = require("http");
var fs = require("fs");
var path = require("path");

主方程扩展：

http.createServer(function(req, res) {

	console.log(`${req.method} request for ${req.url}`);

	if (req.url === "/") {
		fs.readFile("./public/index.html", "UTF-8", function(err, html) {
			res.writeHead(200, {"Content-Type": "text/html"});
			res.end(html);
		});

	}  else {
		res.writeHead(404, {"Content-Type": "text/plain"});
		res.end("404 File Not Found");
	}

}).listen(3000);


console.log("File server running on port 3000");

这是一个大致的框架包含处理分析

如果搜寻到当前领域不存在的文件 

会返回 404 File Not Found

readFile 以便去获得 HTML file中的所有代码  (File Stream是更好的选择 接下来会用到）

————————————

错误

但是这种code只能区分主页 和 非主页 

让我们来运行文件在 termial 中

Termial 运行 server：

打开浏览器运行

重返Termial

我们可以看到主页 在加载的同时 请求了 获取css jpg he ico 文件

——————————————————————————————————————————————

问题就来了

当我们尝试去获取css文件的时候 我们的code因为识别它不为主页

显示为404

我们可以确认它在浏览器中

——————————————————————————————————————————————

想要修复这个问题 我们需要对每个file进行识别

 

---

完善 最终结果

var http = require("http");
var fs = require("fs");
var path = require("path");

http.createServer(function(req, res) {

	console.log(`${req.method} request for ${req.url}`);

	if (req.url === "/") {
		fs.readFile("./public/index.html", "UTF-8", function(err, html) {
			res.writeHead(200, {"Content-Type": "text/html"});
			res.end(html);
		});

	} else if (req.url.match(/.css$/)) {

		var cssPath = path.join(__dirname, 'public', req.url);
		var fileStream = fs.createReadStream(cssPath, "UTF-8");

		res.writeHead(200, {"Content-Type": "text/css"});

		fileStream.pipe(res);

	} else if (req.url.match(/.jpg$/)) {

		var imgPath = path.join(__dirname, 'public', req.url);
		var imgStream = fs.createReadStream(imgPath);

		res.writeHead(200, {"Content-Type": "image/jpeg"});

		imgStream.pipe(res);

	} else {
		res.writeHead(404, {"Content-Type": "text/plain"});
		res.end("404 File Not Found");
	}

}).listen(3000);


console.log("File server running on port 3000");

在Else if 后面 我们首先检查 一串字符的通用表达式  后缀带有 css

res object是一个可写入的stream

fileStream.pipe(res); 

意味着filestream中读取的数据 会 自动带入res 并且自动结束

图片的请求同理去解决

结果

加载图片和主页成功以后

 

---

更多：

Author： Cvanzy 

在接下来文章中 我还会讨论更多这个话题