前端项目实战214-react实现移动端控制界面设置

简介: 前端项目实战214-react实现移动端控制界面设置
import React, { useEffect, useState } from 'react';
import { Input, Button, Form, message } from 'antd';
import "./login.scss"
import { useForm } from 'antd/es/form/Form';
import { UserLogin } from "../sevices/codeing/codeing"
interface ILogin {
    onConfirm:()=>void
}
interface IUserInfo {
    username: string;
    password: string;
}
interface ILoginParams {
    username: string;
    tanant?: string;
    password: string;
}
const Login: React.FC<ILogin> = (props: any) => {
    const [user, setUser] = useState<IUserInfo>({ username: "", password: "" });
    const [spinning, setSpinning] = useState<boolean>(false);
    const [form] = useForm()
    useEffect(() => {
        //注册回车键
        let monitorKeyBoardEvent = (e: KeyboardEvent) => {
            if (e.code === "Enter") {
                handleLogin();
            }
        };
        document.addEventListener<"keydown">("keydown", monitorKeyBoardEvent);
        return () =>
            document.removeEventListener<"keydown">("keydown", monitorKeyBoardEvent);
    });
    const handleLogin = async () => {
        setSpinning(true);
        const data = await form.validateFields()
        const response = await UserLogin(data)
        if (response.code == 200) {
            message.success("登陆成功", 1);
            console.log(response.data,"responseresponse")
            localStorage.setItem("userId",JSON.stringify(response.data.user.userId))
            props.onConfirm()
            setSpinning(true);
        } else {
            setSpinning(false);
            message.warning(response.message);
        }
        console.log(response, "response")
    };
    return (
        <div className='Login'>
            <div className='Login_title'>PDA管理系统</div>
            <div className='Login_form'>
                <Form
                    name="menu"
                    form={form}
                >
                    <Form.Item
                        label="账号"
                        name="account"
                        rules={[{ required: false, message: '请输入账号' }]}
                    >
                        <Input placeholder="请输入账号" />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: false, message: '请输入密码' }]}
                    >
                        <Input placeholder="请输入密码" />
                    </Form.Item>
                </Form>
            </div>
            <div>
                <Button onClick={handleLogin}>登录</Button>
            </div>
        </div>
    );
}
export default Login

image.png

相关文章
|
3月前
|
JSON 前端开发 开发工具
初探在WSL中设置vim前端开发环境
初探在WSL中设置vim前端开发环境
|
5天前
|
移动开发 前端开发 JavaScript
React 表单验证实战
【10月更文挑战第25天】本文介绍了 React 表单验证的常见方法,包括原生 HTML5 验证、自定义验证逻辑和第三方库(如 Formik 和 Yup)的使用。通过具体代码示例,详细讲解了每种方法的实现步骤,并探讨了常见问题和易错点及其解决方法。旨在帮助开发者提高表单验证的有效性和安全性。
34 8
|
11天前
|
前端开发 API
前端界面生成PDF并导出下载
【10月更文挑战第21天】利用合适的第三方库,你可以在前端轻松实现界面生成 PDF 并导出下载的功能,为用户提供更方便的文档分享和保存方式。你还可以根据具体的需求进一步优化和定制生成的 PDF 文件,以满足不同的业务场景要求。
|
21天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
29天前
|
编解码 前端开发 UED
前端:移动端视口配置
移动端视口配置是指针对移动设备浏览器设置视口的宽度、高度和缩放等属性,以确保网页能根据不同的屏幕尺寸和分辨率进行适配,提供更好的用户体验。合理的视口配置是移动优先设计的关键环节。
|
1月前
|
前端开发 开发工具 git
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
29 5
|
1月前
|
前端开发 数据安全/隐私保护
前端技术实战:React Hooks 实现表单验证
【10月更文挑战第1天】前端技术实战:React Hooks 实现表单验证
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
51 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发 定位技术 API
二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom
文章介绍了如何在前端使用高德地图API渲染标记(Marker),并引入自定义图标,同时展示了如何手动设置地图的缩放级别。
173 1
|
2月前
|
前端开发 JavaScript 开发者
现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【9月更文挑战第6天】本文通过实际案例,比较了主流前端框架 Vue.js、React 和 Angular 的特点与优势。Vue.js 以简洁的语法和灵活的组件化架构著称,适合小型到中型项目;React 强调性能和可扩展性,适用于大型应用;Angular 凭借全面的功能和严格架构,适合企业级开发。开发者应根据项目需求和技术栈选择合适的框架。
53 0