如何将Node.js调用IBM Cloud API的响应传递至HTML页面？

我来帮你搞定这个问题！你现在已经能拿到Watson API的响应了，要把数据传到HTML页面展示，其实用Express的视图渲染功能就行，我给你一步步讲：

1. 先配置视图引擎（推荐用EJS） #

首先咱们得给Express配个能把数据和HTML结合的工具，EJS是个不错的选择——它语法和HTML几乎一致，上手特别快。

先在终端安装EJS：

npm install ejs

然后在你的Node.js代码里添加视图引擎配置：

var express = require('express');
var path = require('path');
var app = express();

// 配置EJS为默认视图引擎
app.set('view engine', 'ejs');
// 指定视图文件存放的目录（默认就是项目根目录下的views文件夹，显式写出来更清晰）
app.set('views', path.join(__dirname, 'views'));

app.listen(2000, function () {
  console.log('Watson服务启动啦，端口2000！');
});

2. 创建前端视图文件 #

在项目根目录下新建一个views文件夹，然后在里面创建index.ejs文件——这就是咱们用来展示Watson数据的HTML页面：

<!DOCTYPE html>
<html>
<head>
    <title>Watson 语气分析结果</title>
    <style>
        li { margin: 8px 0; }
        .error { color: #dc3545; }
    </style>
</head>
<body>
    <h1>文本语气分析结果</h1>

    <!-- 展示错误信息（如果API调用失败） -->
    <% if (error) { %>
        <p class="error">出错啦：<%= error %></p>
    <% } %>

    <!-- 展示Watson返回的分析数据 -->
    <% if (toneData) { %>
        <h2>整体语气评分:</h2>
        <ul>
            <% toneData.document_tone.tones.forEach(function(tone) { %>
                <li><strong><%= tone.tone_name %></strong>: <%= (tone.score * 100).toFixed(2) %>%</li>
            <% }) %>
        </ul>
    <% } else if (!error) { %>
        <p>请等待API分析完成...</p>
    <% } %>
</body>
</html>

3. 修改路由逻辑，把API响应传给视图 #

把你原来用res.send返回数据的逻辑，改成用res.render把数据传递给EJS视图：

app.get('/', (req, res) => {
    // 初始化Watson Tone Analyzer客户端
    var ToneAnalyzerV3 = require('watson-developer-cloud/tone-analyzer/v3');
    var toneAnalyzer = new ToneAnalyzerV3({
        version: '2017-09-21',
        iam_apikey: '你的API密钥', // 替换成你的实际密钥
        url: '你的API访问地址' // 替换成你的实际地址
    });

    // 要分析的文本示例（你也可以改成从前端接收的文本）
    var params = {
        tone_input: { 'text': '今天天气真好，我心情特别愉快！' },
        content_type: 'application/json'
    };

    // 调用Watson API并传递数据到视图
    toneAnalyzer.tone(params, function(error, toneData) {
        if (error) {
            console.log(error);
            res.render('index', { toneData: null, error: error.message });
        } else {
            // 把API响应的数据传给index.ejs
            res.render('index', { toneData: toneData, error: null });
        }
    });
});

现在启动你的服务，访问http://localhost:2000，就能在HTML页面上看到Watson API返回的语气分析结果啦！如果API调用出错，页面也会显示对应的错误信息。

内容的提问来源于stack exchange，提问作者Isaac Alejandro