如何在浏览器JS中实现前后端交互调用NLPCloud库计算相似度？

1. 前端代码修改 #

原请求未携带需要计算的参数，需补充数据传递逻辑，并处理后端返回结果更新页面：

document.querySelector("form").addEventListener("submit", async function (event) {
  event.preventDefault();
  
  const inputValue = document.querySelector("#submit_box").value;
  const realPhrase = window.realPhrase; // 假设realPhrase是你定义的全局变量
  const scoreElement = document.getElementById("score");

  try {
    // 发送POST请求，携带待计算的两个短语
    const response = await fetch('/submit', { 
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        inputPhrase: inputValue,
        targetPhrase: realPhrase
      })
    });

    if (!response.ok) throw new Error('请求失败');

    // 解析后端返回的相似度结果
    const result = await response.json();
    scoreElement.textContent = result.similarityScore;
    counter++; // 你的全局counter变量
  } catch (error) {
    console.error('计算出错:', error);
    scoreElement.textContent = '计算失败，请重试';
  }
});

2. 后端Node.js实现（基于Express） #

首先安装依赖：

npm install express nlpcloud cors

创建后端文件server.js：

const express = require('express');
const NLPCloudClient = require('nlpcloud');
const cors = require('cors');
const app = express();

// 跨域支持（前后端端口不同时启用，同域可省略）
app.use(cors());
// 解析JSON格式的请求体
app.use(express.json());

// 初始化NLPCloud客户端
const client = new NLPCloudClient('paraphrase-multilingual-mpnet-base-v2', 'your-api-key-here');

// 处理前端提交请求
app.post('/submit', async (req, res) => {
  try {
    // 提取前端发送的两个短语
    const { inputPhrase, targetPhrase } = req.body;

    // 调用NLPCloud语义相似度接口
    const response = await client.semanticSimilarity([inputPhrase, targetPhrase]);
    // 提取相似度分数（保留4位小数）
    const similarityScore = response.data[0].score.toFixed(4);

    // 返回结果给前端
    res.json({ similarityScore });
  } catch (error) {
    console.error('NLP计算出错:', error);
    res.status(500).json({ error: '相似度计算失败' });
  }
});

// 托管前端静态文件（如果前端文件放在public目录下，同域部署用）
// app.use(express.static('public'));

// 启动服务器
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`服务器运行在 http://localhost:${PORT}`);
});

3. 运行与测试 #

1. 若用同域部署，将前端HTML/CSS/JS文件放入public目录；跨域部署则保持前端独立运行，确保后端启用cors
2. 启动后端：node server.js
3. 打开前端页面提交表单，即可看到页面展示计算后的相似度分数

关键注意事项 #

• API密钥必须放在后端，绝对不能暴露在前端代码中
• 用async/await处理异步请求，比链式then更易维护和排查错误
• 后端必须添加express.json()中间件，否则无法解析前端发送的JSON数据

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