feat: 创建路由
This commit is contained in:
parent
7bb611ba17
commit
8fc61a98c6
|
|
@ -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
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { request } from "./base";
|
||||
|
||||
export const login = async (username, password) => {
|
||||
return request("/api/login", "POST", {username, password})
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
@ -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/, ""),
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue