- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
作为序言,我目前正在学习如何使用 vanilla nodeJS 来托管个人项目的 html 文件。我正在使用以下代码来执行此操作。我意识到为了用 html 显示图像,我需要公开提供文件;但是,我不确定如何使用下面提供的代码来执行此操作。我感谢任何关于如何实现这一目标的反馈和贡献。
var http = require("http");
var url = require("url");
var fs = require("fs");
var server = http.createServer(function (request, response) {
var path = url.parse(request.url).pathname;
switch (path) {
case "/homepage.html":
fs.readFile(__dirname + path, function(error, data) {
if (error) {
response.writeHead(404);
response.write(error);
response.end();
} else {
response.writeHead(200, {'Content-Type':'text/html'});
response.write(data);
response.end();
}
});
break;
case "/page1.html":
fs.readFile(__dirname + path, function(error, data) {
if (error) {
response.writeHead(404);
response.write(error);
response.end();
} else {
response.writeHead(200, {'Content-Type':'text/html'});
response.write(data);
response.end();
}
});
break;
default:
response.writeHead(404);
response.write("Oops this doesn't exist!");
response.end();
}
});
server.listen(8008);
console.log("Server is running on port 8008");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class = "row">
<div class = "col-sm-4">
<img src = "/image.jpg/" class = "img-fluid" class = "rounded-circle">
</div>
<div class = "col-sm-8">
</div>
</body>
</html>
最佳答案
嘿,试试这段代码:
var http = require("http");
var url = require("url");
var fs = require("fs");
var server = http.createServer(function (request, response) {
var path = url.parse(request.url).pathname;
switch (path) {
case "/homepage.html":
fs.readFile(__dirname + path, function(error, data) {
if (error) {
response.writeHead(404);
response.write(error);
response.end();
} else {
response.writeHead(200, {'Content-Type':'text/html'});
response.write(data);
response.end();
}
});
break;
case "/page1.html":
fs.readFile(__dirname + path, function(error, data) {
if (error) {
response.writeHead(404);
response.write(error);
response.end();
} else {
response.writeHead(200, {'Content-Type':'text/html'});
response.write(data);
response.end();
}
});
break;
default:
// response.writeHead(404);
// response.write("Oops this doesn't exist!");
// response.writeHead(200, {'Content-Type':'text/html'});
// response.write(data);
console.log('I am here for path ', path);
fs.readFile(__dirname + path, function(error, data) {
if (error) {
response.writeHead(404);
response.write(error);
response.end();
} else {
response.writeHead(200, {'Content-Type':'image/jpg'});
response.write(data);
response.end();
}
});
}
});
server.listen(8008);
console.log("Server is running on port 8008");
所以,因为对于图像,您的开关中没有案例,所以使用了默认值。我指定了在默认情况下要做什么。正如您所看到的,如果最终有 100 个静态文件,您必须为每个文件指定一个案例。请注意,上面的示例仅适用于 jpg 图像。这将很难维护,不推荐,因为它(可能)会将您的静态数据与网站的逻辑混合在一起。
实现你想要的最简单的方法是使用express模块,它已经具有这个功能,并且非常非常容易使用。
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/mystaticcontent'));
app.use('/hiddenfolder', express.static(__dirname+'/mystaticcontent/'));
app.listen(8008);
对于第一个 app.use(express.static(__dirname + '/mystaticcontent'));
如果您将 image.jpg 放入此文件夹中,则可以使用以下 url 访问它:http://localhost:8008/image.jpg
这里app.use('/hiddenfolder',express.static(__dirname+'/mystaticcontent/'));
你隐藏了文件夹的真实名称,图像可以在http://localhost:8008/hiddenfolder/image.jpg
如果您不想使用express,也许您应该看看 https://www.npmjs.com/package/serve-static 以获得有关如何编写自己的静态模块的灵感。
希望对你有帮助!
关于html - 如何在普通 NodeJS 中提供静态文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52908212/
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 5 年前。 Improve
在 C# 静态方法中是否有一种方法可以引用定义该方法的类型? 在实例方法中,您可以通过以下方式确定类型: public void Foo() { Type type = this.GetTyp
WPF:静态、动态资源以及资源词典 静态资源与动态资源 我们常常会使用样式或者控件模板放在Window.Resources中,比如这样: 静态资源与动态资源使用如下: <Window
任何人都知道如何在共享/静态函数中动态加载控件?该函数本身位于 mustinherit/abstract 类中。 (这是 VB 中的 ASP.NET 项目)我想做这样的事情: VB: Publ
在我看来,静态/强类型编程语言最宝贵的一点是它有助于重构:如果/当您更改任何 API,那么编译器会告诉您该更改破坏了什么。 我可以想象用运行时/弱类型语言编写代码......但我无法想象没有编译器的帮
正如我的名字所暗示的,我是一名 .NET 开发人员,但我对 Java 的兴趣越来越大,并且我有兴趣学习更多其他语言,因为这有助于我学习更多关于编程的知识。 无论如何,我的问题是:不带参数/不使用状态的
我在java中使用WireMock来 stub POST请求。该请求返回一个存储在我本地的 json 正文文件。 stub 看起来像这样: wireMockServer.stubFor(get(url
Python 是否有类构造函数的机制,即每当首次引用类时(而不是创建该对象的实例时)调用的函数?我知道其他一些语言中也存在这种情况,但我还没有在 Python 中遇到过。 基本上,我想初始化该函数中的
Python 是否有类构造函数的机制,即每当首次引用类时(而不是创建该对象的实例时)调用的函数?我知道其他一些语言中也存在这种情况,但我还没有在 Python 中遇到过。 基本上,我想初始化该函数中的
这个问题已经有答案了: What is the difference between dynamic and static polymorphism in Java? (14 个回答) 已关闭 4 年
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: Static initializer in Java 我想知道这个静态的东西(抱歉,这是我第一次遇到这个)对一个类有
如果c++应用程序是按以下方式组织的 //file1.cpp static Y sgObj = X::getInitObject(0); //declared in file scope //fil
我有一个抽象类(AvergedDataRecord),我需要进一步抽象(DataRecord),这样我就可以将它扩展到原始类和一个新的具体类(SummedDataRecord),并且我在获取某些方法时
我正在尝试制作一个字符串枚举。这是我到目前为止所得到的, private class TypedEnum : IEnumerable { public IEnumerator GetEnume
我选修了一门名为“安全代码”的类(class),在下一个作业中,我们应该对一些 C 文件和 JavaEE Web 项目进行静态/动态分析。 我检查了“源监视器”并在 C 文件上运行它,但是(除非我不知
我有两个类,一个是登录类,一个是用户类。在 loggedIn 类中,我想显示我在用户登录时所做的共享首选项。 loginPrefs = getSharedPreferences("loginprefe
我在同一个 Activity 中有两个静态 fragment ,在“fragmentA”中我有一个自定义列表,当一个项目被点击时必须在“fragmentB”中出现一个细节,细节只在我改变屏幕方向时出现
在 Java 中是未修改方法变量,缺少final,每次都重新初始化限定符 静态方法 实例方法 如果 1. 或 2.(或两者)的答案是 final 限定符允许 Java 执行优化并存储方法变量只有一次?
我有两个类相互交互。第一个是中心的,如下: public class Datenbank { double winkelPanel = 0; double groessePanel = 0; doub
我有一个 mysql 数据库,它连接基于 Web 的 php 应用程序和 FoxPro 应用程序(是的,foxpro)。在之前的“开发人员”被解雇后开始处理这个问题。 无论如何,我熟悉 AES_Enc
我是一名优秀的程序员,十分优秀!