javascript - 如何正确引用 node.js/express 中的 JS 和 CSS 文件
问题描述
我有一个 java 脚本文件和我试图包含的样式表,以便能够使用我制作的密码网站。
我的文件路径是
website/
(包含 app.js/html 文件和包 json)
website/public/css
(包含 css 文件)
website/public/scripts
(包含我的 javascript 文件)
静态查看它们时,一切都按预期工作。JS 有效,CSS 有效。
但是,当使用 node.js 动态运行它时,它们不起作用,但是我似乎添加了正确的语法来添加它们。
app.get('/public/scripts/script.js',function(req,res){
res.sendfile(path.join(__dirname+'/public/scripts/script.js'));
});
app.get('/public/css/styles.css',function(req,res){
res.sendfile(path.join(__dirname+'/public/css/style.css'));
});
我的 HTML 文件中的链接标签
<link rel="stylesheet" type="text/css" href="css/styles.css">
我对 node.js 和 express 非常陌生,希望能帮助我找出问题所在。
以下所有相关文件
app.js 文件
const express = require('express');
const app = express();
var fs = require('fs');
var path = require('path');
app.listen(8080), () => console.log('listening on port 8080');
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname + '/index.html'));
});
app.get('/index.html', (req, res) => {
res.sendFile(path.join(__dirname + '/index.html'));
})
app.get('/about.html', (req, res) => {
res.sendFile(path.join(__dirname + '/about.html'));
})
app.get('/public/scripts/script.js',function(req,res){
res.sendfile(path.join(__dirname+'/public/scripts/script.js'));
});
app.get('/public/css/styles.css',function(req,res){
res.sendfile(path.join(__dirname+'/public/css/style.css'));
});
app.get('/cyphers.html', (req, res) => {
res.sendFile(path.join(__dirname + '/cyphers.html'));
})
app.get('/api/courses', (req, res) => {
res.send([1, 2, 3]);
})
HTML
<head>
<title> 40285570 Cyphers </title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script type="text/javascript" src="public/morseCode.js"></script>
<script type="text/javascript" src="public/atbash.js"></script>
<script type="text/javascript" src="public/caesarCipher.js"></script>
<script type="text/javascript" src="public/scripts/rot13.js"></script>
</head>
我的脚本文件
function generateRot13()
{
var alphabet = "abcdefghhijklmnopqrstuvwxyzabcdefghhijkl";
var rot13Input = document.getElementById("message").value
var rot13Output = "";
for(a = 0; a <= rot13Input.length; a++)
{
var rot13Character = rot13Input.charAt(a);
for(b = 0; b <= 26; b++)
{
if(rot13Character == alphabet[b])
{
rot13Output += alphabet[b + 13]
break;
}
}
document.getElementById("generatedMessage").value = rot13Output;
}
};
function generateMorseCode()
{
var text = "abcdefghijklmnopqrstuvwxyz1234567890.,?!/()&:;,=+-_$@ "
alphabet = new Array(
".-","-...","-.-.","-..",".","..-.","--.","....","..",".---",
"-.-",".-..","--","-.","---",".--.","--.-",".-.","...","-","..-",
"...-",".--","-..-","-.--","--..",".----","..---","...--","....-",
".....","-....","--...","---..","----.","-----",".-.-.-","--..--",
"..--..",".----.","-.-.--","-..-.","-.--.","-.--.-",".-...",
"---...","-.-.-.","-...-",".-.-.","-....-","..--.-","...-..-",
".--.-."," "
);
var userInput = document.getElementById("message").value;
var generatedMessage = "";
userInput.split("");
for(i = 0;i <= userInput.length; i++)
{
currentCharacter = userInput.charAt(i).toLowerCase();
for(x = 0; x <= text.length; x++)
{
if(currentCharacter == text.charAt(x))
{
generatedMessage += alphabet[x] + " | ";
break;
}
}
}
document.getElementById("generatedMessage").value = generatedMessage;
document.getElementById("message").value = "";
};
function generateCaesarCypher()
{
`var caesarAlphabet = "abcdefghhijklmnopqrstuvwxyzabcdefghhijklmnopqrstuvwxyzabcdefghhijklmnopqrstuvwxyzabcdefghhijklmnopqrstuvwxy`zabcdefghhijklmnopqrstuvwxyz";
var caesarKey = document.getElementById("caesarKey").value;
var caesarInput = document.getElementById("message").value;
var caesarOutput = "";
var integer = parseInt(caesarKey);
for(a = 0; a <= caesarInput.length; a++)
{
var caesarCharacter = caesarInput.charAt(a);
for(b = 0; b <= 26; b++)
{
if(caesarCharacter == caesarAlphabet[b])
{
caesarOutput += caesarAlphabet[b + integer];
break;
}
}
document.getElementById("generatedMessage").value = caesarOutput;
}
}
function generateAtbash()
{
var atBashInput = document.getElementById("message").value;
var backwardsAbc = "zyxwvutsrqponmlkjihgfedcba";
var forwardsAbc = "abcdefghijklmnopqrstuvwxyz";
var generatedAtbash = "";
backwardsAbc.split("");
atBashInput.split("");
for(a = 0; a <= atBashInput.length; a++)
{
var atBashCharacter = atBashInput.charAt(a);
for(b = 0; b <= backwardsAbc.length; b++)
{
if(atBashCharacter == forwardsAbc[b])
{
generatedAtbash += backwardsAbc[b];
break;
}
}
document.getElementById("generatedMessage").value = generatedAtbash;
}
};
解决方案
您可以利用它express static
来更好地处理您想要实现的目标。
示例文件夹结构
server.js
public
image
sample.jpg
js
some.js
css
pages
index.html
about.html
您可以从以下文件夹中服务器静态文件public
:
app.use('/public', express.static(path.join(__dirname, 'public')))
在您的 html 中,您可以链接其他资源,例如:
// js
<script type="text/javascript" src="/public/js/some.js"></script>
// image
src="/public/image/sample.jpg"
推荐阅读
- security - 谷歌将我的密码保存到我使用 gmail 注册的其他网站是否正常?
- group-by - ABAP 字符串模板 - 带有 GROUP BY 的嵌入式表达式
- axon - 轴突事件处理超时
- c# - 如何使用 linq 从具有最新 dateTime 的集合中获取整个记录?
- android - Android Flutter 中的麦克风定时器
- amazon-web-services - 我想是否有办法使用 aws acm list-certificates 以及有效性和域名来查找所有 ACM 证书
- json - 如何在使用 Elasticsearch Nest 客户端和 Utf8Json 序列化程序时捕获与任何 POCO 属性不匹配的剩余 JSON 数据
- sql - SQL 查询的问题。选择具有 max() 列的行
- django - Django AuthenticationForm 是否使用 is_valid() 进行身份验证?
- php - Laravel如何查询数据透视表?