前后端连接

Author: martinwq997

app/api/crates/route.ts

@@ -3,13 +3,11 @@ import { NextRequest, NextResponse } from 'next/server';
 export async function GET(req: NextRequest) {
   try {
     // 发送 HTTP 请求获取外部数据
-    const externalApiUrl = 'http://210.28.134.203:6888/crates'; // 替换为你的外部 API URL
+    const externalApiUrl = 'http://210.28.134.203:6888/api/crates'; // 替换为你的外部 API URL
     const externalRes = await fetch(externalApiUrl);
-
     if (!externalRes.ok) {
       throw new Error('Failed to fetch external data');
     }
-
     const externalData = await externalRes.json();
 
     return NextResponse.json(externalData);
@@ -18,3 +16,4 @@ export async function GET(req: NextRequest) {
     return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
   }
 }
+

app/api/submit/route.ts

@@ -1,23 +1,22 @@
 import { NextResponse } from 'next/server';
 
-export async function POST(request: { json: () => any; }) {
-    const apiUrl = process.env.API_URL; // 读取环境变量，获取后端服务的基础 URL
-    const body = await request.json(); // 解析请求体
+export async function POST(request: Request) {
+    const apiUrl = process.env.API_URL; // 读取环境变量
+    const formData = await request.formData(); // 解析请求体
+
+    console.log("Request FormData:", formData);
 
     try {
-        const response = await fetch(`${apiUrl}/submit`, { //向后端发送服务请求
+        const response = await fetch(`${apiUrl}`, {
             method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(body), // 将请求体发送到后端
+            body: formData, // 保持 FormData
         });
-        //请求失败直接返回
+
         if (!response.ok) {
-            return NextResponse.json({ error: 'Failed to submit data' }, { status: 500 });
+            return NextResponse.json({ error: 'Failed to submit data' }, { status: response.status });
         }
-        //解析成功的响应
-        const result = await response.json();
+
+        const result = await response.json(); // 确认返回的是 JSON 格式
         return NextResponse.json({ message: 'Submission successful', data: result });
     } catch (error) {
         return NextResponse.json({ error: 'An error occurred while submitting data.' }, { status: 500 });

app/programs/page.tsx

@@ -13,17 +13,21 @@ interface ObjectData {
 interface CVE {
   id: string;
   description: string;
+
   name: string;
   version: string;
 }
 
 const ProgramsPage = () => {
+
+
+
   const [objects, setObjects] = useState<ObjectData[]>([]); //从接口获取Rust程序数据
   const [cveData, setCveData] = useState<CVE[]>([]); //从接口获取CVE数据
 
   //获取数据
   useEffect(() => {
-    fetch('/api/crates') //这里应调用后端接口：GET http://localhost:6888/api/crates  （？）
+    fetch('/api/crates') //这里应调用nextjs路由
       .then(response => response.json())
       .then(data => {
         console.log('Fetched crates data:', data); //调试输出
@@ -35,15 +39,15 @@ const ProgramsPage = () => {
         }
       });
 
-    fetch('/api/cves') //这里应调用后端接口： GET http://localhost:6888/api/crates/{name} （？）
+    fetch('/api/cves') //这里应调用nextjs路由
       .then(response => {
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
         return response.text();  // 暂时使用 text() 来调试
       })
       .then(text => {
-        console.log('Response text:', text);
+        //console.log('Response text:', text);
         return JSON.parse(text); // 手动解析 JSON
       })
       .then(data => setCveData(data))

app/ui/programs/nav-links.tsx

@@ -36,21 +36,24 @@ const NavLinks: React.FC = () => {
   //暂定上传数据类型为react表单类型
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    const formData = new FormData();
-    if (isGithubLink) {
-      formData.append('githubLink', inputValue);
-    } else if (file) {
-      formData.append('file', file);
-    }
+
 
     try {
+      const formData = new FormData();
+      if (isGithubLink) {
+        formData.append('githubLink', inputValue);
+      } else if (file) {
+        formData.append('file', file);
+      }
+
       //用fetch向服务器发声POST请求，提交用户输入的内容
       const response = await fetch('/api/submit', { //待替换为后端服务API
         method: 'POST',
         //请求体
         body: formData,
       });
-      //console.log('Response:', response); // 输出响应
+      console.log("aaaaaaaaaaaaaaaaaadata ", formData);
+      console.log('Response:', response); // 输出响应
 
       //响应处理，根据响应结果显示提示信息，并重置输入框或关闭弹窗
       if (response.ok) {