个人中心
gpt4 book ai didi

javascript - 如何在 Node js 服务器上加载 bootstrap 的本地副本？

转载 作者：行者123 更新时间：2023-12-02 17:44:22 25 4
gpt4 key购买 nike

但是我的表单使用 Bootstrap ；它无法加载 Bootstrap 。起初我认为这可能是因为一旦到达客户端，它就会请求 bootstrap.css。以下代码不起作用:

HTML:

<!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.0">
        <meta name="description" content="content">
        <meta name="author" content="My name">
        <title>title here</title>
        <link rel="icon" href="">

        <!-- Bootstrap CSS core -->
        <link rel="stylesheet" href="bootstrap.css" media="screen">
    </head>

...

JS:

/*
* Import modules
* Declare variables
*/
var express = require('express');
var fs = require('fs');
var app = express();

var port = 8080;

/*
* Read files on disc
*/

var homePage = fs.readFileSync("main.html");
var form = fs.readFileSync("form.html");

//Quick, hacky solution. Eventually, replace with if statements and dynamically load local copies or reference to an online source. Would that be elegant?
var bootstrap_css = fs.readFileSync("bootstrap.css");
var bootstrap_js = fs.readFileSync("bootstrap.js");
var jquery = fs.readFileSync("jquery-1.10.2.js");

/*
* Configurations
*/
app.use(express.bodyParser()); //Add body-parser middleware

app.configure('development', function(){
    console.log("executing");
    app.get("/bootstrap.css", function(req, res){
        res.end(bootstrap.css);
    });
});


/*
* Routing
*/

app.post("/contact-request", function(req, res){
    console.log(req.body);
    res.end("Thank you " + req.body.name + "!");
});

app.get("/form", function(req, res){
    res.end(form);
});

app.get("/", function(req, res){
    res.end(homePage);
});

app.get("*", function(req, res){
    res.end("Error");
});


/*
* Begin Listening
*/
app.listen(port, function(){
    console.log("Listening: " + port);
});

非常感谢您的帮助!我很清楚这是一种糟糕的做法。请逗我一下。我也希望能解释一下内部发生的事情。

[编辑]我将所有内容都放在一个目录中。 Boostrap 称为 bootstrap.css。我尝试了 ./和/引用的变体，但没有成功。我认为这应该可行，因为在形式中您只需使用/doSomething。

最佳答案

您应该使用express.static()配置为显示某个目录中的静态文件的中间件。 

/*
* Import modules
* Declare variables
*/
var express = require('express');
var resolve = require('path').resolve;
var app = express();
var port = 8080;

/*
* Configurations
*/
// @todo Read http://andrewkelley.me/post/do-not-use-bodyparser-with-express-js.html
// use these instead
// app.use(express.json());
// app.use(express.urlencoded());
app.use(express.bodyParser());

/**
* Configure directories
*/
app.use(express.static(__dirname))

// /form returns form.html
app.use('/form', function(req, res, next){
    // dirname equals current path to this file + file you wish to send for requests
    res.sendfile(resolve(__dirname, 'form.html'));
});

// / returns main.html
app.use(function(req, res, next){
    // dirname equals current path to this file + file you wish to send for requests
    res.sendfile(resolve(__dirname, 'main.html'));
});

// etc

app.listen(port, function(){
    console.log("Listening: " + port);
});

关于javascript - 如何在 Node js 服务器上加载 bootstrap 的本地副本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21891502/

25 4 0
文章推荐： python - 图像python opencv中的圆形轮廓检测
文章推荐： java - Jena:如何添加带有数值的属性？
文章推荐： python - 使用 OpenCV 和 Python 从图像中识别和裁剪文本的问题
文章推荐： titan - titan 1.0.0 中的 gremlin 并未在 Windows 上开箱即用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com