Node js Express app-使用多个子路径/参数路径进行路由时css中断

因此，如果我尝试加载一个页面，例如

/patient\u profile

css正确加载，那么当我继续路径到

/patient\u profile/settings\u patient\u profile

css刚刚断开，我上面提到的两个页面都是相同的文件，我只是尝试测试路由，看看它是否有效

路由的管理方式如下：

<link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css">

route（'/patient\u profile/：id'）

route（'/patient\u profile/settings\u patient\u profile/：id'）

我确实进入了想要的页面，只有设计元素不起作用

我在这里的另一个主题中读到，在我的情况下，使用express to

assets

设置静态路由应该可以解决问题，但事实并非如此，我可能不理解如何正确使用静态路径

此目录树：

.
├── docs
├── LICENSE
├── package.json
├── package-lock.json
├── README.md
├── src
│   │   ├── bootstrap
│   │   │   ├── css
│   │   │   │   └── bootstrap.min.css
│   │   │   └── js
│   │   │       └── bootstrap.min.js
│   │   ├── css
│   │   │   ├── FontAwesome.css
│   │   │   ├── font-awesome.min.css
│   │   │   ├── Footer-Basic-1.css
│   │   │   ├── Footer-Basic.css
│   │   │   ├── Login-Form-Clean.css
│   │   │   ├── Navigation-with-Button.css
│   │   │   ├── Registration-Form-with-Photo.css
│   │   │   └── style.css
│   │   ├── fonts
│   │   ├── img
│   │   │   ├── avatars
│   │   │   ├── dogs
│   │   └── js
│   │       ├── bs-init.js
│   │       ├── chart.min.js
│   │       ├── custom.js
│   │       ├── jquery.min.js
│   │       ├── smoothscroll.js
│   │       └── theme.js
│   ├── controllers
│   │   └── user_controller.js
│   ├── fonts
│   ├── img
│   ├── index.js
│   ├── js
│   ├── routes
│   │   ├── profile_route.js
│   │   └── route.js
│   └── views
│       ├── index.ejs
│       ├── partials
│       ├── patient_profile.ejs
│       ├── previous_appointments.ejs
├── test
│   └── array.spec.js
└── tree.txt

我忽略了一些文件，如字体和图片，以使树更可读

index.js

const express = require('express')
const routes = require('./routes/route')
const appPort = process.env.PORT
const app = express()

//.env
require('dotenv').config({
  path: path.join(__dirname, './.env')
})


//Setting up Handlebars
app.set('view engine', 'ejs')
app.set('views', __dirname + '/views')
app.use('/src', express.static(__dirname + '/src'))
app.use('/views', express.static(__dirname + '/views'))
app.use('/fonts', express.static(__dirname + '/fonts'))
app.use('/js', express.static(__dirname + '/js'))
app.use('/img', express.static(__dirname + '/img'))
app.use('/assets', express.static(__dirname + '/assets'))
app.use('/', routes)



//Creating a connection
app.listen(appPort, () => {
  console.log(`App is running. serve at port: ${appPort}`)
  console.log(`http://127.0.0.1:${appPort}`)
})

同样，与DB等相关的消毒编程

我的

css

在

settings\u patient\u profile.ejs中的转诊：

<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=BenchNine:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="../assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="../assets/fonts/fontawesome5-overrides.min.css">

为了让CSS文件可靠地工作，无论父页面的路径是什么，都需要为CSS链接使用绝对URL，而不是相对链接。因此，请使用
/
启动链接，而不是使用
。/

您无法准确显示目标CSS文件在服务器文件系统中的位置，但我猜您需要更改以下内容：

<link rel="stylesheet" href="../assets/fonts/fontawesome-all.min.css">

此特定建议基于文件系统视图，该视图显示所有资产都位于服务器磁盘上的
/assets/src
中

此外，只要您愿意在所有静态URL前面加上
/assets
，您就不需要所有这些，因为它们都可以由以前的
express.static（）
中间件处理：

app.use('/src', express.static(__dirname + '/src'))
app.use('/views', express.static(__dirname + '/views'))
app.use('/fonts', express.static(__dirname + '/fonts'))
app.use('/js', express.static(__dirname + '/js'))
app.use('/img', express.static(__dirname + '/img'))

看起来您正在使用相对路径。您是否尝试过使用绝对路径，例如href=“/assets/bootstrap/css/bootstrap.min.css”？@SebastianRichner谢谢！这就是问题所在！很抱歉，没有提供足够的信息，但您已经做到了，它解决了问题，谢谢！。编辑：刚刚看到你添加了更多有用的信息，再次感谢。
app.use('/src', express.static(__dirname + '/src'))
app.use('/views', express.static(__dirname + '/views'))
app.use('/fonts', express.static(__dirname + '/fonts'))
app.use('/js', express.static(__dirname + '/js'))
app.use('/img', express.static(__dirname + '/img'))