如何将Python分析的数据通过Node.js传递给Angular服务并展示？

第一步：优化Node.js后端接口 #

你的Node.js代码已能获取Python输出的数据，但需确保返回标准JSON格式，同时处理跨域问题（Angular默认运行在4200端口，与Node的8000端口存在跨域）：

1. 安装跨域依赖：

npm install cors

2. 修改Node.js代码：

const express = require('express')
const { spawn } = require('child_process')
const cors = require('cors')
const app = express()
const port = 8000

app.use(cors()) // 启用跨域支持

app.get('/api/python-data', (req, res) => { // 使用语义化接口路径
  let largeDataSet = []
  const python = spawn('python', ['test.py'])

  // 收集Python脚本输出
  python.stdout.on('data', function (data) {
    largeDataSet.push(data)
  })

  // 处理Python脚本退出事件
  python.on('close', (code) => {
    console.log(`子进程退出码：${code}`)
    try {
      // 拼接数据并解析为JSON
      const jsonData = JSON.parse(largeDataSet.join(''))
      res.json(jsonData) // 返回标准JSON响应
    } catch (err) {
      console.error('解析Python输出JSON失败：', err)
      res.status(500).json({ error: '数据解析失败' })
    }
  })

  // 捕获Python脚本错误输出
  python.stderr.on('data', (data) => {
    console.error('Python脚本执行出错：', data.toString())
    res.status(500).json({ error: 'Python脚本执行出错' })
  })
})

app.listen(port, () => {
  console.log(`服务运行在端口 ${port}!`)
})

第二步：创建Angular数据服务 #

在Angular项目中生成数据服务，用于调用Node后端接口：

1. 生成服务：

ng generate service data

2. 修改data.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'http://localhost:8000/api/python-data';

  constructor(private http: HttpClient) { }

  getPythonData(): Observable<any> {
    return this.http.get(this.apiUrl);
  }
}

第三步：在Angular组件中获取并展示数据 #

以app.component.ts为例：

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  pythonData: any;
  errorMessage: string = '';

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.getPythonData().subscribe({
      next: (data) => {
        this.pythonData = data;
      },
      error: (err) => {
        this.errorMessage = '获取数据失败：' + err.message;
      }
    });
  }
}

在app.component.html中渲染数据：

<h2>Python生成的JSON数据</h2>
<div *ngIf="errorMessage" style="color: red;">{{ errorMessage }}</div>
<pre *ngIf="pythonData">{{ pythonData | json }}</pre>

关键注意事项 #

• 确保Python脚本test.py输出合法JSON格式，示例：

import json

data = {"title": "测试数据集", "list": ["item1", "item2", "item3"]}
print(json.dumps(data))

• 启动Node服务：node server.js（假设你的Node文件名为server.js）
• 启动Angular项目：ng serve，访问http://localhost:4200即可查看数据

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