feat:login

2024-11-21 22:48:47 +08:00 · 2024-11-21 22:48:47 +08:00 · 51cb4a47cc
parent e0c32ad9bc
commit 51cb4a47cc
7 changed files with 73 additions and 50 deletions
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,4 @@
+#  前缀为NEXT_PUBLIC_才可以被浏览器使用
+NEXT_PUBLIC_TODO_REQUEST_URL=http://localhost:8090
+NEXT_PUBLIC_SECURITY_REQUEST_URL=http://localhost:8091
+NEXT_PUBLIC_PRIVATE_KEY=
--- a/.env.production
+++ b/.env.production
@ -0,0 +1 @@
+NEXT_PUBLIC_TODO_REQUEST_URL=http://taskmanagerserver.com:8090
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@ -14,9 +14,11 @@ import {
    ProFormCheckbox,
    ProFormText,
 } from '@ant-design/pro-components';
-import { Button, Divider, Space, Tabs, message, theme } from 'antd';
-import type { CSSProperties } from 'react';
-import { useState } from 'react';
+import {Button, Divider, Space, Tabs, message, theme} from 'antd';
+import type {CSSProperties} from 'react';
+import {useState} from 'react';
+import {LoginObject} from "@/lib/login/definitions";
+import {httpReq} from "@/utils/axiosReq";

 type LoginType = 'phone' | 'account';

@ -29,7 +31,7 @@ const iconStyles: CSSProperties = {

 const Page = () => {
    const [loginType, setLoginType] = useState<LoginType>('phone');
-    const { token } = theme.useToken();
+    const {token} = theme.useToken();
    return (
        <div
            style={{
@ -58,6 +60,7 @@ const Page = () => {
                    // title: '活动标题，可配置图片',
                    // subTitle: '活动介绍说明文字',
                    // action: (
+                    // action: (
                    //     <Button
                    //         size="large"
                    //         style={{
@ -71,23 +74,28 @@ const Page = () => {
                    //     </Button>
                    // ),
                }}
+                onFinish={(formData:LoginObject)=>{
+                    console.log("登录信息："+formData.username+";"+formData.password)
+                    httpReq.post(process.env.NEXT_PUBLIC_SECURITY_REQUEST_URL+"/stateless/login/username",{
+                        username: formData.username,
+                        password: formData.password
+                    }).then(response=>{
+                        console.log(response)
+                        response.status;
+                        response.data;
+                    })
+                }}
                actions={
-                    <div
-                        style={{
+                    <div style={{
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
-                            flexDirection: 'column',
-                        }}
-                    >
+                            flexDirection: 'column',}}>
                        <Divider plain>
-              <span
-                  style={{
+                        <span style={{
                              color: token.colorTextPlaceholder,
                              fontWeight: 'normal',
-                      fontSize: 14,
-                  }}
-              >
+                              fontSize: 14,}}>
                            其他登录方式
                        </span>
                        </Divider>
@ -104,7 +112,7 @@ const Page = () => {
                                    borderRadius: '50%',
                                }}
                            >
-                                <AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
+                                <AlipayOutlined style={{...iconStyles, color: '#1677FF'}}/>
                            </div>
                            <div
                                style={{
@ -118,7 +126,7 @@ const Page = () => {
                                    borderRadius: '50%',
                                }}
                            >
-                                <TaobaoOutlined style={{ ...iconStyles, color: '#FF6A10' }} />
+                                <TaobaoOutlined style={{...iconStyles, color: '#FF6A10'}}/>
                            </div>
                            <div
                                style={{
@ -132,7 +140,7 @@ const Page = () => {
                                    borderRadius: '50%',
                                }}
                            >
-                                <WeiboOutlined style={{ ...iconStyles, color: '#1890ff' }} />
+                                <WeiboOutlined style={{...iconStyles, color: '#1890ff'}}/>
                            </div>
                        </Space>
                    </div>
@ -143,8 +151,8 @@ const Page = () => {
                    activeKey={loginType}
                    onChange={(activeKey) => setLoginType(activeKey as LoginType)}
                >
-                    <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
-                    <Tabs.TabPane key={'phone'} tab={'手机号登录'} />
+                    <Tabs.TabPane key={'account'} tab={'账号密码登录'}/>
+                    <Tabs.TabPane key={'phone'} tab={'手机号登录'}/>
                </Tabs>
                {loginType === 'account' && (
                    <>
@ -278,7 +286,7 @@ const Page = () => {
 export default () => {
    return (
        <ProConfigProvider dark>
-            <Page />
+            <Page/>
        </ProConfigProvider>
    );
 };
--- a/src/lib/login/definitions.ts
+++ b/src/lib/login/definitions.ts
@ -0,0 +1,6 @@
+export type LoginObject={
+    username:string;
+    password:string;
+    mobile:string;
+    captcha:string;
+}
--- a/src/lib/placeholder-data.js
+++ b/src/lib/placeholder-data.js
@ -1,14 +0,0 @@
-const invoices = [
-    {
-        customer_id: customers[0].id,
-        amount: 15795,
-        status: 'pending',
-        date: '2022-12-06',
-    },
-    {
-        customer_id: customers[1].id,
-        amount: 20348,
-        status: 'pending',
-        date: '2022-11-14',
-    },
-];
--- a/src/lib/task/project/data.tsx
+++ b/src/lib/task/project/data.tsx
@ -1,13 +1,13 @@
 import {unstable_noStore as noStore} from 'next/cache';
-import axios, {AxiosResponse} from "axios";
+import {AxiosResponse} from "axios";
+import {httpReq} from "@/utils/axiosReq";
 import {DataType, DictType, ResponseVO, ResultPage} from "@/lib/definitions";
 export async function getTaskTreeResult(requestParam:string): Promise<ResponseVO<ResultPage<DataType>>> {
    noStore();
    try {
-
        // 使用 Axios 发送 POST 请求获取数据
-        const response: AxiosResponse<ResponseVO<ResultPage<DataType>>> = await axios.get(
-            'http://taskmanagerserver.com:8090/search/task_message_tree?search='+encodeURIComponent(requestParam));
+        const response: AxiosResponse<ResponseVO<ResultPage<DataType>>> = await httpReq.get(
+            process.env.NEXT_PUBLIC_TODO_REQUEST_URL+'/search/task_message_tree?search='+encodeURIComponent(requestParam));
        // 从响应中提取数据并返回
        console.log("response.data",response.data)
        return response.data;
@ -22,8 +22,8 @@ export async function commonUpdate(requestParam:any): Promise<ResponseVO<string>
    noStore();
    try {
        // 使用 Axios 发送 PUT 请求获取数据
-        const response: AxiosResponse<ResponseVO<string>> = await axios.put(
-            'http://taskmanagerserver.com:8090/search/task_message_tree',requestParam);
+        const response: AxiosResponse<ResponseVO<string>> = await httpReq.put(
+            process.env.NEXT_PUBLIC_TODO_REQUEST_URL+'/search/task_message_tree',requestParam);
        // 从响应中提取数据并返回
        return response.data;
    } catch (error) {
@ -37,8 +37,8 @@ export async function commonUpdate(requestParam:any): Promise<ResponseVO<string>
 export async function taskTreeResult(): Promise<ResponseVO<ResultPage<DataType>>> {
    noStore();
    try {
-        // 使用 Axios 发送 POST 请求获取数据
-        const response: AxiosResponse<ResponseVO<ResultPage<DataType>>> = await axios.post('http://taskmanagerserver.com:8090/task/tree', {
+        // 使用 httpReq 发送 POST 请求获取数据
+        const response: AxiosResponse<ResponseVO<ResultPage<DataType>>> = await httpReq.post(process.env.NEXT_PUBLIC_TODO_REQUEST_URL+'/task/tree', {
            pageSize: 10,
            pageNumber: 1
        });
@ -55,7 +55,7 @@ export async function getTask(id:number): Promise<ResponseVO<DataType>> {
    noStore();
    try {
        // 使用 Axios 发送 GET 请求获取数据
-        const response: AxiosResponse<ResponseVO<DataType>> = await axios.get('http://taskmanagerserver.com:8090/task/'+id);
+        const response: AxiosResponse<ResponseVO<DataType>> = await httpReq.get(process.env.NEXT_PUBLIC_TODO_REQUEST_URL+'/task/'+id);
        // 从响应中提取数据并返回
        return response.data;
    } catch (error) {
@ -70,7 +70,7 @@ export async function addTask(task:DataType): Promise<ResponseVO<string>> {
    noStore();
    try {
        // 使用 Axios 发送 POST 请求添加数据
-        const response: AxiosResponse<ResponseVO<string>> = await axios.post('http://taskmanagerserver.com:8090/task', task);
+        const response: AxiosResponse<ResponseVO<string>> = await httpReq.post(process.env.NEXT_PUBLIC_TODO_REQUEST_URL+'/task', task);
        // 从响应中提取数据并返回
        return response.data;
    } catch (error) {
@ -84,7 +84,7 @@ export async function updateTask(task:DataType): Promise<ResponseVO<string>> {
    noStore();
    try {
        // 使用 Axios 发送 PUT 请求修改数据
-        const response: AxiosResponse<ResponseVO<string>> = await axios.put('http://taskmanagerserver.com:8090/task', task);
+        const response: AxiosResponse<ResponseVO<string>> = await httpReq.put(process.env.NEXT_PUBLIC_TODO_REQUEST_URL+'/task', task);
        // 从响应中提取数据并返回
        return response.data;
    } catch (error) {
@ -98,7 +98,7 @@ export async function deleteTask(id:number): Promise<ResponseVO<string>> {
    noStore();
    try {
        // 使用 Axios 发送 DELETE 删除数据
-        const response: AxiosResponse<ResponseVO<string>> = await axios.delete('http://taskmanagerserver.com:8090/task/'+id);
+        const response: AxiosResponse<ResponseVO<string>> = await httpReq.delete(process.env.NEXT_PUBLIC_TODO_REQUEST_URL+'/task/'+id);
        // 从响应中提取数据并返回
        return response.data;
    } catch (error) {
--- a/src/utils/axiosReq.ts
+++ b/src/utils/axiosReq.ts
@ -0,0 +1,18 @@
+import axios, {Canceler, CancelToken, CancelTokenSource} from "axios";
+
+
+export const httpReq = axios.create({
+    // cancelToken: new CancelToken(function (cancel:Canceler) {
+    // },),
+    // validateStatus: function (status) {
+    //     return status >= 200 && status < 300; // default
+    // },
+    withCredentials: false,
+})
+// 从cookie获取token
+
+// 创建一个取消令牌
+const cancelTokenSource: CancelTokenSource = axios.CancelToken.source();
+
+httpReq.defaults.headers.common['Accept'] = 'application/json';
+httpReq.interceptors.request.use()
				`@ -0,0 +1 @@`
				`NEXT_PUBLIC_TODO_REQUEST_URL=http://taskmanagerserver.com:8090`