Javascript 如何正确引用node.JS/express中的JS和CSS文件_Javascript_Html_Css_Node.js_Express

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

javascript html css node.js express

Javascript 如何正确引用node.JS/express中的JS和CSS文件,javascript,html,css,node.js,express,Javascript,Html,Css,Node.js,Express,我有一个java脚本文件和我的样式表，我正试图包括，以便能够使用我制作的cypher网站我的文件路径是网站/（包含app.js/html文件和包json）网站/public/css（包含css文件）网站/public/scripts（包含我的javascript文件）静态查看它们时，一切都按预期进行。JS工作，CSS工作但是，当使用node.js动态运行时，它们不起作用，但是我似乎添加了正确的语法来添加它们 app.get('/public/scripts/script.js',fu

我有一个java脚本文件和我的样式表，我正试图包括，以便能够使用我制作的cypher网站

我的文件路径是

网站/

（包含app.js/html文件和包json）

网站/public/css

（包含css文件）

网站/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文件中的链接标记

我对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]);
})

    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;

    }
};

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>


40285570密码

我的脚本文件

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]);
})

    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;

    }
};

函数生成器13（）
{
var alphabet=“abcdefghhijklmnopqrstuvxyzabcdefghhijkl”；
var rot13Input=document.getElementById（“消息”）.value
var rot13Output=“”；
对于（a=0；a您可以使用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"

//js
//形象
src=“/public/image/sample.jpg”

再看一看
我想静态文件夹就是你要找的