Node.js调用M2LOrder情感分析API构建全栈情绪看板你是不是也好奇怎么让一段文字背后的情绪“看得见”比如用户评论是开心还是抱怨产品反馈是积极还是消极。今天咱们就来动手实现一个“情绪看板”用Node.js调用一个强大的情感分析API再把分析结果变成酷炫的动态图表。整个过程就像搭积木一步步来你会发现全栈开发其实挺有意思的。这个教程的目标很明确就算你之前没怎么接触过后端API调用也能跟着走下来。我们会从最基础的Node.js环境准备开始然后学习怎么发送请求、处理数据最后把冷冰冰的文本情绪变成前端页面上活生生的图表。学完你就能自己做一个实时分析舆情、用户反馈的小工具了。1. 动手之前准备好你的“工具箱”工欲善其事必先利其器。在开始写代码之前我们需要确保电脑上已经装好了必要的软件。别担心步骤都很简单。1.1 安装Node.js和npmNode.js是我们的JavaScript运行环境而npm是随它一起安装的包管理工具我们可以用它来安装后面需要的代码库。首先打开终端Windows上是命令提示符或PowerShellMac或Linux上是Terminal输入下面的命令来检查是否已经安装node --version npm --version如果显示了版本号比如v18.x.x和9.x.x恭喜你可以直接跳到下一步。如果没有就需要安装。安装方法推荐方式访问 Node.js 官网下载最新的“长期支持版”安装包。像安装普通软件一样一路点击“下一步”即可。这种方式会同时安装Node.js和npm。验证安装安装完成后重新打开终端再次运行上面的两个命令确认版本号正常显示。1.2 创建你的项目文件夹我们需要一个干净的“工作间”来放我们的代码。打开终端找一个你喜欢的位置执行以下命令mkdir sentiment-dashboard cd sentiment-dashboard这个命令创建了一个名为sentiment-dashboard的新文件夹并进入它。1.3 初始化项目并安装必备库现在让我们在这个文件夹里初始化一个Node.js项目并安装我们需要的“帮手”库。初始化项目在终端里运行npm init -y。这个命令会快速生成一个package.json文件它就像是项目的“身份证”和“说明书”记录着项目信息和依赖的库。安装核心库我们需要两个重要的库。axios: 一个非常好用的HTTP客户端库用来向后端API发送请求比原生的fetch更简单强大。express: 一个极简的Node.js Web框架。我们用它在本地快速搭建一个服务器来运行我们的前端页面和后端逻辑。在终端里运行这条安装命令npm install axios express安装完成后你的package.json文件里会看到这些依赖。你的“工具箱”现在就准备妥当了。2. 核心第一步用Node.js调用情感分析API现在进入正题。我们假设你已经有一个部署好的M2LOrder情感分析服务它提供了一个API接口地址类似于http://your-api-server/predict。我们的任务就是让Node.js程序去和这个接口“对话”。2.1 理解API接口在写代码之前得先知道怎么和API沟通。通常这类情感分析API需要你以POST请求的方式发送一段JSON格式的数据过去。它处理完后会返回另一段JSON数据给你。一个典型的请求和响应长这样请求体 (我们发送过去的){ text: 这个产品真是太棒了我非常喜欢它的设计 }响应体 (API返回给我们的){ sentiment: positive, confidence: 0.95, label: 积极 }sentiment/label: 情感极性如“积极(positive)”、“消极(negative)”、“中性(neutral)”。confidence: 置信度表示分析结果有多大的把握值在0到1之间。2.2 编写API调用函数让我们在项目根目录创建一个名为sentimentService.js的文件。这个文件专门负责和情感分析API打交道。// sentimentService.js const axios require(axios); // 1. 配置API的基础地址请替换成你实际的服务地址 const API_BASE_URL http://your-api-server:port; // 例如: http://localhost:8000 /** * 调用情感分析API * param {string} text - 需要分析的文本 * returns {PromiseObject} - 返回情感分析结果对象 */ async function analyzeSentiment(text) { // 2. 准备请求数据 const requestData { text: text }; try { // 3. 使用axios发送POST请求 const response await axios.post(${API_BASE_URL}/predict, requestData, { headers: { Content-Type: application/json // 告诉服务器我们发送的是JSON } }); // 4. 请求成功返回API的数据 console.log(API调用成功:, response.data); return response.data; } catch (error) { // 5. 请求失败进行错误处理 console.error(调用情感分析API时出错:); // 判断错误类型给出更友好的提示 if (error.response) { // 服务器返回了错误状态码如4xx, 5xx console.error(状态码: ${error.response.status}); console.error(错误信息: ${JSON.stringify(error.response.data)}); throw new Error(API服务错误: ${error.response.status}); } else if (error.request) { // 请求发出了但没有收到响应网络问题或服务未启动 console.error(网络错误或API服务未响应请检查地址和网络。); throw new Error(无法连接到情感分析服务请检查配置。); } else { // 在设置请求时出了错 console.error(请求配置错误:, error.message); throw new Error(请求配置失败: ${error.message}); } } } // 导出这个函数方便在其他文件中使用 module.exports { analyzeSentiment };代码解读引入axios加载我们安装的HTTP库。定义函数analyzeSentiment是一个异步函数它接收一段文本作为参数。发送请求使用axios.post向指定的API地址发送POST请求并将文本包装在JSON对象中。处理成功收到响应后将数据打印到控制台并返回。处理失败用try...catch捕获错误。这里详细区分了网络错误、服务器错误等不同情况方便你调试。3. 搭建桥梁创建简单的Web服务器我们的Node.js脚本现在能分析情感了但怎么让用户通过网页来使用它呢我们需要创建一个Web服务器它既能提供前端页面也能接收浏览器发来的分析请求。在项目根目录创建一个server.js文件。// server.js const express require(express); const path require(path); const { analyzeSentiment } require(./sentimentService); const app express(); const PORT 3000; // 服务器将在本机的3000端口运行 // 1. 中间件解析JSON格式的请求体 app.use(express.json()); // 2. 中间件提供静态文件比如HTML, CSS, JS app.use(express.static(path.join(__dirname, public))); // 3. 定义API路由处理前端发来的情感分析请求 app.post(/api/analyze, async (req, res) { const { text } req.body; // 从请求体中获取用户输入的文本 if (!text || text.trim().length 0) { // 如果文本是空的返回错误 return res.status(400).json({ error: 请输入要分析的文本内容。 }); } try { // 调用我们之前写好的服务函数 const result await analyzeSentiment(text); // 将成功的结果返回给前端 res.json(result); } catch (apiError) { // 如果分析服务调用失败返回错误信息 console.error(服务器端分析失败:, apiError.message); res.status(500).json({ error: 情感分析服务暂时不可用请稍后重试。 }); } }); // 4. 启动服务器 app.listen(PORT, () { console.log(✅ 情绪看板服务器已启动); console.log( 请用浏览器打开 http://localhost:${PORT}); });这个服务器做了三件事托管前端文件任何放在public文件夹里的HTML、CSS、JS文件浏览器都可以直接访问。提供分析接口当浏览器向/api/analyze地址发送POST请求时服务器会调用analyzeSentiment函数并将结果返回。处理错误对空文本或后端API故障进行了处理返回清晰的错误信息。4. 让情绪“动”起来用ECharts绘制看板前端是我们的展示舞台。我们在public文件夹里创建页面。4.1 创建基础HTML页面在项目根目录下创建一个public文件夹然后在里面创建index.html。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title实时情绪看板/title !-- 引入ECharts图表库 -- script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script style body { font-family: sans-serif; margin: 40px; background-color: #f5f7fa; } .container { max-width: 1200px; margin: auto; } .input-area, .chart-area { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-bottom: 30px; } textarea { width: 100%; height: 100px; padding: 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; box-sizing: border-box; } button { background-color: #4a6cf7; color: white; border: none; padding: 14px 28px; border-radius: 8px; cursor: pointer; font-size: 16px; margin-top: 15px; } button:hover { background-color: #3a5ce5; } button:disabled { background-color: #ccc; cursor: not-allowed; } .result { margin-top: 20px; padding: 15px; border-radius: 8px; display: none; } .positive { background-color: #e8f7e8; border-left: 5px solid #52c41a; } .negative { background-color: #fdeeee; border-left: 5px solid #f5222d; } .neutral { background-color: #f0f0f0; border-left: 5px solid #8c8c8c; } .charts { display: flex; flex-wrap: wrap; gap: 20px; } .chart-box { flex: 1; min-width: 350px; height: 400px; } /style /head body div classcontainer h1 实时情绪看板/h1 p输入一段文本分析其情感倾向并可视化展示统计结果。/p div classinput-area h3输入待分析文本/h3 textarea idtextInput placeholder请输入任何你想分析情感的句子例如今天天气真好心情特别愉快/textarea button idanalyzeBtn开始情感分析/button div idsentimentResult classresult/div /div div classchart-area h3情感分布看板/h3 p以下图表展示了历史分析结果的统计本次会话。/p div classcharts div idpieChart classchart-box/div div idbarChart classchart-box/div /div /div /div script srcdashboard.js/script /body /html4.2 编写前端交互与图表逻辑在public文件夹下创建dashboard.js这是前端的“大脑”。// public/dashboard.js // 历史记录用于图表统计 let analysisHistory { 积极: 0, 消极: 0, 中性: 0 }; // 初始化ECharts实例 const pieChart echarts.init(document.getElementById(pieChart)); const barChart echarts.init(document.getElementById(barChart)); // 设置图表的初始配置一个空状态 function initCharts() { const emptyOption { title: { text: 暂无数据, left: center, top: center, textStyle: { color: #999 } }, graphic: { type: text, left: center, top: center, style: { text: 请先分析一些文本, fill: #ccc } } }; pieChart.setOption(emptyOption); barChart.setOption(emptyOption); } initCharts(); // 页面加载时初始化 // 更新图表函数 function updateCharts() { const data Object.keys(analysisHistory).map(key ({ name: key, value: analysisHistory[key] })); // 饼图配置 const pieOption { title: { text: 情感分布饼图, left: center }, tooltip: { trigger: item }, legend: { orient: vertical, left: left }, series: [{ name: 情感分布, type: pie, radius: 60%, data: data, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } } }] }; // 柱状图配置 const barOption { title: { text: 情感统计柱状图, left: center }, tooltip: { trigger: axis }, xAxis: { type: category, data: Object.keys(analysisHistory) }, yAxis: { type: value }, series: [{ name: 出现次数, type: bar, data: Object.values(analysisHistory), itemStyle: { color: function(params) { const colorList [#52c41a, #f5222d, #8c8c8c]; return colorList[params.dataIndex]; } } }] }; pieChart.setOption(pieOption); barChart.setOption(barOption); } // 处理分析按钮的点击事件 document.getElementById(analyzeBtn).addEventListener(click, async function() { const textInput document.getElementById(textInput); const resultDiv document.getElementById(sentimentResult); const button this; const text textInput.value.trim(); if (!text) { alert(请输入一些文本内容再进行分析。); return; } // 禁用按钮防止重复点击 button.disabled true; button.textContent 分析中...; resultDiv.style.display none; try { // 向我们的Node.js服务器发送请求 const response await fetch(/api/analyze, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ text: text }) }); const data await response.json(); if (!response.ok) { // 如果服务器返回错误状态码 throw new Error(data.error || 分析请求失败); } // 显示结果 resultDiv.textContent 情感: ${data.label} | 置信度: ${(data.confidence * 100).toFixed(1)}%; resultDiv.className result data.sentiment; // 根据结果添加样式类 resultDiv.style.display block; // 更新历史记录 if (analysisHistory.hasOwnProperty(data.label)) { analysisHistory[data.label]; } else { analysisHistory[data.label] 1; } // 更新图表 updateCharts(); } catch (error) { // 捕获并显示错误 resultDiv.textContent 错误: ${error.message}; resultDiv.className result; resultDiv.style.display block; console.error(分析过程中出错:, error); } finally { // 无论成功失败都恢复按钮状态 button.disabled false; button.textContent 开始情感分析; } });5. 运行你的全栈情绪看板所有代码都写好了让我们看看成果。启动服务器在终端里确保你在sentiment-dashboard项目目录下然后运行node server.js看到✅ 情绪看板服务器已启动和 请用浏览器打开 http://localhost:3000的提示就说明成功了。打开看板打开浏览器访问http://localhost:3000。你会看到一个简洁的页面。开始分析在文本框中输入你想分析的句子比如“这个电影太让人失望了”。点击“开始情感分析”按钮。稍等片刻页面下方会直接显示分析结果如“情感: 消极”并且饼图和柱状图会实时更新展示你所有分析结果的情感分布。尝试更多多输入几条不同情感的句子积极的、消极的、中性的观察图表如何动态变化。一个属于你的实时情绪看板就运转起来了6. 总结走完这一趟你会发现从后端API调用到前端数据可视化整个链路其实非常清晰。我们先用Node.js和axios搭建了一个可靠的后端服务代理处理了网络请求和错误然后用Express快速创建了连接前后端的桥梁最后用ECharts这个强大的工具把数据变成了直观的图表。这个项目虽然小但涵盖了全栈开发的几个核心概念RESTful API调用、异步编程、基本的服务器搭建以及前端数据绑定与渲染。你可以基于这个骨架做很多扩展比如把历史数据存到数据库里、分析整个文件的情感倾向、或者把看板做得更美观。最重要的是你亲手让数据“说话”了这感觉是不是很棒获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Node.js调用M2LOrder情感分析API：构建全栈情绪看板
Node.js调用M2LOrder情感分析API构建全栈情绪看板你是不是也好奇怎么让一段文字背后的情绪“看得见”比如用户评论是开心还是抱怨产品反馈是积极还是消极。今天咱们就来动手实现一个“情绪看板”用Node.js调用一个强大的情感分析API再把分析结果变成酷炫的动态图表。整个过程就像搭积木一步步来你会发现全栈开发其实挺有意思的。这个教程的目标很明确就算你之前没怎么接触过后端API调用也能跟着走下来。我们会从最基础的Node.js环境准备开始然后学习怎么发送请求、处理数据最后把冷冰冰的文本情绪变成前端页面上活生生的图表。学完你就能自己做一个实时分析舆情、用户反馈的小工具了。1. 动手之前准备好你的“工具箱”工欲善其事必先利其器。在开始写代码之前我们需要确保电脑上已经装好了必要的软件。别担心步骤都很简单。1.1 安装Node.js和npmNode.js是我们的JavaScript运行环境而npm是随它一起安装的包管理工具我们可以用它来安装后面需要的代码库。首先打开终端Windows上是命令提示符或PowerShellMac或Linux上是Terminal输入下面的命令来检查是否已经安装node --version npm --version如果显示了版本号比如v18.x.x和9.x.x恭喜你可以直接跳到下一步。如果没有就需要安装。安装方法推荐方式访问 Node.js 官网下载最新的“长期支持版”安装包。像安装普通软件一样一路点击“下一步”即可。这种方式会同时安装Node.js和npm。验证安装安装完成后重新打开终端再次运行上面的两个命令确认版本号正常显示。1.2 创建你的项目文件夹我们需要一个干净的“工作间”来放我们的代码。打开终端找一个你喜欢的位置执行以下命令mkdir sentiment-dashboard cd sentiment-dashboard这个命令创建了一个名为sentiment-dashboard的新文件夹并进入它。1.3 初始化项目并安装必备库现在让我们在这个文件夹里初始化一个Node.js项目并安装我们需要的“帮手”库。初始化项目在终端里运行npm init -y。这个命令会快速生成一个package.json文件它就像是项目的“身份证”和“说明书”记录着项目信息和依赖的库。安装核心库我们需要两个重要的库。axios: 一个非常好用的HTTP客户端库用来向后端API发送请求比原生的fetch更简单强大。express: 一个极简的Node.js Web框架。我们用它在本地快速搭建一个服务器来运行我们的前端页面和后端逻辑。在终端里运行这条安装命令npm install axios express安装完成后你的package.json文件里会看到这些依赖。你的“工具箱”现在就准备妥当了。2. 核心第一步用Node.js调用情感分析API现在进入正题。我们假设你已经有一个部署好的M2LOrder情感分析服务它提供了一个API接口地址类似于http://your-api-server/predict。我们的任务就是让Node.js程序去和这个接口“对话”。2.1 理解API接口在写代码之前得先知道怎么和API沟通。通常这类情感分析API需要你以POST请求的方式发送一段JSON格式的数据过去。它处理完后会返回另一段JSON数据给你。一个典型的请求和响应长这样请求体 (我们发送过去的){ text: 这个产品真是太棒了我非常喜欢它的设计 }响应体 (API返回给我们的){ sentiment: positive, confidence: 0.95, label: 积极 }sentiment/label: 情感极性如“积极(positive)”、“消极(negative)”、“中性(neutral)”。confidence: 置信度表示分析结果有多大的把握值在0到1之间。2.2 编写API调用函数让我们在项目根目录创建一个名为sentimentService.js的文件。这个文件专门负责和情感分析API打交道。// sentimentService.js const axios require(axios); // 1. 配置API的基础地址请替换成你实际的服务地址 const API_BASE_URL http://your-api-server:port; // 例如: http://localhost:8000 /** * 调用情感分析API * param {string} text - 需要分析的文本 * returns {PromiseObject} - 返回情感分析结果对象 */ async function analyzeSentiment(text) { // 2. 准备请求数据 const requestData { text: text }; try { // 3. 使用axios发送POST请求 const response await axios.post(${API_BASE_URL}/predict, requestData, { headers: { Content-Type: application/json // 告诉服务器我们发送的是JSON } }); // 4. 请求成功返回API的数据 console.log(API调用成功:, response.data); return response.data; } catch (error) { // 5. 请求失败进行错误处理 console.error(调用情感分析API时出错:); // 判断错误类型给出更友好的提示 if (error.response) { // 服务器返回了错误状态码如4xx, 5xx console.error(状态码: ${error.response.status}); console.error(错误信息: ${JSON.stringify(error.response.data)}); throw new Error(API服务错误: ${error.response.status}); } else if (error.request) { // 请求发出了但没有收到响应网络问题或服务未启动 console.error(网络错误或API服务未响应请检查地址和网络。); throw new Error(无法连接到情感分析服务请检查配置。); } else { // 在设置请求时出了错 console.error(请求配置错误:, error.message); throw new Error(请求配置失败: ${error.message}); } } } // 导出这个函数方便在其他文件中使用 module.exports { analyzeSentiment };代码解读引入axios加载我们安装的HTTP库。定义函数analyzeSentiment是一个异步函数它接收一段文本作为参数。发送请求使用axios.post向指定的API地址发送POST请求并将文本包装在JSON对象中。处理成功收到响应后将数据打印到控制台并返回。处理失败用try...catch捕获错误。这里详细区分了网络错误、服务器错误等不同情况方便你调试。3. 搭建桥梁创建简单的Web服务器我们的Node.js脚本现在能分析情感了但怎么让用户通过网页来使用它呢我们需要创建一个Web服务器它既能提供前端页面也能接收浏览器发来的分析请求。在项目根目录创建一个server.js文件。// server.js const express require(express); const path require(path); const { analyzeSentiment } require(./sentimentService); const app express(); const PORT 3000; // 服务器将在本机的3000端口运行 // 1. 中间件解析JSON格式的请求体 app.use(express.json()); // 2. 中间件提供静态文件比如HTML, CSS, JS app.use(express.static(path.join(__dirname, public))); // 3. 定义API路由处理前端发来的情感分析请求 app.post(/api/analyze, async (req, res) { const { text } req.body; // 从请求体中获取用户输入的文本 if (!text || text.trim().length 0) { // 如果文本是空的返回错误 return res.status(400).json({ error: 请输入要分析的文本内容。 }); } try { // 调用我们之前写好的服务函数 const result await analyzeSentiment(text); // 将成功的结果返回给前端 res.json(result); } catch (apiError) { // 如果分析服务调用失败返回错误信息 console.error(服务器端分析失败:, apiError.message); res.status(500).json({ error: 情感分析服务暂时不可用请稍后重试。 }); } }); // 4. 启动服务器 app.listen(PORT, () { console.log(✅ 情绪看板服务器已启动); console.log( 请用浏览器打开 http://localhost:${PORT}); });这个服务器做了三件事托管前端文件任何放在public文件夹里的HTML、CSS、JS文件浏览器都可以直接访问。提供分析接口当浏览器向/api/analyze地址发送POST请求时服务器会调用analyzeSentiment函数并将结果返回。处理错误对空文本或后端API故障进行了处理返回清晰的错误信息。4. 让情绪“动”起来用ECharts绘制看板前端是我们的展示舞台。我们在public文件夹里创建页面。4.1 创建基础HTML页面在项目根目录下创建一个public文件夹然后在里面创建index.html。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title实时情绪看板/title !-- 引入ECharts图表库 -- script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script style body { font-family: sans-serif; margin: 40px; background-color: #f5f7fa; } .container { max-width: 1200px; margin: auto; } .input-area, .chart-area { background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-bottom: 30px; } textarea { width: 100%; height: 100px; padding: 15px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; box-sizing: border-box; } button { background-color: #4a6cf7; color: white; border: none; padding: 14px 28px; border-radius: 8px; cursor: pointer; font-size: 16px; margin-top: 15px; } button:hover { background-color: #3a5ce5; } button:disabled { background-color: #ccc; cursor: not-allowed; } .result { margin-top: 20px; padding: 15px; border-radius: 8px; display: none; } .positive { background-color: #e8f7e8; border-left: 5px solid #52c41a; } .negative { background-color: #fdeeee; border-left: 5px solid #f5222d; } .neutral { background-color: #f0f0f0; border-left: 5px solid #8c8c8c; } .charts { display: flex; flex-wrap: wrap; gap: 20px; } .chart-box { flex: 1; min-width: 350px; height: 400px; } /style /head body div classcontainer h1 实时情绪看板/h1 p输入一段文本分析其情感倾向并可视化展示统计结果。/p div classinput-area h3输入待分析文本/h3 textarea idtextInput placeholder请输入任何你想分析情感的句子例如今天天气真好心情特别愉快/textarea button idanalyzeBtn开始情感分析/button div idsentimentResult classresult/div /div div classchart-area h3情感分布看板/h3 p以下图表展示了历史分析结果的统计本次会话。/p div classcharts div idpieChart classchart-box/div div idbarChart classchart-box/div /div /div /div script srcdashboard.js/script /body /html4.2 编写前端交互与图表逻辑在public文件夹下创建dashboard.js这是前端的“大脑”。// public/dashboard.js // 历史记录用于图表统计 let analysisHistory { 积极: 0, 消极: 0, 中性: 0 }; // 初始化ECharts实例 const pieChart echarts.init(document.getElementById(pieChart)); const barChart echarts.init(document.getElementById(barChart)); // 设置图表的初始配置一个空状态 function initCharts() { const emptyOption { title: { text: 暂无数据, left: center, top: center, textStyle: { color: #999 } }, graphic: { type: text, left: center, top: center, style: { text: 请先分析一些文本, fill: #ccc } } }; pieChart.setOption(emptyOption); barChart.setOption(emptyOption); } initCharts(); // 页面加载时初始化 // 更新图表函数 function updateCharts() { const data Object.keys(analysisHistory).map(key ({ name: key, value: analysisHistory[key] })); // 饼图配置 const pieOption { title: { text: 情感分布饼图, left: center }, tooltip: { trigger: item }, legend: { orient: vertical, left: left }, series: [{ name: 情感分布, type: pie, radius: 60%, data: data, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } } }] }; // 柱状图配置 const barOption { title: { text: 情感统计柱状图, left: center }, tooltip: { trigger: axis }, xAxis: { type: category, data: Object.keys(analysisHistory) }, yAxis: { type: value }, series: [{ name: 出现次数, type: bar, data: Object.values(analysisHistory), itemStyle: { color: function(params) { const colorList [#52c41a, #f5222d, #8c8c8c]; return colorList[params.dataIndex]; } } }] }; pieChart.setOption(pieOption); barChart.setOption(barOption); } // 处理分析按钮的点击事件 document.getElementById(analyzeBtn).addEventListener(click, async function() { const textInput document.getElementById(textInput); const resultDiv document.getElementById(sentimentResult); const button this; const text textInput.value.trim(); if (!text) { alert(请输入一些文本内容再进行分析。); return; } // 禁用按钮防止重复点击 button.disabled true; button.textContent 分析中...; resultDiv.style.display none; try { // 向我们的Node.js服务器发送请求 const response await fetch(/api/analyze, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ text: text }) }); const data await response.json(); if (!response.ok) { // 如果服务器返回错误状态码 throw new Error(data.error || 分析请求失败); } // 显示结果 resultDiv.textContent 情感: ${data.label} | 置信度: ${(data.confidence * 100).toFixed(1)}%; resultDiv.className result data.sentiment; // 根据结果添加样式类 resultDiv.style.display block; // 更新历史记录 if (analysisHistory.hasOwnProperty(data.label)) { analysisHistory[data.label]; } else { analysisHistory[data.label] 1; } // 更新图表 updateCharts(); } catch (error) { // 捕获并显示错误 resultDiv.textContent 错误: ${error.message}; resultDiv.className result; resultDiv.style.display block; console.error(分析过程中出错:, error); } finally { // 无论成功失败都恢复按钮状态 button.disabled false; button.textContent 开始情感分析; } });5. 运行你的全栈情绪看板所有代码都写好了让我们看看成果。启动服务器在终端里确保你在sentiment-dashboard项目目录下然后运行node server.js看到✅ 情绪看板服务器已启动和 请用浏览器打开 http://localhost:3000的提示就说明成功了。打开看板打开浏览器访问http://localhost:3000。你会看到一个简洁的页面。开始分析在文本框中输入你想分析的句子比如“这个电影太让人失望了”。点击“开始情感分析”按钮。稍等片刻页面下方会直接显示分析结果如“情感: 消极”并且饼图和柱状图会实时更新展示你所有分析结果的情感分布。尝试更多多输入几条不同情感的句子积极的、消极的、中性的观察图表如何动态变化。一个属于你的实时情绪看板就运转起来了6. 总结走完这一趟你会发现从后端API调用到前端数据可视化整个链路其实非常清晰。我们先用Node.js和axios搭建了一个可靠的后端服务代理处理了网络请求和错误然后用Express快速创建了连接前后端的桥梁最后用ECharts这个强大的工具把数据变成了直观的图表。这个项目虽然小但涵盖了全栈开发的几个核心概念RESTful API调用、异步编程、基本的服务器搭建以及前端数据绑定与渲染。你可以基于这个骨架做很多扩展比如把历史数据存到数据库里、分析整个文件的情感倾向、或者把看板做得更美观。最重要的是你亲手让数据“说话”了这感觉是不是很棒获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
