0
点赞
收藏
分享

微信扫一扫

react + zarm + react-captcha-code + classnames 实现登录注册页面


需要实现的效果

react + zarm + react-captcha-code + classnames 实现登录注册页面_ico

代码实现过程

上一篇我们搭建了开发环境的基本结构:Vite 2.x + React + Zarm + Less + React Router v6 + Axios + flexible.js 搭建前端 H5 开发环境,下面我们开始实现登记注册页面的开发。

1.准备字体库

首先我们在​​https://www.iconfont.cn/​​新建一个项目

react + zarm + react-captcha-code + classnames 实现登录注册页面_验证码_02

然后再项目里面添加字体图标,可以自己搜索想要的图标添加入库

react + zarm + react-captcha-code + classnames 实现登录注册页面_d3_03


然后把入库的图标添加到项目里

react + zarm + react-captcha-code + classnames 实现登录注册页面_ico_04


react + zarm + react-captcha-code + classnames 实现登录注册页面_验证码_05


最后在我们项目那里生成在线链接即可

react + zarm + react-captcha-code + classnames 实现登录注册页面_验证码_06

2.创建图标公用组件

我们新建 ​​components/CustomIcon/index.jsx​​,添加如下代码:

// 自定义 Iconfont 图标,提供了一个 createFromIconfont 方法,方便开发者调用在 iconfont.cn 上自行管理的图标。
import { Icon } from 'zarm';
// 这里直接使用我们上面弄的项目字体链接
export default Icon.createFromIconfont('//at.alicdn.com/t/font_3376813_il53dc6ij5.js');

3.安装验证码插件

​​https://www.npmjs.com/package/react-captcha-code​​

基于 React 和 canvas 的一个验证码组件.

npm

import React, { useCallback, useRef } from 'react';
import Captcha from 'react-captcha-code';

export const Basic = () => {
const handleChange = useCallback((captcha) => {
console.log('captcha:', captcha);
}, []);

const captchaRef = useRef<HTMLCanvasElement>();

const handleClick = () => {
// 刷新验证码
(captchaRef as any).current.refresh();
};

return (
<>
<Captcha ref={captchaRef} charNum={6} onChange={handleChange} />
<div>
<button onClick={handleClick}>更换验证码</button>
</div>
</>
);
};

4.安装类名连接classnames

​​https://www.npmjs.com/package/classnames​​

一个简单的 JavaScript 实用程序,用于有条件地将类名连接在一起。

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

5.组件编写

我们新建 ​​src/container/Login​​ 文件夹,用于存放登录注册模块相关代码

react + zarm + react-captcha-code + classnames 实现登录注册页面_验证码_07

交互逻辑:写在 ​​index.jsx​​ 里面

import { useState, useCallback } from 'react'
import { Cell, Input, Button, Toast } from 'zarm'
import CustomIcon from '@/components/CustomIcon'
import Captcha from "react-captcha-code"
import classNames from "classNames"
import { login, register } from "./api/index"

import s from './style.module.less'

const Login = () => {
const [username, setUsername] = useState(''); // 账号
const [password, setPassword] = useState(''); // 密码
const [verify, setVerify] = useState(''); // 验证码
const [captcha, setCaptcha] = useState(''); // 验证码变化后存储值
const [type, setType] = useState('login'); // 登录注册类型

// 验证码变化,回调方法
const handleChange = useCallback((captcha) => {
console.log('验证码变化,回调方法', captcha)
setCaptcha(captcha)
}, []);

const onSubmit = async () => {
if (!username) {
Toast.show('请输入账号')
return
}
if (!password) {
Toast.show('请输入密码')
return
}
try {
// 判断是否是登录状态
if (type == 'login') {
// 执行登录接口,获取 token
const { status, desc, data } = await login({
username,
password
});
console.log('登录接口', status, data)
if(status === 200) {
// 将 token 写入 localStorage
localStorage.setItem('token', data.token);
Toast.show('登录成功');
} else {
Toast.show(desc);
}
} else {
if (!verify) {
Toast.show('请输入验证码')
return
};
if (verify != captcha) {
Toast.show('验证码错误')
return
};
const { status, desc, data } = await register({
username,
password
});
console.log('注册接口', status, data)
if(status === 200) {
Toast.show('注册成功');
// 注册成功,自动将 tab 切换到 login 状态
setType('login');
} else {
Toast.show(desc);
}
}
} catch (error) {
Toast.show('系统错误');
}
};

return <div className={s.auth}>
<div className={s.head} />
<div className={s.tab}>
<span className={classNames({ [s.avtive]: type == 'login' })} onClick={() => setType('login')}>登录</span>
<span className={classNames({ [s.avtive]: type == 'register' })} onClick={() => setType('register')}>注册</span>
</div>
<div className={s.form}>
<Cell icon={<CustomIcon type="user" />}>
<Input
clearable
type="text"
placeholder="请输入账号"
onChange={(value) => setUsername(value)}
/>
</Cell>
<Cell icon={<CustomIcon type="password" />}>
<Input
clearable
type="password"
placeholder="请输入密码"
onChange={(value) => setPassword(value)}
/>
</Cell>
{
type == 'register' ? <Cell icon={<CustomIcon type="captcha" />}>
<Input
clearable
type="text"
placeholder="请输入验证码"
onChange={(value) => setVerify(value)}
/>
<Captcha charNum={4} onChange={handleChange} />
</Cell> : null
}
</div>
<div className={s.operation}>
<Button block theme="primary" onClick={onSubmit}>{type == 'login' ? '登录' : '注册'}</Button>
</div>
</div>
}

export default

样式:写在 ​​style.module.less​​​ 里,图片我这边放在了 ​​src/assets/images​​ 里面

.auth {
min-height: 100vh;
background-image: linear-gradient(217deg, #6fb9f8, #3daaf85e, #49d3fc1a, #3fd3ff00);
.head {
height: 200px;
background: url('@/assets/images/cryptocurrency.png') no-repeat center;
background-size: 120%;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
img {
width: 34px;
margin: 15px 0 0 15px;
}
}
.tab {
color: #597fe7;
padding: 30px 24px 10px 24px;
> span {
margin-right: 10px;
font-size: 14px;
font-weight: bold;
&.avtive {
font-size: 20px;
border-bottom: 2PX solid #597fe7;
padding-bottom: 6px;
}
}
}
.form {
padding: 0 6px;
:global {
.za-cell {
background-color: transparent;
&::after {
border-top: none;
}
}
}
}
.operation {
padding: 10px 24px 0 24px;
}
}

接口配置:写在 ​​api/index.js​​ 里

import { fetchData } from "@/utils/axios.js";

// 注册
export function register(data) {
return fetchData('/api/user/register', 'post', data);
}
// 登录
export function login(data) {
return fetchData('/api/user/login', 'post', data);
}

6.测试

先注册已经注册过的账号试试:kaimo313,123456

react + zarm + react-captcha-code + classnames 实现登录注册页面_react_08

注册正常的账号:注册成功之后就会切换到登录的模块

react + zarm + react-captcha-code + classnames 实现登录注册页面_ico_09


我们看到本地数据库里已经注册成功了。

react + zarm + react-captcha-code + classnames 实现登录注册页面_验证码_10

然后我们登录账号 kaimo313,123456

react + zarm + react-captcha-code + classnames 实现登录注册页面_ico_11

登录成功之后,token 会被存起来,然后跳转到我们的首页

react + zarm + react-captcha-code + classnames 实现登录注册页面_ico_12


举报

相关推荐

0 条评论