分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Node js Express 应用程序 - 使用多个子路径/参数路径进行路由时 css 中断，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

开发过程中遇到Node js Express 应用程序 - 使用多个子路径/参数路径进行路由时 css 中断的问题如何解决？下面主要结合日常开发的经验，给出你关于Node js Express 应用程序 - 使用多个子路径/参数路径进行路由时 css 中断的解决方法建议，希望对你解决Node js Express 应用程序 - 使用多个子路径/参数路径进行路由时 css 中断有所启发或帮助；

因此，如果我尝试加载一个页面，例如 /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 = @R_607_10613@ire('express')
const routes = @R_607_10613@ire('./routes/route')
const appPort = process.env.PORT
const app = express()

//.env
@R_607_10613@ire('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_patIEnt_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">

像这样：

<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'))