Question

您好我正在研究节点js，同时我正面临这个问题。

app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

/*This route is working fine */
app.get("/:username", function (req, res) {

res.sendFile(__dirname + "/public/ui/" + "user.html");
});

/*This route is not working */
app.get("/:username/:id", function (req, res) {
 res.sendFile(__dirname + "/public/ui/" + "user.html");
});

我的文件夹结构

-server
  -public
    -ui 
        -ext (external files folder)
        - images(all images folder)
        -js (My js files folder)
        -style (my css folder)
        -user.html 
-index.js
-user.js

当我尝试加载网址http://localhost:8888/stranger/19时，我的网页正在加载，但没有加载user.html中指定的文件。我的css文件的网址似乎是http://localhost:8888/stranger/ui/style/main.css而不是http://localhost:8888/ui/style/main.css。

通过ui加载的所有文件都会发生这种情况。（“http://localhost:8888/stranger”这是“http://localhost:8888”而不是“image”。我该如何解决这个问题

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="ui/style/main.css" >

    <script src="ui/ext/jquery/jquery.min.js" ></script>   
    <script src="ui/ext/bootstrap-3.3.4/js/bootstrap.min.js" i></script>
    <script src="ui/ext/moment.js" i></script>
    <script src="ui/js/main.js" ></script>
    <script src="ui/js/web.js" ></script>
    <script src="ui/js/user_module.js" ></script>
    <script src="ui/js/chat_module.js" ></script>

</head>
<body class="pz-main"> 
</body></html>

Answer 1

将route添加到static文件到public directory

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

Here is the documentation on using the public folder

然后在你的html中将路径视为，

<link rel="stylesheet" type="text/css" href="/ui/style/main.css">

以下是工作代码：

app.js或server.js，其中express已定义

var express = require('express');
var app = express();

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

app.get("/:username", function (req, res) {
    res.sendFile(__dirname + "/public/ui/" + "user.html");
});

app.get("/:username/:id", function (req, res) {
    res.sendFile(__dirname + "/public/ui/" + "user.html");
});

var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port
})

您的user.html位于public/ui direcrtory。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/ui/style/main.css">
  </head>
  <body>
    Page will be in green color due to css
  </body>
</html>

css public/ui/style目录中的body{ background: green; }。

<form action="lienhe" method="POST" role="lienhe">
    <input type="hidden" name="_token" value="{{csrf_token()}}"/>
    <div class="form-group">
    <label>Tên bạn</label>
    <textarea style="height: 28px" name="name_lienhe" autofocus></textarea>
    </div>
    <div class="form-group">
    <label>Nội dung liên hệ / phản hồi </label>
     <textarea style="height: 192px" name="noidung_lienhe"></textarea>
    </div>
</form>

请按照以下步骤进行操作。

Answer 2

问题在于href属性。

link标记中您当前的href属性为：

<link rel="stylesheet" href="ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >

这意味着将当前网址用作base url。将其更改为以下内容：

<link rel="stylesheet" href="/ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >

只需在开头添加/即可解决问题。

添加多个占位符时，快速路由无法正常工作

2 个答案: