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

问题描述 投票：-3回答：1

我有一个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;

    }
};
javascript html css node.js express
1个回答
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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.