feat: 创建路由

This commit is contained in:
李如威 2025-08-28 10:03:32 +08:00
parent 7bb611ba17
commit 8fc61a98c6
9 changed files with 1677 additions and 13 deletions

View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>

File diff suppressed because it is too large Load Diff

View File

@ -10,6 +10,8 @@
"preview": "vite preview"
},
"dependencies": {
"@ant-design/pro-components": "^2.8.10",
"antd": "^5.27.1",
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-router-dom": "^7.8.2"

25
frontend/src/api/base.js Normal file
View File

@ -0,0 +1,25 @@
export async function request(url, method, data) {
const options = {
method,
headers: {
"Content-Type": "application/json",
},
};
if (data) {
options.body = JSON.stringify(data);
}
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error("Request failed:", error);
throw error;
}
}

7
frontend/src/api/user.js Normal file
View File

@ -0,0 +1,7 @@
import { request } from "./base";
export const login = async (username, password) => {
return request("/api/login", "POST", {username, password})
}

View File

@ -1,15 +1,30 @@
import { createContext, useContext, useState } from "react";
import { createContext, useContext, useEffect, useState } from "react";
import { login as loginToServer } from "../api/user";
const AuthContext = createContext(null);
export function AuthProvider({ children }) {
const token = localStorage.getItem('_token')
const [user, setUser] = useState(null);
const login = (username) => {
setUser({ name: username });
const currentUser = async () => {
}
const login = async (username, password) => {
const res = await loginToServer(username, password);
if (res?.success) {
localStorage.setItem('_token', res.data);
setUser({
token: res?.data?.token,
...res?.data?.user,
})
}
return res;
};
const logout = () => {
localStorage.removeItem('_token')
setUser(null);
};

View File

@ -4,12 +4,19 @@ import './index.css'
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import { AuthProvider } from "./context/AuthContext";
import zhCN from "antd/locale/zh_CN";
import { ConfigProvider } from "antd";
import { ProConfigProvider } from "@ant-design/pro-components";
createRoot(document.getElementById('root')).render(
<StrictMode>
<BrowserRouter>
<AuthProvider>
<App />
<ConfigProvider locale={zhCN}>
<ProConfigProvider>
<App />
</ProConfigProvider>
</ConfigProvider>
</AuthProvider>
</BrowserRouter>
</StrictMode>,

View File

@ -1,5 +1,30 @@
import { LoginFormPage, ProForm, ProFormText } from '@ant-design/pro-components';
import { message } from 'antd';
import { useAuth } from '../context/AuthContext';
import { useEffect } from 'react';
const REQUIRED = [{required: true}]
export default () => {
return <>
<h1>Login</h1>
</>
const { login, user } = useAuth();
console.log(user);
return <div style={{ width: '100vw', height: '100vh'}}>
<LoginFormPage
backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
title="工作流"
onFinish={async (values) => {
const res = await login(values?.username, values?.password);
if (res?.success) {
} else {
message.error(res?.message);
}
}}
>
<ProFormText name="username" label="帐号" rules={REQUIRED} />
<ProFormText.Password name="password" label="密码" rules={REQUIRED}/>
</LoginFormPage>
</div>
}

View File

@ -4,4 +4,13 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://0.0.0.0:8080", // 你的后端地址
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
})