Nodejs 没有技术含量的低级问题,求扫盲

Nodejs 没有技术含量的低级问题,求扫盲

目录结构如下:

demo.js index.html public javascript jquery.js

没有用express,清爽node,server运行在127.0.0.1:3000

在index.html页面中,<script src="/public/javascripts/jquery.js"></script>,各种找不到jquery

Resource interpreted as Script but transferred with MIME type text/html: “http://localhost:3000/public/javascripts/jquery.js”.

url地址栏随便输,只要开头是http://127.0.0.1:3000,都跳到index页面上,这是神马情况…求扫盲


9 回复

Node.js 没有技术含量的低级问题,求扫盲

目录结构

demo.js
index.html
public/
    javascripts/
        jquery.js

环境设置

你的服务器运行在 127.0.0.1:3000，并且没有使用 Express 框架。我们来一步一步解决你遇到的问题。

问题一：jQuery 脚本找不到

在 index.html 文件中，你引用了 jQuery 脚本：

<script src="/public/javascripts/jquery.js"></script>

解决方案： 你需要确保 Node.js 服务器能够正确地提供静态文件。在 demo.js 中添加以下代码：

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
  const filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
  
  // 检查请求的文件是否存在
  fs.access(filePath, fs.constants.F_OK, (err) => {
    if (err) {
      // 如果文件不存在，返回404错误
      res.writeHead(404, { 'Content-Type': 'text/plain' });
      res.end('Not Found');
      return;
    }
    
    // 获取文件的MIME类型
    let contentType = 'text/plain';
    switch (path.extname(filePath)) {
      case '.html':
        contentType = 'text/html';
        break;
      case '.css':
        contentType = 'text/css';
        break;
      case '.js':
        contentType = 'application/javascript';
        break;
      case '.json':
        contentType = 'application/json';
        break;
      case '.png':
        contentType = 'image/png';
        break;
      case '.jpg':
        contentType = 'image/jpeg';
        break;
    }

    // 读取文件并发送给客户端
    fs.readFile(filePath, (err, data) => {
      if (err) {
        res.writeHead(500, { 'Content-Type': 'text/plain' });
        res.end('Internal Server Error');
        return;
      }
      
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(data);
    });
  });
});

server.listen(3000, () => {
  console.log('Server is running on http://127.0.0.1:3000');
});

这段代码会根据请求的路径来读取相应的文件，并设置正确的 MIME 类型。

问题二：所有 URL 都跳转到 index 页面

如果所有 URL 都跳转到 index.html 页面，这通常是因为你的服务器配置有问题。上面的代码已经解决了这个问题，因为现在它会根据请求的路径来提供相应的文件。如果你仍然遇到问题，请确保你的 index.html 文件在根目录下，并且路径正确。

总结

通过以上代码，你可以让 Node.js 服务器正确地提供静态文件，并且不会出现所有的 URL 都跳转到 index.html 的情况。希望这些信息对你有所帮助！


要么你自己写一个静态文件服务

静态文件服务器?类似于express中用use定义public下都是静态文件,这样的功能?详细说说呗~

对的。

我感觉不至于吧…nodejs原生的,连个外链js都请求不了?

就你贴出的代码 和 文件 结构 来看 ，你把 文件目录 javascript 写成了 javascripts

楼主不用纠结了。要么用express，要么用apache，nginx之类的处理静态文件就好了。 推荐后者

var mimeType = {
    '.js':'text/javascript',
    '.html':'text/html',
    '.css':'test/css'

}

 var headers = {
                    'Content-Type':mimeType[path.extname(f)] + ';charset:UTF-8'
                };

希望能给你思路。

根据你的描述，你遇到了两个主要问题：

  1. jQuery 文件加载失败：这通常是由于服务器配置不正确导致的。
  2. 所有请求都重定向到 index.html：这可能是由于路由配置问题。

问题1：jQuery 文件加载失败

这个问题可能是因为你的 Node.js 服务器没有正确地处理静态文件。你需要配置服务器以正确地提供静态文件（例如 public 目录下的文件）。

示例代码：

const http = require('http');
const fs = require('fs');
const path = require('path');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    if (req.url === '/') {
        // 请求根路径时返回 index.html
        fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
            if (err) {
                res.writeHead(500);
                res.end('Internal Server Error');
            } else {
                res.writeHead(200, { 'Content-Type': 'text/html' });
                res.end(data);
            }
        });
    } else {
        const filePath = path.join(__dirname, req.url.slice(1));
        const extname = String(path.extname(filePath)).toLowerCase();
        const mimeTypes = {
            '.html': 'text/html',
            '.js': 'text/javascript',
            '.css': 'text/css',
            '.json': 'application/json',
            '.png': 'image/png',
            '.jpg': 'image/jpg',
            '.gif': 'image/gif',
            '.svg': 'image/svg+xml',
            '.wav': 'audio/wav',
            '.mp4': 'video/mp4',
            '.woff': 'application/font-woff',
            '.ttf': 'application/font-ttf',
            '.eot': 'application/vnd.ms-fontobject',
            '.otf': 'application/font-otf',
            '.wasm': 'application/wasm'
        };

        const contentType = mimeTypes[extname] || 'application/octet-stream';

        fs.readFile(filePath, (err, data) => {
            if (err) {
                res.writeHead(404, { 'Content-Type': 'text/html' });
                res.end('Not Found');
            } else {
                res.writeHead(200, { 'Content-Type': contentType });
                res.end(data);
            }
        });
    }
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

问题2：所有请求都重定向到 index.html

如果你希望所有请求都返回 index.html，你可以将所有的请求都指向 index.html，然后通过前端路由来处理不同的页面。

示例代码：

const http = require('http');
const fs = require('fs');
const path = require('path');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
    fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {
        if (err) {
            res.writeHead(500);
            res.end('Internal Server Error');
        } else {
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.end(data);
        }
    });
});

server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

这样，无论你访问哪个 URL，服务器都会返回 index.html，然后由前端路由（如 React Router 或 Vue Router）来处理具体的页面逻辑。

通过以上配置，你应该能够解决这两个问题。

回到顶部