后端用Java实现，前端用.tsx文件实现

在Java后端和TypeScript (tsx) 前端配合的情况下，通常是这样的架构：

**Java后端（Spring Boot 或其他Java框架）**

首先，创建一个Java API，例如使用Spring Boot:

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/files")
public class FileController {

    @GetMapping
    public List<FileDetails> getAllFiles() {
        // 这里假设FileDetails是一个自定义的模型类，包含文件的相关信息
        List<FileDetails> files = getFilesFromBackendService(); // 从数据库或其他源获取文件详情
        return files;
    }

    private List<FileDetails> getFilesFromBackendService() {
        // 实现从数据库、文件系统等获取文件信息的逻辑
        // 返回一个包含文件名、大小、创建时间等属性的对象列表
    }
}

**前端（React应用，tsx 文件）**

import React, { useEffect, useState } from 'react';
import axios from 'axios';

interface FileDetails {
  name: string;
  size: number;
  createdAt: Date;
}

function FileList() {
  const [files, setFiles] = useState<FileDetails[]>([]);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('/api/files');
        setFiles(response.data);
      } catch (error) {
        console.error('Error fetching files:', error);
      }
    }

    fetchData(); // 初始化获取文件列表
  }, []);

  return (
    <div>
      {files.map((file) => (
        <li key={file.name}>
          {file.name} - Size: {file.size} bytes, Created at: {file.createdAt}
        </li>
      ))}
    </div>
  );
}

export default FileList;

在这个例子中，后端通过HTTP GET请求返回文件信息，前端使用`axios`库进行异步请求，并在`useEffect`钩子中处理响应数据。