每天一个nodejs开发技巧：在ejs页面中，调用多个路由接口

最新推荐文章于 2024-05-17 15:24:29 发布

盒子猫君

最新推荐文章于 2024-05-17 15:24:29 发布

阅读量211

点赞数 2

分类专栏：微信小程序开发教程（nodejs后端）文章标签： node.js 微信小程序服务器 webstorm

本文链接：https://blog.csdn.net/qq_25501981/article/details/137037359

版权

微信小程序开发教程（nodejs后端）专栏收录该内容

15 篇文章 3 订阅

订阅专栏

在 EJS（Embedded JavaScript templating）页面中调用多个路由接口，通常意味着你将在一个 Web 应用程序中使用 Node.js 作为后端服务器，并且采用 Express.js 作为 Web 应用程序框架。在这种情况下，你可以通过 Express 路由器定义接口（endpoints），然后在 EJS 模板中使用 AJAX 请求（例如，通过 JavaScript 的 `fetch` 函数或 jQuery 的 `$.ajax` 方法）来调用这些接口。以下是一个简单的例子，说明如何在 EJS 页面中调用多个路由接口：

1. 定义路由接口（在 Express 应用中）:

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

// 假设你有一个获取用户数据的接口
router.get('/users', (req, res) => {
  // 处理获取用户数据的逻辑
  res.json({ users: ['user1', 'user2', 'user3'] });
});

// 另一个接口，获取订单数据
router.get('/orders', (req, res) => {
  // 处理获取订单数据的逻辑
  resjson({ orders: ['order1', 'order2', 'order3'] });
});

// 将路由器附加到应用
app.use('/api', router);

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

2. 在 EJS 模板中调用这些接口:

<!DOCTYPE html>
<html>
<head>
  <title>调用多个路由接口</title>
  <script>
    // 用 fetch 函数调用接口
    function fetchUsers() {
      fetch('/api/users')
        .then(response => response.json())
        .then(data => {
          // 处理用户数据
          console.log(data.users);
          // 可能需要在页面上显示数据
        })
        .catch(error => console.error('Error fetching users:', error));
    }

    function fetchOrders() {
      fetch('/api/orders')
        .then(response => response.json())
        .then(data => {
          // 处理订单数据
          console.log(data.orders);
          // 可能需要在页面上显示数据
        })
        .catch(error => console.error('Error fetching orders:', error));
    }
  </script>
</head>
<body>

<button onclick="fetchUsers()">获取用户数据</button>
<button onclick="fetchOrders()">获取订单数据</button>

</body>
</html>

在这个例子中，我们定义了两个函数 `fetchUsers` 和 `fetchOrders`，它们分别通过 `fetch` 函数发送 GET 请求到 `/api/users` 和 `/api/orders` 接口。当按钮被点击时，相应的函数会被调用，并处理从服务器返回的数据。

如果你希望在加载页面时直接调用路由接口而不需要用户点击按钮触发，你可以在页面加载完成后使用 JavaScript 的 `window.onload` 事件来触发调用接口的函数。以下是更新后的示例代码：

1. 在 EJS 模板中直接调用路由接口:

<!DOCTYPE html>
<html>
<head>
  <title>调用多个路由接口</title>
  <script>
    window.onload = function() {
      // 用 fetch 函数调用接口
      fetch('/api/users')
        .then(response => response.json())
        .then(data => {
          // 处理用户数据
          console.log(data.users);
          // 可能需要在页面上显示数据
        })
        .catch(error => console.error('Error fetching users:', error));

      fetch('/api/orders')
        .then(response => response.json())
        .then(data => {
          // 处理订单数据
          console.log(data.orders);
          // 可能需要在页面上显示数据
        })
        .catch(error => console.error('Error fetching orders:', error));
    }
  </script>
</head>
<body>
  <!-- 这里可以展示数据 -->
</body>
</html>

在这个更新后的示例中，我们在 `window.onload` 事件中调用了两个接口 `/api/users` 和 `/api/orders`，这样页面加载完成后会自动触发调用。当页面加载时，浏览器会自动执行 `window.onload` 函数内的代码。

盒子猫君

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
每天一个nodejs开发技巧：在ejs页面中，调用多个路由接口

在这个例子中，我们定义了两个函数 `fetchUsers` 和 `fetchOrders`，它们分别通过 `fetch` 函数发送 GET 请求到 `/api/users` 和 `/api/orders` 接口。在这个更新后的示例中，我们在 `window.onload` 事件中调用了两个接口 `/api/users` 和 `/api/orders`，这样页面加载完成后会自动触发调用。当页面加载时，浏览器会自动执行 `window.onload` 函数内的代码。
复制链接

扫一扫