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

Question

因此，如果我尝试加载一个页面，例如/patient_profile，css 会正确加载，当我继续/patient_profile/settings_patient_profile 的路径时，css 就会中断，我上面提到的两个页面都是同一个文件，我只是尝试过测试路由看它是否有效。

路线是这样管理的：

route('/patient_profile/:id')

route('/patient_profile/settings_patient_profile/:id')

我确实登陆了所需的页面，只有设计元素不起作用。

我在这里的另一个主题中读到，在我的情况下使用 express 设置静态路由到 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 等相关的编程。

我在settings_patient_profile.ejs 中的css 推荐：

<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">

Answer 1

为了让您的 CSS 文件可靠地工作，无论父页面的路径是什么，您都需要对 CSS 链接使用绝对 URL，而不是相对链接。所以，链接以/ 开头，而不是../。

您没有准确显示目标 CSS 文件在您的服务器文件系统中的位置，但我猜您需要更改此设置：

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

到这样的事情：

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

然后，使用一个 express.static() 中间件，为 assets 层次结构中的所有内容提供服务：

app.use('/assets', express.static(__dirname + '/assets/src'));

此特定建议基于您的文件系统视图，该视图显示所有资产都位于服务器磁盘上的/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'))