[百度Clouda] Nodejs 从第三方接口取得数据，不存入mongodb，怎么能在view中显示出来？

[百度Clouda] Nodejs 从第三方接口取得数据，不存入mongodb，怎么能在view中显示出来？

使用的是百度Clouda框架。

4 回复

当然可以。在使用百度 Clouda 框架时，如果你希望从第三方接口获取数据并在视图中展示，而不需要将这些数据存储到 MongoDB 中，你可以通过以下步骤实现。下面是一个简单的示例，展示了如何完成这一过程。

步骤 1: 安装必要的依赖

首先，确保你已经安装了 axios 库来帮助你从第三方 API 获取数据。你可以在项目根目录下运行以下命令来安装它：

npm install axios

步骤 2: 创建控制器函数

在你的 Clouda 项目中创建一个控制器文件（例如 controllers/dataController.js），并编写一个函数来从第三方 API 获取数据：

// controllers/dataController.js
const axios = require('axios');

module.exports = {
    fetchData: async (req, res) => {
        try {
            const response = await axios.get('https://api.example.com/data');
            res.render('index', { data: response.data });
        } catch (error) {
            console.error(error);
            res.status(500).send('Failed to fetch data from third-party API.');
        }
    }
};

步骤 3: 在路由中使用控制器函数

接下来，在你的路由配置文件（例如 routes/index.js）中定义一个路由，以调用刚刚创建的控制器函数：

// routes/index.js
const express = require('express');
const router = express.Router();
const { fetchData } = require('../controllers/dataController');

router.get('/', fetchData);

module.exports = router;

步骤 4: 创建视图模板

最后，在你的视图文件夹中（例如 views/index.ejs），创建一个视图模板来显示获取的数据：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
<head>
    <title>Data from Third-Party API</title>
</head>
<body>
    <h1>Data from Third-Party API</h1>
    <ul>
        <% data.forEach(item => { %>
            <li><%= item.name %></li>
        <% }) %>
    </ul>
</body>
</html>

总结

通过以上步骤，你就可以从第三方 API 获取数据，并将其直接传递给视图进行渲染，而无需将数据存储到数据库中。这种方式非常适合需要实时显示外部数据的应用场景。


Hi,
首先, 三方接口抓的数据没有存mongodb, 大可放心按教程使用。
有个step by step的文档可以参考一下：
step-by-step-for-sumeru.external

其次, 也有前端抓取三方数据的API:sumeru.external.get和sumeru.external.post。
抓回数据后，可以自主解析并绑定到view上，这两个API同样在cloudajs.org上有详细的介绍。
因为这种方式为前端抓取，所以不支持服务器推送，需要手动做同步。

最后，如果还有疑问，可以直接和我们联系，交流群：315483229。
我们会解决您在使用Clouda过程中碰到的任何技术性问题。

Clouda开发文档不完善呀！场景实例也不多，新手做项目时很难呀

针对您的问题，假设您希望从一个第三方API获取数据，并直接在您的视图（例如，HTML页面）中展示这些数据。这里将提供一个简单的示例来演示如何实现这一过程。

示例代码

  1. 安装必要的库

首先，确保您已经安装了express 和 axios。这两个库可以帮助我们创建服务器和发送HTTP请求。

npm install express axios
  1. 设置Express服务器

接下来，创建一个简单的Express应用来处理路由并从第三方API获取数据。

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

const app = express();
const port = process.env.PORT || 3000;

app.get('/', async (req, res) => {
    try {
        const response = await axios.get('https://api.example.com/data'); // 替换为您实际使用的第三方API
        const data = response.data; // 获取数据
        res.render('index', { data }); // 渲染视图，并将数据传递给视图
    } catch (error) {
        console.error("Error fetching data:", error);
        res.status(500).send('An error occurred while fetching the data.');
    }
});

app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});
  1. 设置EJS模板引擎

在这个例子中，我们将使用EJS作为模板引擎来渲染视图。请确保已安装EJS并将其设置为默认模板引擎。

npm install ejs

在Express应用初始化时添加：

app.set('view engine', 'ejs');
  1. 创建视图文件

在项目中创建一个名为views/index.ejs的文件，并编写一些基本的HTML和EJS语法来显示数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data from API</title>
</head>
<body>
    <h1>Data from Third-party API:</h1>
    <ul>
        <% data.forEach(item => { %>
            <li><%= item.name %></li> <!-- 假设API返回的数据包含name字段 -->
        <% }) %>
    </ul>
</body>
</html>

总结

这段代码展示了如何从第三方API获取数据，并通过Express服务器将数据传递到EJS模板进行渲染。这只是一个基础示例，实际应用可能需要更复杂的错误处理、数据格式转换等逻辑。希望这对您有所帮助！

回到顶部