Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 258e25a

Browse files
feat(登录功能): 🚀 优化请求公共方法、结合apifox完成模拟登录功能
1 parent 7f8187b commit 258e25a

File tree

10 files changed

+144
-89
lines changed

10 files changed

+144
-89
lines changed

‎.env.development‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,5 @@ VITE_API_URL = /api
1919

2020
# 开发环境跨域代理,支持配置多个
2121
# VITE_PROXY = [["/api","https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e"]]
22-
VITE_PROXY = [["/api","https://www.fastmock.site/mock/f81e8333c1a9276214bcdbc170d9e0a0"]]
22+
VITE_PROXY = [["/api","https://mock.apifox.com/m1/3705594-0-default"]]
2323
# VITE_PROXY = [["/api-easymock","https://mock.mengxuegu.com"],["/api-fastmock","https://www.fastmock.site"]]

‎src/api/index.ts‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,6 @@ const config = {
2121
withCredentials: true
2222
};
2323

24-
// 错误提示
25-
const [messageApi] = message.useMessage();
26-
const showMsg = (content: string) => {
27-
messageApi.open({
28-
type: "error",
29-
content
30-
});
31-
};
32-
3324
class RequestHttp {
3425
service: AxiosInstance;
3526
constructor(config: AxiosRequestConfig) {
@@ -77,13 +68,13 @@ class RequestHttp {
7768
if (data.code === ResultEnum.OVERDUE) {
7869
store.dispatch(setToken(""));
7970
window.location.hash = "/login";
80-
showMsg(data.message);
71+
message.success(data.message);
8172
return Promise.reject(data);
8273
}
8374

8475
// 全局错误信息拦截
8576
if (data.code && data.code !== ResultEnum.SUCCESS) {
86-
showMsg(data.message);
77+
message.error(data.message);
8778
return Promise.reject(data);
8879
}
8980
// 请求成功
@@ -92,9 +83,9 @@ class RequestHttp {
9283
async (error: AxiosError) => {
9384
NProgress.done();
9485
// 网络超时
95-
if (error.message && error.message.indexOf("timeout") !== -1) showMsg("请求超时,请稍后再试");
86+
if (error.message && error.message.indexOf("timeout") !== -1) message.error("请求超时,请稍后再试");
9687
// 网络错误
97-
if (error.message && error.message.indexOf("Network Error") !== -1) showMsg("网络错误,请稍后再试");
88+
if (error.message && error.message.indexOf("Network Error") !== -1) message.error("网络错误,请稍后再试");
9889
const { response } = error;
9990
// 根据服务器响应的错误状态码,做不同的处理
10091
if (response) checkStatus(response.status);

‎src/api/modules/login.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import http from "@/api";
2+
import { LoginSpace } from "@/api/type";
3+
4+
/**
5+
* @description 登录接口
6+
*
7+
*/
8+
export const login = (data: LoginSpace.reqLogin) => {
9+
return http.post("/user/login", data);
10+
};

‎src/api/type/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,11 @@ export interface Result {
77
export interface ResultData<T = any> extends Result {
88
data: T;
99
}
10+
11+
//登录模块
12+
export namespace LoginSpace {
13+
export interface reqLogin {
14+
username: string;
15+
password: string;
16+
}
17+
}

‎src/api/utils/checkStatus.ts‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
import { message } from "antd";
22

3-
const [messageApi] = message.useMessage();
4-
const showMsg = (content: string) => {
5-
messageApi.open({
6-
type: "error",
7-
content
8-
});
9-
};
10-
113
/**
124
* @description: 校验网络请求状态码
135
* @param {Number} status
@@ -16,36 +8,36 @@ const showMsg = (content: string) => {
168
export const checkStatus = (status: number) => {
179
switch (status) {
1810
case 400:
19-
showMsg("请求失败!请您稍后重试");
11+
message.error("请求失败!请您稍后重试");
2012
break;
2113
case 401:
22-
showMsg("登录失效!请您重新登录");
14+
message.error("登录失效!请您重新登录");
2315
break;
2416
case 403:
25-
showMsg("当前账号无权限访问!");
17+
message.error("当前账号无权限访问!");
2618
break;
2719
case 404:
28-
showMsg("你所访问的资源不存在!");
20+
message.error("你所访问的资源不存在!");
2921
break;
3022
case 405:
31-
showMsg("请求方式错误!请您稍后重试");
23+
message.error("请求方式错误!请您稍后重试");
3224
break;
3325
case 408:
34-
showMsg("请求超时!请您稍后重试");
26+
message.error("请求超时!请您稍后重试");
3527
break;
3628
case 500:
37-
showMsg("服务异常!");
29+
message.error("服务异常!");
3830
break;
3931
case 502:
40-
showMsg("网关错误!");
32+
message.error("网关错误!");
4133
break;
4234
case 503:
43-
showMsg("服务不可用!");
35+
message.error("服务不可用!");
4436
break;
4537
case 504:
46-
showMsg("网关超时!");
38+
message.error("网关超时!");
4739
break;
4840
default:
49-
showMsg("请求失败!");
41+
message.error("请求失败!");
5042
}
5143
};

‎src/components/layouts/components/Header/index.tsx‎

Lines changed: 75 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from "react";
22
import { useNavigate } from "react-router-dom";
3-
import { Layout, Button, Tooltip, Dropdown, Avatar, theme } from "antd";
3+
import { Layout, Button, Tooltip, Dropdown, Avatar, theme,Modal } from "antd";
44
import type { MenuProps } from "antd";
55
import { MenuUnfoldOutlined, SkinOutlined, MenuFoldOutlined, UserOutlined, FontSizeOutlined } from "@ant-design/icons";
66

@@ -37,7 +37,7 @@ function Head() {
3737
key: "4",
3838
label: <span>退出登录</span>,
3939
onClick: () => {
40-
navigate("/login",{replace: true});
40+
setIsModalOpen(true);
4141
}
4242
}
4343
];
@@ -96,60 +96,84 @@ function Head() {
9696
dispatch(updateCollapsed(!isCollapsed));
9797
};
9898

99+
const [isModalOpen, setIsModalOpen] = useState(false);
100+
101+
// 弹框
102+
const handleOk = () => {
103+
navigate("/login", { replace: true });
104+
};
105+
106+
const handleCancel = () => {
107+
setIsModalOpen(false);
108+
};
109+
99110
return (
100-
<Header className="header flx-justify-between">
101-
<Button
102-
type="text"
103-
icon={isCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
104-
onClick={collapsedFn}
105-
style={{
106-
fontSize: "16px",
107-
width: 64,
108-
height: 64
109-
}}
110-
size="large"
111-
/>
112-
<div className="func-box flx-center">
113-
{/* <Tooltip placement="bottom" title="全屏"> */}
114-
<FullScreen />
115-
{/* </Tooltip> */}
111+
<>
112+
{/* 弹框 */}
113+
<Modal title="温馨提示" cancelText="取消" okText="确定" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
114+
<p>您是否确认退出登录?</p>
115+
</Modal>
116116

117-
{/* 国际化配置 */}
118-
<Dropdown menu={{ items: languageItems }} trigger={["hover"]} placement="bottom" arrow>
119-
{/* <Tooltip placement="left" title="国际化配置"> */}
120-
<div className="flx-center">
121-
<SvgIcon
122-
name="language"
123-
iconStyle={{ height: "22px", width: "22px", marginRight: "15px", cursor: "pointer", color: "var(--yz-svg-color)" }}
124-
/>
125-
</div>
117+
<Header className="header flx-justify-between">
118+
<Button
119+
type="text"
120+
icon={isCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
121+
onClick={collapsedFn}
122+
style={{
123+
fontSize: "16px",
124+
width: 64,
125+
height: 64
126+
}}
127+
size="large"
128+
/>
129+
<div className="func-box flx-center">
130+
{/* <Tooltip placement="bottom" title="全屏"> */}
131+
<FullScreen />
126132
{/* </Tooltip> */}
127-
</Dropdown>
128133

129-
{/* 组件大小 */}
130-
<Dropdown menu={{ items: compItems }} trigger={["hover"]} placement="bottom" arrow>
131-
{/* <Tooltip placement="left" title="组件尺寸配置"> */}
132-
<FontSizeOutlined className="icon" />
133-
{/* </Tooltip> */}
134-
</Dropdown>
134+
{/* 国际化配置 */}
135+
<Dropdown menu={{ items: languageItems }} trigger={["hover"]} placement="bottom" arrow>
136+
{/* <Tooltip placement="left" title="国际化配置"> */}
137+
<div className="flx-center">
138+
<SvgIcon
139+
name="language"
140+
iconStyle={{
141+
height: "22px",
142+
width: "22px",
143+
marginRight: "15px",
144+
cursor: "pointer",
145+
color: "var(--yz-svg-color)"
146+
}}
147+
/>
148+
</div>
149+
{/* </Tooltip> */}
150+
</Dropdown>
135151

136-
{/* 主题配置 */}
137-
<Tooltip placement="bottom" title="主题配置">
138-
<SkinOutlined
139-
className="icon"
140-
onClick={() => {
141-
setOpen(true);
142-
}}
143-
/>
144-
</Tooltip>
145-
{/* 个人信息 */}
146-
<p className="username ellipsis">Yangzi</p>
147-
<Dropdown menu={{ items }} trigger={["hover"]} placement="bottom" arrow>
148-
<Avatar className="icon avatar" style={{ backgroundColor: token.colorPrimary }} icon={<UserOutlined />} />
149-
</Dropdown>
150-
</div>
151-
<ThemeComp open={open} close={close}></ThemeComp>
152-
</Header>
152+
{/* 组件大小 */}
153+
<Dropdown menu={{ items: compItems }} trigger={["hover"]} placement="bottom" arrow>
154+
{/* <Tooltip placement="left" title="组件尺寸配置"> */}
155+
<FontSizeOutlined className="icon" />
156+
{/* </Tooltip> */}
157+
</Dropdown>
158+
159+
{/* 主题配置 */}
160+
<Tooltip placement="bottom" title="主题配置">
161+
<SkinOutlined
162+
className="icon"
163+
onClick={() => {
164+
setOpen(true);
165+
}}
166+
/>
167+
</Tooltip>
168+
{/* 个人信息 */}
169+
<p className="username ellipsis">Yangzi</p>
170+
<Dropdown menu={{ items }} trigger={["hover"]} placement="bottom" arrow>
171+
<Avatar className="icon avatar" style={{ backgroundColor: token.colorPrimary }} icon={<UserOutlined />} />
172+
</Dropdown>
173+
</div>
174+
<ThemeComp open={open} close={close}></ThemeComp>
175+
</Header>
176+
</>
153177
);
154178
}
155179

‎src/utils/common.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,17 @@ export function debounce(fn: Function, delay: number) {
1414
}, delay);
1515
};
1616
}
17+
18+
/**
19+
* @description 获取当前时间对应的提示语
20+
* @returns {String}
21+
*/
22+
export function getTimeState() {
23+
let timeNow = new Date();
24+
let hours = timeNow.getHours();
25+
if (hours >= 6 && hours <= 10) return `早上好 ⛅`;
26+
if (hours >= 10 && hours <= 14) return `中午好 🌞`;
27+
if (hours >= 14 && hours <= 18) return `下午好 🌞`;
28+
if (hours >= 18 && hours <= 24) return `晚上好 🌛`;
29+
if (hours >= 0 && hours <= 6) return `凌晨好 🌛`;
30+
}

‎src/utils/getEnv.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ export const createProxy = (proxy: proxyList = []) => {
1414
const httpsRE = /^https:\/\//;
1515
const isHttps = httpsRE.test(target);
1616
result[prefix] = {
17+
target: target,
1718
changeOrigin: true,
1819
ws: true,
19-
rewrite: path => path.replace(new RegExp(`^${prefix}`), "/"),
20+
rewrite: path => path.replace(new RegExp(`^${prefix}`), ""),
2021
...(isHttps ? { secure: false } : {})
2122
};
2223
}

‎src/views/login/index.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,37 @@
1-
import { Form, Button, Input, theme } from "antd";
1+
import { Form, Button, Input, theme,notification } from "antd";
22
import { UserOutlined, LockOutlined } from "@ant-design/icons";
33
import { ValidateStatus } from "antd/es/form/FormItem";
44
import { useNavigate } from "react-router-dom";
55

66
import "./index.less";
77
import LoginBg from "./component/bg";
88
import { useState } from "react";
9+
import { login } from "@/api/modules/login";
10+
import { LoginSpace } from "@/api/type";
11+
import { getTimeState } from "@/utils/common";
912

1013
const { useToken } = theme;
1114

1215
function Login() {
1316
const navigate = useNavigate();
14-
const onFinish = (values: any) => {
17+
const onFinish = async(values: LoginSpace.reqLogin) => {
1518
let { username, password } = values;
16-
19+
// 输入框校验
1720
username ? setUsernameStatus("") : setUsernameStatus("error");
1821
password ? setPasswordStatus("") : setPasswordStatus("error");
1922

20-
if (username && password) navigate("/dashboard/index", { replace: true });
23+
// 登录
24+
if (username && password) {
25+
await login({ username, password });
26+
notification.success({
27+
message: getTimeState(),
28+
description: "登录成功",
29+
placement: "topRight",
30+
duration: 3
31+
});
32+
// 跳转首页
33+
navigate("/dashboard/index", { replace: true });
34+
}
2135
};
2236
const { token } = useToken();
2337

‎vite.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { createProxy, wrapperEnv } from "./src/utils/getEnv";
1111
export default defineConfig((mode: ConfigEnv): UserConfig => {
1212
const env = loadEnv(mode.mode, process.cwd());
1313
const ViteEnv = wrapperEnv(env);
14+
console.log(createProxy(ViteEnv.VITE_PROXY));
1415

1516
return {
1617
// 服务配置

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /