个人中心
gpt4 book ai didi

javascript - 无法使用node js服务器访问html内容，

转载 作者：太空宇宙 更新时间：2023-11-04 00:49:28 25 4
gpt4 key购买 nike

我制作了一个 html 网页，其中附加了 .css、图像和 javescript 文件。但是，当我使用以下命令运行 Node 服务器时:

app.get('/', 函数(req, res){
res.sendFile(__dirname + '/index.html');
});

它确实在本地主机上打开我的网页，但出现错误，指出找不到附加文件，例如样式表图像和脚本。如果我只是运行我的index.html 页面，它就可以正常工作。错误在哪里？

我所做的是分别运行我的index.html和server.js，它确实有效。但每当我尝试通过 Node 服务器发布index.html页面时，它都不起作用。

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var fs = require('fs');

server.listen(8080, function() {
  console.log("wagwan")
});


app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});


io.on('connection', function(socket) {
  socket.on('turnon', function(data) {
    console.log(data.turnon);

    //serialPort.write("on");

  });

  socket.on('turnoff', function(data) {
    console.log(data.turnoff);
    // serialPort.write("off");
  });
});
        .background {

          background-repeat: no-repeat;

          /* custom background-position */

          background-position: 50% 50%;

          /* ie8- graceful degradation */

          background-position: 50% 50%\9 !important;

        }

        /* fullscreen setup */

        html,

        body {

          /* give this to all tags from html to .fullscreen */

          height: 100%;

        }

        .fullscreen,

        .content-a {

          width: 100%;

          min-height: 100%;

        }

        .not-fullscreen,

        .not-fullscreen .content-a,

        .fullscreen.not-overflow,

        .fullscreen.not-overflow .content-a {

          height: 100%;

          overflow: hidden;

        }

        /* content centering styles */

        .content-a {

          display: table;

        }

        .content-b {

          display: table-cell;

          position: relative;

          vertical-align: middle;

          text-align: center;

          color: #2d2bde;

          font-size: 35px;

          font-family: 'Arial Rounded MT';

        }

        /* visual styles */

        body {

          margin: 0;

          font-family: sans-serif;

          font-size: 28px;

          line-height: 100px;

          color: #ffffff;

          text-align: center;

        }

        section {

          background: #9ed100;

        }

        .not-fullscreen {

          height: 50%;

        }

        button,

        .button,

        input[type="reset"],

        input[type="submit"],

        input[type="button"] {

          background: none;

          background-color: #199cd8;

          background-clip: border-box;

          border: 1px solid transparent;

          border-radius: 4px;

          color: #fff;

          outline: none;

          font-size: 12px;

          font-weight: 400;

          letter-spacing: 1px;

          padding: 0 20px;

          text-transform: uppercase;

          line-height: 40px;

          display: inline-block;

          zoom: 1;

          *display: inline;

          box-shadow: none;

          text-shadow: none;

        }

        .top {

          background-color: #199cd8;

          height: 68px;

          padding-top: 20px;

          line-height: 50px;

          overflow: hidden;

        }

        .banner {

          padding: 1px 16px;

        }

        .w3-wide {

          font-family: "Segoe UI", Arial, sans-serif !important;

          letter-spacing: 4px;

        }

        .w3-right {

          float: right !important;

        }

        .sitelogo {

          margin: 0;

          margin-right: 20px;

          width: 60px;

          height: 60px;

          border: none;

        }
<!DOCTYPE HTML>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <meta charset="utf-8">
  <meta name="description" content="Web to serial Arduino">
  <title>Web to serial Arduino</title>

  <script src="socket.io/node_modules/socket.io-client/socket.io.js"></script>

  <script>
    //var socket = io.connect('http://localhost:8080');
    var socket = io('http://localhost:8080', {
      'transports': ['websocket', 'polling']
    });
  </script>
</head>

<body>
  <div class="banner top">
    <a href="index.html">
      <img src="Drawing.png" alt="logo" class="sitelogo">
    </a>
    <div class="w3-right toptext w3-wide">An Arduino project for robotic Arm</div>
  </div>
  <div class="fullscreen background" style="background-image:url('http://cdns.nocamels.com/wp-content/uploads/2013/10/bigstock-Business-technologies-today-43292197.jpg');" data-img-width="1600" data-img-height="1064">
    <div class="content-a">
      <div class="content-b">
        <br>WELCOME TO Arduino "A simple function to test node.js"
        <br>
        <div class="button" onclick="socket.emit('turnon', { turnon:'on'});">
          Turn On
        </div> <span style="color: #ffffff;"><a class="button primary-button" onclick="socket.emit('turnoff', {turnoff:'off'});">Turn off</a>&nbsp;</span>
        <br>
        <div class="button" onclick="console.log('connected');">
          connect
        </div> <span style="color: #ffffff;"><a class="button primary-button" onclick="console.log('reset');">Reset</a>&nbsp;</span>
      </div>
    </div>
  </div>

</body>

</html>

最佳答案

您想要做的是提供“静态”文件。 Javascript、CSS 等称为静态文件。

您的路线:

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

正在发送您的index.html文件，但您的node.js服务器(express应用程序)没有为您的静态文件提供服务。

像这样:

app.use(express.static('public'));

或

app.use(express.static(__dirname + '/public'));

应该能解决你的问题。

“服务文件，例如图像、CSS、JavaScript 和其他静态文件是在 Express 中的内置中间件 -express.static 的帮助下完成的。

将要标记为静态 Assets 位置的目录名称传递给express.static中间件以直接开始提供文件服务。例如，如果您将图像、CSS 和 JavaScript 文件保存在名为 public 的目录中，则可以执行以下操作:"

http://expressjs.com/starter/static-files.html

此外，您似乎正在使用套接字。我建议您在进入套接字之前更好地学习express和node。简化您的代码，将其范围缩小到具体细节，并了解其工作原理。 Socket 很酷，但对于很多项目来说是不必要的。

关于javascript - 无法使用node js服务器访问html内容，，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33201595/

25 4 0
文章推荐： node.js - MongoDB 中的一对多关系
文章推荐： c++ - 将 int** 转换为 "pointer to a two-dimensional array of integers with fixed number of elements per column"
文章推荐： node.js - 当新代码推送到heroku时，faSTLy是否会自动清除？
文章推荐： python - 字典键和 eval 中的破折号
太空宇宙
个人简介

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

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