首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

EJS和Express,不知道如何从根路径加载静态文件

EJS (Embedded JavaScript) 是一种简洁、灵活的模板引擎,可用于在服务器端生成动态的 HTML 页面。它允许开发人员在 HTML 页面中嵌入 JavaScript 代码,从而动态地生成内容并将其发送到客户端。

Express 是一个流行的 Node.js 后端框架,它提供了一组简化的工具和中间件,帮助开发人员构建 Web 应用程序。Express 具有强大的路由功能和模板引擎支持,其中包括 EJS。

要从根路径加载静态文件(例如 CSS、JavaScript 文件、图像等),可以使用 Express 的内置中间件函数 express.static。下面是一个简单的示例:

首先,确保已经安装了 Express 框架和 EJS 模板引擎。可以使用以下命令进行安装:

代码语言:txt
复制
npm install express ejs

然后,创建一个名为 app.js 的文件,并在其中编写以下代码:

代码语言:txt
复制
const express = require('express');
const app = express();

// 设置 EJS 模板引擎
app.set('view engine', 'ejs');

// 从根路径加载静态文件
app.use(express.static('public'));

// 定义根路径的路由处理程序
app.get('/', (req, res) => {
  res.render('index');
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的代码中,public 目录是存放静态文件的文件夹。将你的静态文件(例如 CSS 文件)放置在该目录下。

接下来,创建一个名为 index.ejs 的文件,并将其放置在 views 目录下(如果没有该目录,则自行创建)。在该文件中,可以使用 EJS 的语法来嵌入动态内容。例如:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to my website!</h1>
  <p>This is a static HTML page generated by EJS and served by Express.</p>
  <script src="script.js"></script>
</body>
</html>

在上面的示例中,我们使用了 styles.cssscript.js 这两个静态文件,并使用相对路径进行引用。

最后,在命令行中运行以下命令以启动服务器:

代码语言:txt
复制
node app.js

现在,当访问根路径 http://localhost:3000 时,Express 将会加载静态文件并将生成的 HTML 页面发送给客户端。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云内容分发网络(CDN):https://cloud.tencent.com/product/cdn
  • 腾讯云云函数(SCF):https://cloud.tencent.com/product/scf
  • 腾讯云数据库(TencentDB):https://cloud.tencent.com/product/cdb
  • 腾讯云人工智能:https://cloud.tencent.com/product/ai
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券