Node.js 在NodeJS和express中使用相对路径_Node.js_Express

Node.js 在NodeJS和express中使用相对路径

node.js express

Node.js 在NodeJS和express中使用相对路径,node.js,express,Node.js,Express,我目前正在尝试弄清楚nodejs和express 目前，我在本地机器上运行了一个小样本项目访问/登录时，我希望重定向到login.html文件 app.get('/login', (req, res) => { res.sendFile(path.join(__dirname, '/login/login.html')); }) 这工作做得很好我把css直接放在标题中，现在我想从html站点本身访问一个共享文件夹文件结构： - project +--- node_m

我目前正在尝试弄清楚nodejs和express

目前，我在本地机器上运行了一个小样本项目

访问/登录时，我希望重定向到login.html文件

app.get('/login', (req, res) => {
    res.sendFile(path.join(__dirname, '/login/login.html'));
})

这工作做得很好

我把css直接放在标题中，现在我想从html站点本身访问一个共享文件夹

文件结构：

- project
    +--- node_modules
    +--- package.json
    +--- index.js
    +--- shared/
       +--- css/
          +--- style.css
       +--- images/
    +--- login/
       +--- login.js
       +--- login.html

const express = require('express');
var path = require('path');
const cors = require('cors');

const port = process.env.PORT || 3000;

const app = express();

app.use(cors());
app.use('/static', express.static(path.join(__dirname + './static')));

app.get('/', async (req, res) => {
    res.send('hello world!');
})

app.get('/login', (req, res) => {
    res.sendFile(path.join(__dirname, '/login/login.html'));
})

app.listen(port, () => {
    console.log('listening on http://localhost:' + port);
})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login Form</title>
        <link rel="stylesheet" href="shared/css/style.css">
    </head>
    <body>
        <div class="login-form">
            <h1>Login Form</h1>
            <form action="auth" method="POST">
                <input autocomplete="off" type="text" name="username" placeholder="Username" required>
                <input autocomplete="off" type="password" name="password" placeholder="Password" required>
                <input type="submit">
            </form>
        </div>
    </body>
</html>

我在express docs中找到了以下解决方案：它是——至少是我认为的——我所需要的

目前我只使用index.js和login.js

如何实际使用提供的静态文件？我应该在index.js中提供它们吗

index.js:

- project
    +--- node_modules
    +--- package.json
    +--- index.js
    +--- shared/
       +--- css/
          +--- style.css
       +--- images/
    +--- login/
       +--- login.js
       +--- login.html

const express = require('express');
var path = require('path');
const cors = require('cors');

const port = process.env.PORT || 3000;

const app = express();

app.use(cors());
app.use('/static', express.static(path.join(__dirname + './static')));

app.get('/', async (req, res) => {
    res.send('hello world!');
})

app.get('/login', (req, res) => {
    res.sendFile(path.join(__dirname, '/login/login.html'));
})

app.listen(port, () => {
    console.log('listening on http://localhost:' + port);
})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login Form</title>
        <link rel="stylesheet" href="shared/css/style.css">
    </head>
    <body>
        <div class="login-form">
            <h1>Login Form</h1>
            <form action="auth" method="POST">
                <input autocomplete="off" type="text" name="username" placeholder="Username" required>
                <input autocomplete="off" type="password" name="password" placeholder="Password" required>
                <input type="submit">
            </form>
        </div>
    </body>
</html>

login.html:

- project
    +--- node_modules
    +--- package.json
    +--- index.js
    +--- shared/
       +--- css/
          +--- style.css
       +--- images/
    +--- login/
       +--- login.js
       +--- login.html

const express = require('express');
var path = require('path');
const cors = require('cors');

const port = process.env.PORT || 3000;

const app = express();

app.use(cors());
app.use('/static', express.static(path.join(__dirname + './static')));

app.get('/', async (req, res) => {
    res.send('hello world!');
})

app.get('/login', (req, res) => {
    res.sendFile(path.join(__dirname, '/login/login.html'));
})

app.listen(port, () => {
    console.log('listening on http://localhost:' + port);
})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login Form</title>
        <link rel="stylesheet" href="shared/css/style.css">
    </head>
    <body>
        <div class="login-form">
            <h1>Login Form</h1>
            <form action="auth" method="POST">
                <input autocomplete="off" type="text" name="username" placeholder="Username" required>
                <input autocomplete="off" type="password" name="password" placeholder="Password" required>
                <input type="submit">
            </form>
        </div>
    </body>
</html>


登录表单
登录表单

您需要将静态路径更改为并允许express提供静态文件

//here login is the folder name which contain index.html file so you need to define that path
var public = path.join(__dirname, 'login');

app.use(express.static(public));

app.get('/login', function(req, res) {
    res.sendFile(path.join(public, 'index.html'));
});

非常感谢你！我对其进行了修改，并将其直接放入应用程序的index.js中，以便在任何地方提供公共文件（用于测试）