想让前端 js file 被浏览，希望能够指定特定资料夹 - Nodejs如何实现

想让前端 js file 被浏览，希望能够指定特定资料夹 - Nodejs如何实现

前辈晚安，我想要把前端 css, js 送到 client 端，

于是乎我写了一个判断副档名的简易 RegExp，

但是这样会导致后端全部的 js 也可以被浏览，

我想将特定资料夹的js, css （前端）供浏览就好，

请教各位前辈了。

config.js

app.get(/(.*)\.(css|js)/i, function (req, res) {
	res.sendfile(__dirname + "/" + req.params[0] + "." + req.params[1], function (err) {
		if (err)
			res.send(404);
	});
});

views/ 底下的所有 jade 档案与其子资料夹之 jade

link(rel='stylesheet', href='../stylesheet/bootstrap-3.2.0-dist/css/bootstrap.min.css')
link(rel='stylesheet', href='../stylesheet/bootstrap-3.2.0-dist/examples/carousel/carousel.css')
link(rel='stylesheet', href='../stylesheet/style.css')

.
.
.


script(src=’…/stylesheet/jquery-1.11.1/jquery-1.11.1.min.js’)
script(src=’…/stylesheet/bootstrap-3.2.0-dist/js/bootstrap.min.js’)


6 回复

当然可以。为了确保前端的 CSS 和 JS 文件仅从特定的文件夹中提供给客户端浏览，我们需要在 Node.js 中配置静态文件服务。以下是详细的步骤和示例代码。

目标

我们希望前端的 CSS 和 JS 文件仅能从 /public 文件夹中访问，而不是整个应用目录。

示例代码

首先，确保你的项目结构如下：

my-app/
├── app.js
├── public/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
└── views/
    └── index.jade

app.js 配置

const express = require('express');
const path = require('path');

// 创建 Express 应用实例
const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 渲染视图文件
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// 路由处理
app.get('/', function (req, res) {
    res.render('index');
});

// 启动服务器
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

views/index.jade 示例

doctype html
html
  head
    title My App
    link(rel='stylesheet', href='/css/style.css')
  body
    h1 Hello World!
    script(src='/js/script.js')

解释

  1. 设置静态文件目录：

    • 使用 express.static 中间件来指定静态文件的目录。在这个例子中，我们将 /public 文件夹设为静态文件目录。
    • 这样，所有位于 /public 下的文件（如 /public/css/style.css 和 /public/js/script.js）都可以通过路径 /css/style.css 和 /js/script.js 访问。

  2. 路由处理：

    • 我们定义了一个简单的路由 /，它渲染 views/index.jade 视图文件。
    • 在 index.jade 中，我们使用相对路径来引用 CSS 和 JS 文件。

  3. 启动服务器：

    • 最后，我们启动服务器并监听指定的端口。

这种方式可以确保前端资源文件仅从 /public 文件夹中提供，并且不会暴露其他目录中的文件。这样不仅提高了安全性，也使得资源管理更加清晰。


req.url 判断 path 路径，多一层验证。

我想说不要将静态资源交给node处理，你会骂我吗？

  • -，其实EXPRESS不是默认就有一个PUBLIC文件夹，就是用的这个静态的中间件。 没错，原来你就是想要这个意思，我想复杂了。

CSS 的目录本来就是静态文件目录。

为了实现只允许特定文件夹中的前端资源（如 CSS 和 JS 文件）被浏览，你可以使用 express 中的中间件来设置静态文件服务。以下是如何实现这一功能的步骤：

步骤

  1. 安装 Express：如果你还没有安装 express，可以通过以下命令安装：

    npm install express

  2. 创建 Express 应用：在你的项目中创建一个基本的 Express 应用。

  3. 配置静态文件服务：使用 express.static 中间件指定一个特定的文件夹来提供静态资源。

示例代码

假设你的前端资源（CSS 和 JS 文件）位于 public 文件夹下。以下是完整的代码示例：

// 导入 express 模块
const express = require('express');
const app = express();

// 设置静态文件服务
// 假设所有前端资源都放在 public 文件夹下
app.use('/static', express.static('public'));

// 其他路由处理
app.get('/', (req, res) => {
    res.send('Hello World!');
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

配置 Jade 模板

在你的 Jade 模板文件中，可以这样引用资源：

link(rel='stylesheet', href='/static/stylesheet/bootstrap-3.2.0-dist/css/bootstrap.min.css')
link(rel='stylesheet', href='/static/stylesheet/bootstrap-3.2.0-dist/examples/carousel/carousel.css')
link(rel='stylesheet', href='/static/stylesheet/style.css')

script(src='/static/stylesheet/jquery-1.11.1/jquery-1.11.1.min.js')
script(src='/static/stylesheet/bootstrap-3.2.0-dist/js/bootstrap.min.js')

解释

  • app.use('/static', express.static('public')); 这行代码告诉 Express 在 /static 路径下提供 public 文件夹中的静态文件。
  • 在 Jade 模板中，通过 /static 路径引用资源，确保只有 public 文件夹下的文件可以被访问。

这种方式不仅限于特定文件夹，还可以根据需要更改路径和文件夹名称，以更好地管理你的前端资源。

回到顶部