diff --git a/.eslintrc.json b/.eslintrc.json index 6b10a5b..c65a879 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,6 +1,7 @@ { - "extends": [ - "next/core-web-vitals", - "next/typescript" - ] + "extends": [ + "next/core-web-vitals", + "next/typescript" + ] } + diff --git a/app/api/crates/route.ts b/app/api/crates/route.ts index 9511e04..14d21a9 100644 --- a/app/api/crates/route.ts +++ b/app/api/crates/route.ts @@ -3,13 +3,11 @@ import { NextResponse } from 'next/server'; export async function GET() { 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() { return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 }); } } + diff --git a/app/api/submit/route.ts b/app/api/submit/route.ts index 259df56..041e844 100644 --- a/app/api/submit/route.ts +++ b/app/api/submit/route.ts @@ -1,23 +1,19 @@ import { NextRequest, NextResponse } from 'next/server'; -export async function POST(request: NextRequest) { - 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 }); - } - //解析成功的响应 - const result = await response.json(); + const result = await response.json(); // 确认返回的是 JSON 格式 return NextResponse.json({ message: 'Submission successful', data: result }); } catch { return NextResponse.json({ error: 'An error occurred while submitting data.' }, { status: 500 }); diff --git a/app/newpage/layout.tsx b/app/newpage/layout.tsx new file mode 100644 index 0000000..07f47ae --- /dev/null +++ b/app/newpage/layout.tsx @@ -0,0 +1,19 @@ +import '@/app/ui/global.css'; +import { inter } from '@/app/ui/fonts'; + +export const metadata = { + title: 'cratespro', + description: 'Generated by Next.js', +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + {children} + + ) +} diff --git a/app/newpage/page.tsx b/app/newpage/page.tsx new file mode 100644 index 0000000..d11412f --- /dev/null +++ b/app/newpage/page.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import '@/app/ui/global.css'; + + +const HomePage = () => { + return ( + //紫色渐变 + //
+ // {/* 头部和搜索部分 */} + //
+ //
+ //
open/source/insights
+ // + //
+ //
+ //

Understand your dependencies

+ //

Your software and your users rely not only on the code you write, but also on the code your code depends on, the code that code depends on, and so on.

+ //
+ // + // + //
+ //
+ //
+ + + //绿色渐变 + < div className="min-h-screen bg-gray-900 text-white" > +
+
open/source/insights
+ +
+ {/* 搜索部分 */} +
+

Understand your dependencies

+

Your software and your users rely not only on the code you write, but also on the code your code depends on, the code that code depends on, and so on.

+
+ + +
+
+ + + {/* 分割线部分 */} +
+ + {/* 一些介绍 */} +
+
+

New features in the deps.dev API

+

The deps.dev API, which provides free access to the data that powers this website, now has experimental batch and pull support, as well as a new version that comes with a stability guarantee and deprecation policy.

+

Learn more about the new features on our blog, or get started with the API documentation, and code examples.

+
+ +
+

Seeing the big picture can be difficult—but it shouldn't be

+

The Open Source Insights page for each package shows the full dependency graph and updates it every day. The information provided can help you make informed decisions about using, building, and maintaining your software.

+

With Open Source Insights, you can actually see the dependency graph for a package, then isolate the paths to a particular dependency. Or see whether a vulnerability in a dependency might affect your code. Or compare two versions of a package to see how the dependencies have changed in a new release.

+
+ +
+

How it works

+

The service repeatedly examines sites such as github.com, npmjs.com, and pkg.go.dev to find up-to-date information about open source software packages. Using that information, it builds for each package the full dependency graph from scratch—not just from package lock files—connecting it to the packages it depends on and to those that depend on it. This transitive dependency graph allows problems in any package to be made visible to the owners and users of any software they affect.

+
+
+
+ ); +} + +export default HomePage; diff --git a/app/newpage/search/page.tsx b/app/newpage/search/page.tsx new file mode 100644 index 0000000..95e2299 --- /dev/null +++ b/app/newpage/search/page.tsx @@ -0,0 +1,72 @@ +"use client"; + +import { useState } from 'react'; + +export default function Home() { + const [query, setQuery] = useState(''); + // 使用假数据进行测试 + const [results, setResults] = useState([ + { crate_name: "tokio", version: "1.41.1", date: "2023-01-01" }, + { crate_name: "tokio", version: "0.1.2", date: "2023-02-01" }, + ]); + + const search = async () => { + // 待替换api + const apiUrl = 'api'; + + try { + const response = await fetch(apiUrl, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ query }), + }); + + const data = await response.json(); + setResults(data.results); + } catch (error) { + console.error('Error fetching data:', error); + } + }; + + return ( +
+
+
+
+ open + / + source + / + insights +
+
+ + +
+
+
+ +
+
+ {results.map((item, index) => ( +
+ {item.crate_name} +
Crate {item.version} Published {item.date}
+
+ ))} +
+
+
+ ); +} \ No newline at end of file diff --git a/app/newpage/styles.css b/app/newpage/styles.css new file mode 100644 index 0000000..cf41659 --- /dev/null +++ b/app/newpage/styles.css @@ -0,0 +1,4 @@ +.height-1-3 { + height: 33.3333vh; + /* 使用视口高度的 1/3 */ +} \ No newline at end of file diff --git a/app/programs/page.tsx b/app/programs/page.tsx index 9f3e03e..ddbfaca 100644 --- a/app/programs/page.tsx +++ b/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([]); //从接口获取Rust程序数据 const [cveData, setCveData] = useState([]); //从接口获取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,7 +39,7 @@ 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}`); @@ -43,7 +47,7 @@ const ProgramsPage = () => { 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)) diff --git a/app/ui/acme-logo.tsx b/app/ui/acme-logo.tsx index 8060c0a..1d4ee34 100644 --- a/app/ui/acme-logo.tsx +++ b/app/ui/acme-logo.tsx @@ -4,11 +4,29 @@ import { lusitana } from '@/app/ui/fonts'; export default function AcmeLogo() { return ( +
+ {/*
*/}

Crates Pro

+ +
); } + + diff --git a/app/ui/global.css b/app/ui/global.css index c06d6d6..37a8dc5 100644 --- a/app/ui/global.css +++ b/app/ui/global.css @@ -15,4 +15,4 @@ input[type='number']::-webkit-inner-spin-button { input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; -} +} \ No newline at end of file diff --git a/app/ui/programs/nav-links.tsx b/app/ui/programs/nav-links.tsx index 6885498..0974836 100644 --- a/app/ui/programs/nav-links.tsx +++ b/app/ui/programs/nav-links.tsx @@ -34,21 +34,24 @@ const NavLinks: React.FC = () => { //暂定上传数据类型为react表单类型 const handleSubmit = async (e: React.FormEvent) => { 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) { @@ -70,6 +73,7 @@ const NavLinks: React.FC = () => { return ( <> {contextHolder} + {/* {Home按钮} */} {links.map((link) => { const LinkIcon = link.icon; return ( @@ -89,16 +93,6 @@ const NavLinks: React.FC = () => { ); })} - {/* 提交按钮 */} - {/* */} - - - {/* submit按钮 */}