From d1cdfdb1cf228eadc4b32a12728c7633bf70ef4f Mon Sep 17 00:00:00 2001 From: mapan-nju <2246839805@qq.com> Date: Wed, 20 Nov 2024 16:22:34 +0800 Subject: [PATCH 1/3] a --- app/newpage/layout.tsx | 19 ++++++++ app/newpage/page.tsx | 95 +++++++++++++++++++++++++++++++++++++ app/newpage/search/page.tsx | 74 +++++++++++++++++++++++++++++ app/newpage/styles.css | 0 4 files changed, 188 insertions(+) create mode 100644 app/newpage/layout.tsx create mode 100644 app/newpage/page.tsx create mode 100644 app/newpage/search/page.tsx create mode 100644 app/newpage/styles.css diff --git a/app/newpage/layout.tsx b/app/newpage/layout.tsx new file mode 100644 index 0000000..30e72fa --- /dev/null +++ b/app/newpage/layout.tsx @@ -0,0 +1,19 @@ +import '@/app/ui/global.css'; + + +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..0e61643 --- /dev/null +++ b/app/newpage/page.tsx @@ -0,0 +1,95 @@ +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..267b632 --- /dev/null +++ b/app/newpage/search/page.tsx @@ -0,0 +1,74 @@ +"use client"; + +import { useState } from 'react'; + +export default function Home() { + //const [query,] = useState(''); //const [query, setQuery] = useState(''); + // 使用假数据进行测试,const [results, setResults] = useState([ + const [results,] = 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..e69de29 From a0c67ea80c32992a4b68d61cdf55a728dc8fa269 Mon Sep 17 00:00:00 2001 From: mapan-nju <2246839805@qq.com> Date: Sun, 1 Dec 2024 16:58:58 +0800 Subject: [PATCH 2/3] Fixed the bug with the transparency of the version list, changed the overall page routing and API interface structure by adding namespaces to the routes. Implemented pagination for search results --- .../[version]/dependencies/route.tsx | 8 +-- .../[version]/dependents/route.tsx | 6 +- .../[cratename]/[version]/route.tsx | 6 +- .../[nsbehind]}/[cratename]/route.tsx | 0 .../[name]/[version]/dependencies/page.tsx | 70 ++++-------------- .../[name]/[version]/dependents/page.tsx | 46 ++++-------- .../[nsbehind]}/[name]/[version]/page.tsx | 72 ++++++------------- app/homepage/search/page.tsx | 60 ++++++++++++---- app/lib/all_interface.ts | 4 +- 9 files changed, 111 insertions(+), 161 deletions(-) rename app/api/crates/{ => [nsfront]/[nsbehind]}/[cratename]/[version]/dependencies/route.tsx (72%) rename app/api/crates/{ => [nsfront]/[nsbehind]}/[cratename]/[version]/dependents/route.tsx (73%) rename app/api/crates/{ => [nsfront]/[nsbehind]}/[cratename]/[version]/route.tsx (73%) rename app/api/crates/{ => [nsfront]/[nsbehind]}/[cratename]/route.tsx (100%) rename app/homepage/{ => [nsfront]/[nsbehind]}/[name]/[version]/dependencies/page.tsx (72%) rename app/homepage/{ => [nsfront]/[nsbehind]}/[name]/[version]/dependents/page.tsx (75%) rename app/homepage/{ => [nsfront]/[nsbehind]}/[name]/[version]/page.tsx (82%) diff --git a/app/api/crates/[cratename]/[version]/dependencies/route.tsx b/app/api/crates/[nsfront]/[nsbehind]/[cratename]/[version]/dependencies/route.tsx similarity index 72% rename from app/api/crates/[cratename]/[version]/dependencies/route.tsx rename to app/api/crates/[nsfront]/[nsbehind]/[cratename]/[version]/dependencies/route.tsx index b1484af..7d2f549 100644 --- a/app/api/crates/[cratename]/[version]/dependencies/route.tsx +++ b/app/api/crates/[nsfront]/[nsbehind]/[cratename]/[version]/dependencies/route.tsx @@ -1,12 +1,12 @@ -type Params = Promise<{ cratename: string, version: string }> -import { NextRequest, NextResponse } from "next/server"; +import { NextRequest, NextResponse } from "next/server"; +type Params = Promise<{ nsfront: string, nsbehind: string, cratename: string, version: string }> export async function GET(req: NextRequest, props: { params: Params }) { try { const params = await props.params - const { cratename, version } = params; + const { nsfront, nsbehind, cratename, version } = params; - const externalApiUrl = `http://210.28.134.203:6888/api/crates/${cratename}/${version}/dependencies`; // 替换为你的外部 API URL + const externalApiUrl = `http://210.28.134.203:6888/api/crates/${nsfront}/${nsbehind}/${cratename}/${version}/dependencies`; // 替换为你的外部 API URL const externalRes = await fetch(externalApiUrl); if (!externalRes.ok) { throw new Error('Failed to fetch external data'); diff --git a/app/api/crates/[cratename]/[version]/dependents/route.tsx b/app/api/crates/[nsfront]/[nsbehind]/[cratename]/[version]/dependents/route.tsx similarity index 73% rename from app/api/crates/[cratename]/[version]/dependents/route.tsx rename to app/api/crates/[nsfront]/[nsbehind]/[cratename]/[version]/dependents/route.tsx index ed2ef81..9b09e8f 100644 --- a/app/api/crates/[cratename]/[version]/dependents/route.tsx +++ b/app/api/crates/[nsfront]/[nsbehind]/[cratename]/[version]/dependents/route.tsx @@ -1,10 +1,10 @@ import { NextRequest, NextResponse } from "next/server"; -type Params = Promise<{ cratename: string, version: string }> +type Params = Promise<{ nsfront: string, nsbehind: string, cratename: string, version: string }> export async function GET(req: NextRequest, props: { params: Params }) { try { const params = await props.params - const { cratename, version } = params; - const externalApiUrl = `http://210.28.134.203:6888/api/crates/${cratename}/${version}/dependents`; // 替换为你的外部 API URL + const { nsfront, nsbehind, cratename, version } = params; + const externalApiUrl = `http://210.28.134.203:6888/api/crates/${nsfront}/${nsbehind}/${cratename}/${version}/dependents`; // 替换为你的外部 API URL const externalRes = await fetch(externalApiUrl); if (!externalRes.ok) { throw new Error('Failed to fetch external data'); diff --git a/app/api/crates/[cratename]/[version]/route.tsx b/app/api/crates/[nsfront]/[nsbehind]/[cratename]/[version]/route.tsx similarity index 73% rename from app/api/crates/[cratename]/[version]/route.tsx rename to app/api/crates/[nsfront]/[nsbehind]/[cratename]/[version]/route.tsx index b450bdd..753055e 100644 --- a/app/api/crates/[cratename]/[version]/route.tsx +++ b/app/api/crates/[nsfront]/[nsbehind]/[cratename]/[version]/route.tsx @@ -1,12 +1,12 @@ import { NextRequest, NextResponse } from "next/server"; -type Params = Promise<{ cratename: string, version: string }> +type Params = Promise<{ nsfront: string, nsbehind: string, cratename: string, version: string }> export async function GET(req: NextRequest, props: { params: Params }) { try { const params = await props.params - const { cratename, version } = params; + const { nsfront, nsbehind, cratename, version } = params; - const externalApiUrl = `http://210.28.134.203:6888/api/crates/${cratename}/${version}`; // 替换为你的外部 API URL + const externalApiUrl = `http://210.28.134.203:6888/api/crates/${nsfront}/${nsbehind}/${cratename}/${version}`; // 替换为你的外部 API URL const externalRes = await fetch(externalApiUrl); if (!externalRes.ok) { throw new Error('Failed to fetch external data'); diff --git a/app/api/crates/[cratename]/route.tsx b/app/api/crates/[nsfront]/[nsbehind]/[cratename]/route.tsx similarity index 100% rename from app/api/crates/[cratename]/route.tsx rename to app/api/crates/[nsfront]/[nsbehind]/[cratename]/route.tsx diff --git a/app/homepage/[name]/[version]/dependencies/page.tsx b/app/homepage/[nsfront]/[nsbehind]/[name]/[version]/dependencies/page.tsx similarity index 72% rename from app/homepage/[name]/[version]/dependencies/page.tsx rename to app/homepage/[nsfront]/[nsbehind]/[name]/[version]/dependencies/page.tsx index a844040..cdbfc35 100644 --- a/app/homepage/[name]/[version]/dependencies/page.tsx +++ b/app/homepage/[nsfront]/[nsbehind]/[name]/[version]/dependencies/page.tsx @@ -1,54 +1,27 @@ "use client"; import React, { useEffect, useState } from 'react'; - +import { useParams } from 'next/navigation' import Link from 'next/link'; -import DependencyTable from '../../../../../components/DependencyTable'; +import DependencyTable from '../../../../../../../components/DependencyTable'; import { dependenciesInfo } from '@/app/lib/all_interface'; -import { useSearchParams } from 'next/navigation'; - -// const defaultdata = { -// "direct_count": 1, -// "indirect_count": 2, -// "data": [ -// { -// "crate_name": 'unknown', -// "version": 'unknown', -// "relation": 'unknown', -// "license": 'unknown', -// "dependencies": 0, -// }, -// ] -// } - - -// interface DependencyItem { -// crate_name: string; -// version: string; -// relation: string; -// license: string; -// dependencies: number; -// } - - const CratePage = () => { - + const params = useParams(); const [results, setResults] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - const searchParams = useSearchParams(); - const crateName = searchParams.get('crate_name'); // 从 URL 中获取 crate_name 参数 - const version = searchParams.get('version'); // 从 URL 中获取 version 参数 + const crateName = params.name; // 从 URL 中获取 crate_name 参数 + const version = params.version; // 从 URL 中获取 version 参数 useEffect(() => { const fetchCrateData = async () => { try { setError(null); - const response = await fetch(`/api/crates/${crateName}/${version}/dependencies`); + const response = await fetch(`/api/crates/${params.nsfront}/${params.nsbehind}/${params.name}/${params.version}/dependencies`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); @@ -66,11 +39,11 @@ const CratePage = () => { } }; fetchCrateData(); // 调用函数来获取数据 - }, [crateName, version]); // 依赖项数组，确保在 crateName 或 version 改变时重新获取数据 + }, [params.name, params.version, params.nsfront, params.nsbehind]); // 依赖项数组，确保在 crateName 或 version 改变时重新获取数据 if (loading) return
Loading...
; if (error) return
Error: {error}
; - console.log('dependencyyyyyyyyyyyyyyy', results?.data); + // console.log('dependencyyyyyyyyyyyyyyy', results?.data); return (
{/* Existing header and search */} @@ -130,25 +103,16 @@ const CratePage = () => {
); diff --git a/app/lib/all_interface.ts b/app/lib/all_interface.ts index f8f0fec..d6eb8cd 100644 --- a/app/lib/all_interface.ts +++ b/app/lib/all_interface.ts @@ -8,7 +8,9 @@ export interface searchResult { { "name": string, "version": string, - "date": number + "date": number, + "nsfront": string, + "nsbehind": string, }, ] } From 6c0149d0a25f95c61d759862ac30edf167c6e46f Mon Sep 17 00:00:00 2001 From: mapan-nju <2246839805@qq.com> Date: Sun, 1 Dec 2024 19:48:32 +0800 Subject: [PATCH 3/3] Fixed the bug with the transparency of the version list, changed the overall page routing and API interface structure by adding namespaces to the routes. Implemented pagination for search results. --- app/homepage/page.tsx | 124 +++++++++++++++++++++++------------------- 1 file changed, 67 insertions(+), 57 deletions(-) diff --git a/app/homepage/page.tsx b/app/homepage/page.tsx index d09f9c6..b209110 100644 --- a/app/homepage/page.tsx +++ b/app/homepage/page.tsx @@ -3,11 +3,11 @@ import React, { useState } from 'react'; import '@/app/ui/global.css'; import Link from 'next/link'; import VulnerabilityList from '@/components/CveList'; +import { message } from 'antd'; - -const HomePage = () => { +const HomePage: React.FC = () => { const [searchQuery, setSearchQuery] = useState(''); - + const [messageApi, contextHolder] = message.useMessage();//antd-message的hooks调用 const handleKeyPress = (e: { key: string; }) => { // 检查是否按下了回车键 if (e.key === 'Enter') { @@ -17,7 +17,11 @@ const HomePage = () => { }; const performSearch = () => { - // 这里可以添加任何其他逻辑，比如验证搜索内容 + if (!searchQuery || searchQuery.trim() === '') { + + messageApi.warning('请输入搜索内容'); + //alert("请输入搜索内容"); // 可选：提示用户输入内容 + } if (searchQuery.trim()) { // 使用 Link 跳转到搜索页面 window.location.href = `/homepage/search?crate_name=${searchQuery}`; @@ -28,72 +32,78 @@ const HomePage = () => { return ( //绿色渐变 - < 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.

-
- setSearchQuery(e.target.value)} // 更新搜索内容 - onKeyDown={handleKeyPress} - /> - + {contextHolder} + < 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.

+
+ setSearchQuery(e.target.value)} // 更新搜索内容 + onKeyDown={handleKeyPress} + /> + {/* - - + }}> */} + + {/* */} +
-
- {/* 分割线部分 */} -
+ {/* 分割线部分 */} +
- + - {/* 一些介绍 */} -
-
-

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.

-
+ {/* 一些介绍 */} +
+
+

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.

-
+
+

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.

+
+

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.

+
-
-
+
+ ); }