next.js博客搭建_六一卡通风格的登录注册（第二步）

⭐前言

大家好，我是yma16，本期给大家分享next项目搭建卡通风的登录注册。
该系列的往期文章
博客搭建_初始化next项目
登录注册的交互效果如下：
背景图为卡通的动画

⭐ 登录界面搭建

页面元素：

1. 登录的表单包括账号和密码
2. 没有账号可以跳转到注册页面的按钮
3. 表单校验

登录效果

代码实现

import React from 'react';
import { Form, Input, Button, MessagePlugin,Link } from 'tdesign-react';
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-react';
import {loginAction} from "../../service/user/userApi"
import { useRouter } from 'next/router'

const { FormItem } = Form;

export default function BaseForm() {
    const router = useRouter()
    const rules=[
        { required: true, message: '不能为空', type: 'warning' }
    ]
    const onSubmit = (e:any) => {
        console.log(e);
        if (e.validateResult === true) {

            loginAction({
                name:e.fields?.account,
                password:e.fields?.password
            }).then(res=>{
                console.log('res',res)
                MessagePlugin.info('登录成功');
            }).catch(r=>{
                MessagePlugin.error('登录失败\n'+JSON.stringify(r));
            })
        }
    };

    const jumpAction=()=>{
        router.push('/views/sys/register')
    }

    const onReset = (e) => {
        console.log(e);
        MessagePlugin.info('重置成功');
    };

    return (
        <div className={"login-box"}>
        <div className={"login-container"}>
            <div style={{width:'100%',textAlign:'center',marginBottom:'20px',fontWeight:'bold'}}>
                登录
            </div>
        <div style={{ width: 350 }}>
            <Form statusIcon={true} onSubmit={onSubmit} onReset={onReset} colon={true} labelWidth={0}>
                <FormItem name="account" rules={rules}>
                    <Input clearable={true} prefixIcon={<DesktopIcon />} placeholder="请输入账户名" />
                </FormItem>
                <FormItem name="password" rules={rules}>
                    <Input type="password" prefixIcon={<LockOnIcon />} clearable={true} placeholder="请输入密码"
                    />
                </FormItem>
                <FormItem>
                    <Button theme="primary" type="submit" block>
                        登录
                    </Button>
                </FormItem>
            </Form>
            <div style={{width:'100%',textAlign:'center',marginTop:'10px'}} onClick={jumpAction}>
                没有账号？<Link theme="primary">前往注册</Link>
            </div>
        </div>
        </div>
        </div>
    );
}

⭐ 注册界面搭建

页面元素：

1. 注册的表单包括账号、密码和确认密码
2. 有账号可以跳转到登录页面
3. 表单校验

注册效果

⭐ 结束

博客的卡通风格登录注册到这结束，如有不足欢迎指出！我们下篇博客见