Nodejs中ejs怎么引用外部js

Nodejs中ejs怎么引用外部js

最近在利用javascript+jquery+nodejs+phonegap做一个小项目，需要一个功能是二级省市联动，由于处理的js略多，所以没把他用<%%>写在.ejs中，所以把js部分放成外部文件，利用 <script language=“javascript” src=“routes/cityData.js”></script> <script language=“javascript” src=“routes/main.js”></script>在.ejs中引入，但是好像没用？想请问下.ejs中怎么引用外部的js?(本人刚接触web开发，也刚接触nodejs,菜鸟一个)


5 回复

在Node.js项目中使用EJS模板引擎时，引用外部JavaScript文件是一个常见的需求。以下是如何在EJS文件中正确引用外部JavaScript文件的步骤和示例。

步骤1: 创建外部JavaScript文件

假设你有两个外部JavaScript文件：

  • cityData.js
  • main.js

你可以将这些文件放在项目的某个目录下，例如public/js/目录。

cityData.js

// cityData.js
function loadCities() {
    console.log('Loading cities...');
}

main.js

// main.js
function initialize() {
    console.log('Initializing app...');
    loadCities();
}

initialize();

步骤2: 在EJS文件中引用外部JavaScript文件

在你的EJS文件（例如index.ejs）中，你需要确保HTML <script>标签正确地指向这些外部JavaScript文件。通常，你会在HTML的<head>或<body>标签内添加这些脚本。

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js EJS Example</title>
    <!-- 引入外部CSS文件（如果有的话） -->
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>Welcome to My App</h1>

    <!-- 引入外部JavaScript文件 -->
    <script src="/js/cityData.js"></script>
    <script src="/js/main.js"></script>
</body>
</html>

步骤3: 确保服务器正确配置

为了使浏览器能够访问到这些JavaScript文件，你需要确保你的Node.js服务器正确地配置了静态文件服务。你可以使用Express框架来简化这一过程。

app.js

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

const app = express();
const port = 3000;

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

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index');
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

总结

通过以上步骤，你应该能够在EJS模板中成功引用外部JavaScript文件。确保你的服务器配置正确，并且路径设置无误。这样，当你在浏览器中打开页面时，外部JavaScript文件应该会被正确加载并执行。


？？直接写html 不就行了。。。。。。。。

打开浏览器调试，比如使用chrome，看看你生成的html结构对不对，js路径是否正确

你是说在我要显示二级联动列表的那个div里边设置二级联动列表的html的src 吗？ 但是这样总是cannot get /mytest.html，我想是不是路径写的不对，我是在项目的views目录下放着 post.ejs跟mytest.html，此时是在post.ejs里边的一个div里边这么写， <div id=“html_mytest”> <iframe align=“center” src="/mytest.html" frameborder=“no” border=“0” marginwidth=“0” marginheight=“0” scrolling=“no”></iframe> </div>但是即使是我换成src="…/views/mytest/html" "/views/mytest.html"都是不行

在 Node.js 中使用 EJS 模板引擎时，你可以通过 HTML 的 <script> 标签来引用外部的 JavaScript 文件。以下是一个具体的步骤和示例代码。

步骤：

  1. 创建外部的 JavaScript 文件：假设你需要两个 JavaScript 文件 cityData.js 和 main.js。
  2. 将这两个文件放置在正确的目录下：通常这些静态文件会放在一个公共目录（如 public）中，这样可以通过相对路径进行访问。
  3. 在 EJS 模板中引用这些外部 JS 文件：使用标准的 HTML <script> 标签，并设置正确的 src 属性。

示例结构：

my-app/
├── public/
│   ├── cityData.js
│   └── main.js
├── routes/
│   └── index.js
└── views/
    └── home.ejs

示例代码：

1. public/cityData.js

// 这里写你的 cityData.js 内容
console.log("City Data Loaded");

2. public/main.js

// 这里写你的 main.js 内容
console.log("Main JS Loaded");

3. views/home.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home Page</title>
</head>
<body>
    <!-- 引入外部 JS 文件 -->
    <script src="/cityData.js"></script>
    <script src="/main.js"></script>

    <!-- 其他 HTML 内容 -->
    <h1>Hello, World!</h1>
</body>
</html>

路由配置

确保在路由中正确配置静态文件服务。例如，在 routes/index.js 中添加：

const express = require('express');
const router = express.Router();
const path = require('path');

router.use('/public', express.static(path.join(__dirname, '../public')));

module.exports = router;

这样，当浏览器请求 /cityData.js 或 /main.js 时，Express 服务器会提供相应的静态文件。

解释：

  • 静态文件服务：使用 express.static 可以让 Express 服务静态文件（如 CSS、JS 等）。这里我们将其映射到 public 目录。
  • EJS 模板中的 <script> 标签：在 EJS 模板中使用标准的 HTML <script> 标签来引入外部的 JS 文件。确保 src 属性指向正确的 URL。

这样，你就能够成功地在 EJS 模板中引用外部的 JavaScript 文件了。

回到顶部