Question

我有一个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的新手，我很乐意表达自己的想法，并希望能帮助您找出问题所在。

下面的所有相关文件

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;

    }
};

Answer 1

您可以利用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"

还可以看看template engines

如何在node.js / express中正确引用JS和CSS文件

1 个答案: