chore: request database 4 test

Author: taosin

server/db/notes.db

@@ -1,19 +1,23 @@
 import React from 'react';
-import { Card } from 'antd';
+import { Card, Button } from 'antd';
 import styles from './NoteCard.module.scss';
 
 interface NoteCardProps {
 	title: string;
 	content: string;
 	date: string;
+	onDelete: () => void;
 }
 
-const NoteCard: React.FC<NoteCardProps> = ({ title, content, date }) => {
+const NoteCard: React.FC<NoteCardProps> = ({ title, content, date, onDelete }) => {
 	return (
 		<Card className={styles.noteCard} hoverable>
 			<h3>{title}</h3>
 			<p>{content}</p>
-			<small>{date}</small>
+			<small>{new Date(date).toLocaleString()}</small>
+			<Button type="link" danger onClick={onDelete}>
+				删除
+			</Button>
 		</Card>
 	);
 };

web/src/components/NoteCard/index.tsx

@@ -1,44 +1,40 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import NoteCard from '../NoteCard';
+import { fetchNotes, deleteNote } from '../../utils/api';
 import styles from './NoteList.module.scss';
 
 interface Note {
 	id: number;
 	title: string;
 	content: string;
-	date: string;
+	created_at: string;
 }
 
-const notes: Note[] = [
-	{
-		id: 1,
-		title: '工作笔记',
-		content: '今天完成了项目需求分析...',
-		date: '2023-10-01',
-	},
-	{
-		id: 2,
-		title: '学习笔记',
-		content: '学习了 React Hooks 的使用...',
-		date: '2023-10-02',
-	},
-	{
-		id: 3,
-		title: '生活笔记',
-		content: '周末去公园散步，放松心情...',
-		date: '2023-10-03',
-	},
-];
-
 const NoteList: React.FC = () => {
+	const [notes, setNotes] = useState<Note[]>([]);
+
+	useEffect(() => {
+		const loadNotes = async () => {
+			const data = await fetchNotes();
+			setNotes(data);
+		};
+		loadNotes();
+	}, []);
+
+	const handleDelete = async (id: number) => {
+		await deleteNote(id);
+		setNotes(notes.filter((note) => note.id !== id));
+	};
+
 	return (
 		<div className={styles.noteList}>
 			{notes.map((note) => (
 				<NoteCard
 					key={note.id}
 					title={note.title}
 					content={note.content}
-					date={note.date}
+					date={note.created_at}
+					onDelete={() => handleDelete(note.id)}
 				/>
 			))}
 		</div>

web/src/components/NoteList/index.tsx

@@ -0,0 +1,18 @@
+import axios from 'axios';
+
+const API_BASE_URL = 'http://localhost:9999/api/notes';
+
+export const fetchNotes = async () => {
+	const response = await axios.get(API_BASE_URL);
+	return response.data;
+};
+
+export const createNote = async (title: string, content: string) => {
+	const response = await axios.post(API_BASE_URL, { title, content });
+	return response.data;
+};
+
+export const deleteNote = async (id: number) => {
+	const response = await axios.delete(`${API_BASE_URL}/${id}`);
+	return response.data;
+};