如何在 node-express 項目中包含引導程序

Question

以下代碼來自代碼作者。 基本上它是一個我想連接到后端的 bootstrap/css 項目。 但是，我找不到使用以下代碼呈現引導程序的方法：

文件形式：

文件名
- 節點模塊
- 路線
  - 公共.js
- 意見
  - 公共資產
    - css
    - js
    - 圖像
  - 公共.ejs
- 應用程序.js

應用程序.js

const express = require('express');
const app = express();
const port=4000;
const publicRouter = require('./routes/public');
const path = require('path');

app.listen(port,()=>{
    console.log(`listening to port ${port}`);
});


app.set('view engine','ejs');
app.use(express.static(path.join(__dirname, 'views')));


    


app.use('/',publicRouter);

公共.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSite Title</title>
    <link rel="stylesheet" href="publicAssets/css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>


    <div class="wrapper">
       

        <header>
        
        
            <div class="top-bar">

                <div class="row">
                    
                    <div class="col-md-8 col-lg-9 d-flex breaking-news-bar">
                        <div class="breaking-title"><h6>Trending</h6></div>
                        <div class="owl-carousel owl-theme owl-loaded breaking">
                            <div class="owl-stage-outer">
                                <div class="owl-stage">
                                    <div class="owl-item b-news-item"><a href="#">01.Lorem ipsum dolor sit amet.</a></div>
                                    <div class="owl-item b-news-item"><a href="#">02.Lorem ipsum dolor sit amet.</a></div>
                                    <div class="owl-item b-news-item"><a href="#">03.Lorem ipsum dolor sit amet.</a></div>
                                    <div class="owl-item b-news-item"><a href="#">03.Lorem ipsum dolor sit amet.</a></div>

                                </div>
                            </div>
                            <div class="owl-nav">
                                <div class="owl-prev">
                                    <i class="fas fa-angle-left"></i>
                                </div>
                                <div class="owl-next">
                                        <i class="fas fa-angle-right"></i>
                                    </div>
                            </div>
                            <!-- End breaking news -->
                        </div>
                    </div>

                    <div class="col-md-4 col-lg-3">

                    </div>

                </div>

            </div>
       
       


        </header>
    </div>


    <script src="publicAssets/js/bootstrap.min.js"></script>
    <script src="publicAssets/js/jquery-3.5.1.min.js"></script>
    <script src="publicAssets/js/custom.js"></script>
    <script src="publicAssets/js/owl.carousel.min.js"></script>
</body>
</html>

CSS工作正常，但我不能使用引導程序

Answer 1

有幾種方法可以包含 Bootstrap，但所有這些都歸結為public.ejs的<head>元素中缺少的樣式表。

此外，當您包含腳本時， jquery-3.5.1.min.js應該放在bootstrap.min.js前面，因為 Bootstrap 4 依賴於 jQuery。

方法 1. 手動下載並包含所有資產

這似乎是您的教程試圖做的。

檢查所有資產是否到位。 如果不是，請重新下載。 您的publicAssets文件夾應至少包含：

公共資產
- css
  - 樣式.css
  - bootstrap.min.css
- js
  - bootstrap.min.js
  - jquery-3.5.1.min.js

添加樣式表：

<head>
  ...
  <link rel="stylesheet" href="publicAssets/js/bootstrap.min.css"></link>
  ...
</head>

更改腳本順序：

  ...
  <script src="publicAssets/js/jquery-3.5.1.min.js"></script>
  <script src="publicAssets/js/bootstrap.min.js"></script>
  ...
</body>

您可能還應該下載 font-awesome 作為本地資產，並在完成開發后使用 Webpack 或 Browserify 之類的捆綁程序。

方法 2. 將其作為節點模塊包含在內

在命令行類型中：

npm i bootstrap@latest jquery@latest

添加樣式表

<head>
  ...
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"></link>
  ...
</head>

將腳本更改為：

  ... 
  <script src="node_modules/node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  ...
</body>

請記住，這種方法幾乎需要使用某種捆綁器，但您可能還是想這樣做。

方法 3. 包含所有資產作為 CDN 的鏈接

完全跳過下載資產並使用他們的網絡托管版本：

<head>
  ...
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  ...
</head>
<body>
  ... 
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  ...
</body>

Answer 2

通過ruing包括bootstrap和j Query
npm install bootstrap@latest jquery@latest
或者
npm i bootstrap@latest jquery@latest

現在檢查您的靜態中間件路徑
如果app.use(express.static(__dirname))表示您在主目錄中

通過給出簡單的路徑來包括
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css"/>

<script src="./node_modules/node_modules/jquery/dist/jquery.min.js"></script>

<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

如果您的路徑在某個文件夾中，例如 if app.use(express.static(__dirname, "some folder" ))這意味着您在主目錄中

通過給出簡單的路徑來包括
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>

<script src="../node_modules/node_modules/jquery/dist/jquery.min.js"></script>

<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

Note:確保您的服務器文件或應用程序文件在主目錄中

Answer 3

只需在 head 標簽中包含 css bootstrap cdn： <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head>

Answer 4

如果您使用 Express，您可以先將以下內容添加到您的app.js

app.use(express.static(path.join(__dirname, "node_modules/bootstrap/dist/")));

感謝express.static() ，這是 Express 中用於提供靜態文件的內置中間件函數，您現在可以通過將 Bootstrap 鏈接到它來在 HTML 頁面中使用它

<link rel="stylesheet" href="./css/bootstrap.min.css">

如何在 node-express 項目中包含引導程序

問題描述

4 個解決方案

解決方案1
2 2020-10-18 09:42:48

解決方案2
1 2021-11-26 12:39:19

解決方案3
0 2020-10-18 02:51:06

解決方案4
0 2022-05-22 05:35:01

如何在 node-express 項目中包含引導程序

問題描述

4 個解決方案

解決方案1 2 2020-10-18 09:42:48

解決方案2 1 2021-11-26 12:39:19

解決方案3 0 2020-10-18 02:51:06

解決方案4 0 2022-05-22 05:35:01

解決方案1
2 2020-10-18 09:42:48

解決方案2
1 2021-11-26 12:39:19

解決方案3
0 2020-10-18 02:51:06

解決方案4
0 2022-05-22 05:35:01