一个简单的登录页面实现

最新推荐文章于 2024-03-19 07:41:56 发布
最新推荐文章于 2024-03-19 07:41:56 发布
阅读量2.3k 收藏 14
点赞数
分类专栏： Web前端 文章标签： javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43717065/article/details/115588746
版权

一、页面效果

1、密码登录
密码登录
2、手机号验证码登录
手机号验证码登录
3、修改密码
修改密码

二、代码

这里只给出了页面实现的代码，具体的前端发送请求，后台接口的代码可以到github上克隆下来。
前端
后台

目录结构：
目录结构

index.js

import { useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import { Form, Button, message, Tabs, Checkbox, Row, Col } from "antd";
import { pwdLogin, codeLogin } from "../../service/login";
import { LOGINWAY } from "../../utils/Enum";
import PwdLogin from "./PwdLogin";
import CodeLogin from "./CodeLogin";
import 'antd/dist/antd.css';
import './Login.css';


function Login() {
    const history = useHistory();  // 使用useHistory做页面跳转导航
    const [loginWay, setLogin] = useState(LOGINWAY.PWDLOGIN);

    function onSubmit(values) {
        loginWay === LOGINWAY.PWDLOGIN ? passwordLogin(values) : vertifyCodeLogin(values);
    }

    async function passwordLogin(values) {
        try {
            const response = await pwdLogin(values);  // 发送登录请求
            const { code, msg } = response;
            if (code === 0) {
                message.success(msg);
                history.push('/');  // 登录成功后页面跳转
            } else {
                message.error(msg);
            }
        } catch (err) {
            console.log(err);
            message.error('请求错误');
        }
        return;
    }

    async function vertifyCodeLogin(values) {
        try {
            const response = await codeLogin(values);  // 发送登录请求
            const { code, msg } = response;
            if (code === 0) {
                message.success(msg);
            } else {
                message.error(msg);
            }
        } catch (err) {
            console.log(err);
            message.error('请求错误');
        }
        return;
    }

    return (
        <div className="login">
            <Form
                onFinish={onSubmit}
            >
                <Tabs
                    defaultActiveKey="1"
                    onChange={(e) => { setLogin(parseInt(e)) }}
                    centered={true}
                    size='large'
                >
                    <Tabs.TabPane key="1" tab="账号密码登录"></Tabs.TabPane>
                    <Tabs.TabPane key="0" tab="手机号登录"></Tabs.TabPane>
                </Tabs>
                {loginWay ? <PwdLogin /> : <CodeLogin />}
                {loginWay ? <div style={{ "marginBottom": "24px", "textAlign": "left" }}>
                    <Checkbox>自动登录</Checkbox>
                    <span style={{ float: "right" }}><Link to='/editpwd'>忘记密码 ?</Link></span>

                </div> : ' '}
                <Form.Item>
                    <Row>
                        <Col span={11}>
                            <Button
                                block
                                size="large"
                                type='primary'
                                htmlType='submit'
                            >
                                登录
                         </Button>
                        </Col>
                        <Col span={2} />
                        <Col span={11}>
                            <Button
                                block
                                size="large"
                            >
                                <Link to='/sign'>注册</Link>
                            </Button>
                        </Col>
                    </Row>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Login;

PwdLogin.js

import { Form, Input } from "antd";
import { EyeInvisibleOutlined, EyeTwoTone, UserOutlined, LockOutlined } from '@ant-design/icons';

function pwdLogin() {
    return (
        <>
            <Form.Item
                name="username"
                rules={[
                    {
                        required: true,
                        message: "用户名不能为空",
                    }
                ]}
            >
                <Input
                    size="large"
                    autoComplete="off"
                    placeholder="用户名"
                    prefix={<UserOutlined />}
                />
            </Form.Item>
            <Form.Item
                name="password"
                rules={[
                    {
                        required: true,
                        message: "密码不能为空",
                    }, {
                        min: 5,
                        max: 10,
                        message: "请输入5-10位以内的密码"
                    }, {
                        pattern: '[0-9A-Za-z]',
                        message: "密码只能为数字或字母"
                    }
                ]}
            >
                <Input.Password
                    size="large"
                    autoComplete="off"
                    type="password"
                    placeholder="密码"
                    prefix={<LockOutlined />}
                    iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                />
            </Form.Item>
        </>
    )
}

export default pwdLogin;

CodeLogin.js

import React, { useState } from 'react';
import { Form, Input, Row, Col, Button, message } from "antd";
import { MobileOutlined, MailOutlined } from '@ant-design/icons';
import { sendCode } from '../../service/login';

function CodeLogin() {
    const [phoneNumber, setPoneNumber] = useState('');
    const [buttonStatus, setButtonStatus] = useState(false);
    const [content, setContent] = useState('获取验证码');
    let timer;

    async function getCode() {  // 获取验证码
        try {
            const result = await sendCode({ phonenumber: phoneNumber });
            const { code = 1, data = "error" } = result;
            if (code === 0) {
                message.success(`验证码为:${data}`);
            } else {
                message.error('用户不存在');
            }
        } catch (err) {
            console.log(err);
            message.error('请求失败');
        }
    }

    function buttonClick() {
        if (!phoneNumber) {
            message.error('手机号为空!');
            return;
        }
        getCode();
        setContent('60s后重新获取');
        setButtonStatus(true);  // 点击获取按钮之后，按钮禁用
        let index = 60;
        timer = setInterval(() => {  // 倒计时
            index--;
            setContent(`${index}s后重新获取`);
            if (index === 0) {
                clearInterval(timer);
                index = 60;
                setButtonStatus(false);
                setContent('验证码');
            }
        }, 1000);
    }

    function inputNumber(e) {
        const { value = 'error' } = e.target;
        setPoneNumber(value);
    }

    return (
        <>
            <Form.Item
                name="phonenumber"
                rules={[
                    {
                        required: true,
                        message: "手机号码不能为空",
                    }, {
                        pattern: "^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$",
                        message: "请输入正确的手机号码"
                    }
                ]}
            >
                <Input
                    autoComplete="off"
                    size="large"
                    placeholder="手机号"
                    prefix={<MobileOutlined />}
                    onChange={inputNumber} />
            </Form.Item>
            <Form.Item
                name="verifyCode"
                rules={[
                    {
                        required: true,
                        message: "验证码不能为空"
                    }
                ]}
            >
                <Row>
                    <Col span={14}>
                        <Input
                            size="large"
                            autoComplete="off"
                            placeholder="验证码"
                            prefix={<MailOutlined />}
                        />
                    </Col>
                    <Col span={1} />
                    <Col span={9}>
                        <Button
                            size="large"
                            block
                            disabled={buttonStatus}
                            onClick={buttonClick}
                        >
                            {content}
                        </Button>
                    </Col>
                </Row>
            </Form.Item>
        </>
    )
}

export default CodeLogin;

修改密码：
EditPwd.js

import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Form, Tabs, Input, Button, Row, Col, message } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone, LockOutlined, MobileOutlined, MailOutlined } from '@ant-design/icons';
import { sendCode } from '../../service/login';
import { editpwd } from '../../service/editpwd';
import { RES_CODES } from '../../utils/Enum';
import './Edit.css';

function EditPwd() {
    const [phoneNumber, setPoneNumber] = useState('');
    const [buttonStatus, setButtonStatus] = useState(false);
    const [content, setContent] = useState('获取验证码');
    let timer;

    async function onSubmit(values) {  // 修改密码
        if (Reflect.has(values, 'confirm_password')) {
            Reflect.deleteProperty(values, 'confirm_password');
        }
        try {
            const result = await editpwd(values);
            const { code, msg } = result;
            if (code === RES_CODES.SUCCESS) {
                message.success(msg);
            } else {
                message.error(msg);
            }
        } catch (err) {
            console.log(err);
            message.error('请求错误');
        }
    }

    async function getCode() {  // 获取验证码
        try {
            const vertifyCode = await sendCode({ phonenumber: phoneNumber });
            const { code, data } = vertifyCode;
            if (code === RES_CODES.SUCCESS) {
                message.success(`验证码为: ${data}`);
            } else {
                message.error('请求错误');
            }
        } catch (err) {
            console.log(err);
            message.error('请求错误');
        }
    }

    function inputNumber(e) {
        const { value = 'error' } = e.target;
        setPoneNumber(value);
    }

    function buttonClick() {   // 获取验证码点击事件
        if (!phoneNumber) {
            message.error('手机号为空!');
            return;
        }
        getCode();
        setContent('60s后重新获取');
        setButtonStatus(true);
        let index = 60;
        timer = setInterval(() => {
            index--;
            setContent(`${index}s后重新获取`);
            if (index === 0) {
                clearInterval(timer);
                index = 60;
                setButtonStatus(false);
                setContent('验证码');
            }
        }, 1000);
    }

    return (
        <div className="editpwd">
            <Form onFinish={onSubmit}>
                <Tabs centered='true' size='large'>
                    <Tabs.TabPane tab="修改密码"></Tabs.TabPane>
                </Tabs>
                <Form.Item
                    name="phonenumber"
                    rules={[
                        {
                            required: true,
                            message: "手机号不能为空",
                        }, {
                            pattern: "^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$",
                            message: "请输入正确的手机号"
                        }
                    ]}
                >
                    <Input
                        size='large'
                        placeholder="手机号"
                        prefix={<MobileOutlined />}
                        onChange={inputNumber}
                    />
                </Form.Item>
                <Form.Item
                    name="verifyCode"
                    rules={[
                        {
                            required: true,
                            message: "验证码不能为空"
                        }
                    ]}
                >
                    <Row>
                        <Col span={14}>
                            <Input
                                size="large"
                                autoComplete="off"
                                placeholder="验证码"
                                prefix={<MailOutlined />}
                            />
                        </Col>
                        <Col span={1} />
                        <Col span={9}>
                            <Button
                                size="large"
                                block
                                disabled={buttonStatus}
                                onClick={buttonClick}
                            >
                                {content}
                            </Button>
                        </Col>
                    </Row>
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: '密码不能为空'
                        }, {
                            min: 5,
                            max: 10,
                            message: '密码长度为5-10'
                        }, {
                            pattern: '[0-9A-Za-z]',
                            message: "密码只能为数字或字母"
                        }
                    ]}
                >
                    <Input.Password
                        size='large'
                        placeholder="新密码"
                        prefix={<LockOutlined />}
                        iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                    />
                </Form.Item>
                <Form.Item
                    name="confirm_password"
                    dependencies={["password"]}
                    rules={[
                        {
                            required: true,
                            message: '密码不能为空'
                        }, {
                            min: 5,
                            max: 10,
                            message: '密码长度为5-10'
                        }, {
                            pattern: '[0-9A-Za-z]',
                            message: "密码只能为数字或字母"
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('password') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error('两次输入的密码不一致'));
                            }
                        }),
                    ]}

                >
                    <Input.Password
                        size='large'
                        placeholder="再次输入新密码"
                        prefix={<LockOutlined />}
                        iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                    />
                </Form.Item>
                <Form.Item>
                    <Button
                        size="large"
                        className="login-form-button"
                        type='primary'
                        htmlType='submit'
                    >
                        修改密码
                         </Button>
                </Form.Item>
                <Form.Item>
                    <Row>
                        <Col span={11}>
                            <Button
                                block
                                size="large"
                            >
                                <Link to='/login'>登录</Link>
                            </Button>
                        </Col>
                        <Col span={2} />
                        <Col span={11}>
                            <Button
                                size="large"
                                className="login-form-button"
                            >
                                <Link to='/sign'>注册</Link>
                            </Button>
                        </Col>
                    </Row>
                </Form.Item>
            </Form>
        </div>
    )
}
export default EditPwd;
风吹行舟
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
登录界面代码(vs).pdf
10-11
登录界面代码(vs).pdf
好看实用的六个html登录页面
热门推荐
ss810540895的博客
07-15 11万+
原文1.效果图： 代码： 2.效果图： 源码： 3.效果图：源码： 4.效果图：源码： 5.效果图： 源码： 6.效果图：源码：
六个好看实用的html简单登录页面源码
最新发布
爱酷码的博客
03-19 1109
六个好看实用的html简单登录页面源码，用在自己的项目中再合适不过了，都是单页，可以减少不必要的开发，效果如下：
c语言密码登陆界面代码
06-14
c语言
Visual Studio创建Windows窗体登录界面代码
06-23
把文档里的代码复制到Form.vb中，然后创建相关控件即可实现密码登录的功能。
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
简易登录页面实现
繁依Fanyi的博客
07-09 2774
导言 本文将介绍一个简单的登录页面的实现，使用HTML、CSS和JavaScript完成。该登录页面具有选项卡切换和表单提交功能。 HTML基础知识 首先，我们来了解一下HTML文档的基本结构： <!DOCTYPE html> <html> <head> <title>Login Page</title> <!-- 引入外部CSS文件 --> <link rel="stylesheet" href="htt
使用Html做一个简单的登陆页面
桑稚远方的博客
04-05 3万+
有了登录按钮后，在我们的认知下，肯定按了登录会跳到下一个页面，但是今天只是展示做一个简单的登陆界面，就不写跳转和账号密码验证了；登录页面一般就是账号和密码，另外还需要验证码验证需求，这三个常见的属性是一个项目登陆界面重要组成要素；2.账号密码有了之后，下一步就需要登录了，登录是一个按钮，按钮是一个标签。，所以就不使用验证码了，因为验证码在一个项目中是放在后端的，这次就不做演示；不好意思兄弟们，本人没有美感，尽力了，你们自己找好看的点自己修改；如下面的代码，这一步很简单；
前端登陆页面
Where there is a will, there is a way !
03-02 6822
例如，你可以使用JavaScript为表单添加验证功能，或者使用CSS和JavaScript为页面添加一些动态效果，比如当用户输入错误时，用户名和密码输入框可能会出现红色边框。该页面包含一个简单的表单，用户需要输入用户名和密码才能登录。同时，我们还引用了一个CSS文件，该文件可以在同一目录下创建一个名为style.css的文本文件，以自定义页面的外观和样式。当表单被提交时，该代码将检查用户名和密码输入框是否为空。你可以将这些CSS代码保存到一个名为style.css的文件中，并将其与HTML文件链接起来。
简单的HTML登录界面（带源码）
宝子的博客
07-05 1万+
非常的简单，第一眼看到这个界面的时候就感觉非常的喜欢，给我一种简约又美观的感觉，然后就模仿样式自己写出来了，给大家分享一下。还写了一个注册页面大部分的代码都差不多，因为它们实在太像了，我太喜欢了。
用html做一个登录界面
weixin_35757531的博客
12-27 1471
为了创建一个登录界面，您需要使用HTML代码。 以下是一个简单的登录界面的例子： <!DOCTYPE html> <html> <head> <title>登录界面</title> </head> <body> <h1>登录</h1> <form action=...
Android中使用Kotlin实现一个简单的登录界面
08-29
Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，被称之为 Android 世界的Swift，由 JetBrains 设计开发并开源。接下来本文通过实例代码给大家讲解Android中使用Kotlin实现一个简单的登录界面，一起看看吧
用QT实现一个简单的登录界面
01-29
用QT实现一个简单的登录界面，实验效果再我的文章中
通过Python实现一个简单的html页面
09-16
主要介绍了通过Python写一个简单的html页面,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Java实现简单登录界面
08-09
最近刚刚学习Java，试着做了一个简单的登录注册界面，只是点击按钮之后输出响应，并没有完成后续的跳转操作。
一个简单的登录注册界面流程介绍
qq_43717065的博客
04-11 9651
登录页面实现 其他页面的实现可以到github上克隆下来 一、用户登录 1、密码登录 流程： 用户输入密码； 表单使用正则验证用户名和密码格式； 点击登录，对密码进行加密，并发送登录验证请求； 后台验证用户登录信息是否正确； 正确则生成token返回至前端，否则提示用户名或密码错误。 2、忘记密码 流程： 输入手机号； 表单正则验证手机号格式； 点击获取验证码按钮； 后台验证手机号是否存在； 存在，则生成验证码，加密后保存在服务器session当中，否则提示手机号不存在； 获取到验证码并输入；.
npm、cnpm、yarn之间的区别
qq_43717065的博客
07-18 3301
npm 在使用 npm 安装包的时候，给人的第一感觉就是慢，而且还会在命令行打印出一堆的东西，而且经常会出现 “在我的电脑上可以…” 这个问题，着实是有点难受。 但也不得不说 npm 是 node 如此成功的主要原因之一。 npm的缺点如下： 1、由于版本号的影响,所以会造成版本不统一的情况 npm是围绕着语义版本控制的思想而设计的 给定一个版本号：主版本号.次版本号.补丁版本号 主版本号： 当API发生改变，并与之前的版本不兼容的时候 次版本号： 当增加了功能，但是向后兼容的时候 补丁版本号： 当做了向
umi使用proxy代理解决跨域问题
qq_43717065的博客
07-02 2132
什么是跨域 客户端在访问与自己域名不同的服务端时，就会造成跨域。 比如： 用node起了一个http://localhost:8080 的服务； 那么在这个服务器下访问的网页也就是默认在 http://localhost:8080 这个域下面； 假设服务端所在的域是http://example.com； 这样通过ajax发送请求的话; 由客户端直接传过去的就是一个域名为 http://localhost:8080 的请求； 而服务端所在的域是 http://example.com； 域名不同，跨域请求失败；
hbuilderx登陆界面代码
03-06
HBuilderX是一款基于Electron开发的跨平台集成开发环境（IDE），用于前端开发。它支持多种编程语言和框架，包括HTML、CSS、JavaScript、Vue.js等。 关于HBuilderX的登录界面代码，由于HBuilderX是一个闭源的软件，其登录界面的具体实现细节并没有公开。因此，我无法提供HBuilderX登录界面的具体代码。 不过，一般来说，登录界面的实现通常包括以下几个方面的内容： 1. 用户名和密码的输入框：用于用户输入登录凭证。 2. 登录按钮：用于触发登录操作。 3. 注册和忘记密码链接：提供用户进行账号注册和找回密码的入口。 4. 错误提示信息：在用户输入错误或登录失败时，显示相应的错误提示信息。 如果你需要自己实现一个类似的登录界面，你可以使用HTML、CSS和JavaScript来编写代码。你可以使用HTML创建输入框、按钮和链接等元素，使用CSS来美化界面样式，使用JavaScript来处理用户输入和登录逻辑。 希望以上信息对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值