前端实战 - 04.注册页面 - 《前端神机营》

知识点
注册页面

知识点

组件：Cell、Input、Button、CheckBox。
验证码
:gloabal样式修改
注册页面

首先新建 Login 文件夹，在文件夹内添加两个文件 index.jsx 和 style.module.less，我们先把注册页面的静态页面切出来，首先给 index.jsx 添加如下代码： ```javascript import React from ‘react’

import s from ‘./style.module.less’

const Login = () => { return

}

export default Login

为它添加一个路由配置，打开 router/index.js 添加如下：
```javascript
import Login from '@/container/Login'
...
{
  path: "/login",
  component: Login
}

接下来为 Login/index.jsx 添加静态页面代码：

import React from 'react'
import { Cell, Input, Button, Checkbox } from 'zarm'
import CustomIcon from '@/components/CustomIcon'
import s from './style.module.less'
const Login = () => {
  return <div className={s.auth}>
    <div className={s.head} />
    <div className={s.tab}>
      <span>注册</span>
    </div>
    <div className={s.form}>
      <Cell icon={<CustomIcon type="zhanghao" />}>
        <Input
          clearable
          type="text"
          placeholder="请输入账号"
        />
      </Cell>
      <Cell icon={<CustomIcon type="mima" />}>
        <Input
          clearable
          type="password"
          placeholder="请输入密码"
        />
      </Cell>
      <Cell icon={<CustomIcon type="mima" />}>
          <Input
            clearable
            type="text"
            placeholder="请输入验证码"
          />
        </Cell>
    </div>
    <div className={s.operation}>
      <div className={s.agree}>
        <Checkbox />
        <label className="text-light">阅读并同意<a>《掘掘手札条款》</a></label>
      </div>
      <Button block theme="primary">注册</Button>
    </div>
  </div>
}
export default Login

上述代码中，关键部分是账号输入、密码输入、验证码输入，这三个输入框是需要获取数据作为接口的参数提交上去的。

:global修改样式

样式编写部分，要注意的一点是 :global 这个关键词。由于我们采用的是 CSS Module 的形式进行开发，也就是你在页面中声明的类名都会根据当前页面，打一个唯一的 hash 值，比如我们页面中声明的 className={s.form}，最终在浏览器中显示的是这样的：

_form_kpur3_30 是已经被编译过的样式，这样做的目的是避免和别的页面的样式重名，这是目前样式管理的一个诟病，当多人参与项目开发的时候，很难做到不污染全局样式名称，除非很小心的命名样式名称。
所以经过编译之后，想要修改 .form 下的 .za-cell，如下写法，将无法修改成功：

.form {
  .za-cell {
    color: red;
  }
}

原因是，上述写法，.za-cell 会被编译加上 hash，组件库 Zarm 内的 dom 类名还是叫 za-cell，如上图所示。所以为了不加 hash，就需要这样操作：

.form {
  :global {
    .za-cell {
      color: red;
    }
  }
}

这样 .za-cell 就不会被加上 hash，如下图所示：

验证码

安装插件npm i react-captcha-code -S
在代码中引入：

...
import Captcha from "react-captcha-code"
...
<Input
clearable
type="text"
placeholder="请输入验证码"
onChange={(value) => setVerify(value)}
  />
  <Captcha charNum={4} />

浏览器展示如下所示：

注册逻辑

...
const [username, setUsername] = useState(''); // 账号
const [password, setPassword] = useState(''); // 密码
const [verify, setVerify] = useState(''); // 验证码
...
<Input
  clearable
  type="text"
  placeholder="请输入账号"
  onChange={(value) => setUsername(value)}
/>
...
<Input
  clearable
  type="password"
  placeholder="请输入密码"
  onChange={(value) => setPassword(value)}
/>
...
<Input
  clearable
  type="text"
  placeholder="请输入验证码"
  onChange={(value) => setVerify(value)}
/>

当输入框内容修改的时候，onChange 会被触发，接受的回调函数参数，便是变化的输入值，此时我们将其保存在声明的变量中。
我们输入的验证码是需要和验证码图片里的验证码匹配的，所以我们还需要拿到图片里的验证码，我们作如下操作：

import React, { useCallback } from 'react'
...
const [captcha, setCaptcha] = useState(''); // 验证码变化后存储值
//  验证码变化，回调方法
const handleChange = useCallback((captcha) => {
  console.log('captcha', captcha)
  setCaptcha(captcha)
}, []);
...
<Captcha charNum={4} onChange={handleChange} />

当验证码变化的时候，便能获取到相应的值
到此，注册需要的参数都有了，我们开始编写注册方法：

import { Cell, Input, Button, Checkbox, Toast } from 'zarm'
import { post } from '@/utils'
...
const onSubmit = async () => {
  if (!username) {
    Toast.show('请输入账号')
    return
  }
  if (!password) {
    Toast.show('请输入密码')
    return
  }
  if (!verify) {
    Toast.show('请输入验证码')
    return
  };
  if (verify != captcha) {
    Toast.show('验证码错误')
    return
  };
  try {
    const { data } = await post('/api/user/register', {
      username,
      password
    });
    Toast.show('注册成功');
  } catch (error) {
    Toast.show('系统错误');
  }
};
...
<Button onClick={onSubmit} block theme="primary">注册</Button>x

上述代码中，因为我们使用的是 async await 做异步处理，所以需要通过 try catch 来捕获异步处理过程中出现的错误，如果使用 Promise 的回调函数，则无需使用 try catch，如下代码（建议使用 async await）：

post('/api/user/register', {
  username,
  password
}).then(res => {
  // do something
})

此时我们大致将注册功能实现了。这里我不再展开讲样式部分，因为这样会使得文章中出现过多的重复代码，不以阅读，大家尽量根据标签的类名去查找 css 样式部分。