編寫注冊頁面

回顧

上一節(jié)課我們已經(jīng)編寫好了登錄頁面桑李，用戶也可以正常登錄了，不過我們不能讓用戶不能注冊呀窿给，而且注冊也不能完全靠接口去做贵白，前端也需要提供頁面進行操作的。

注冊頁面編寫

image

我們的目的是崩泡，把這里的手機號登錄改為注冊禁荒，并提供對應(yīng)的輸入框。

首先進行名字上的修改:

image

將tab改為注冊

前端就是這個好角撞，所見即所得呛伴，咱們來看看登錄頁面的效果:

修改成功

image

按照上圖的格式，添加4個字段: 用戶名谒所、姓名热康、郵箱、密碼劣领。

為了方便起見褐隆，我就沒有設(shè)置二次確認密碼，和郵箱格式校驗剖踊，這個在正常的web系統(tǒng)都是必不可少的庶弃，但是我們是一個快餐衫贬，哈哈哈。能省則省歇攻，經(jīng)費有限固惯。

完整代碼:

 {type === 'register' && (
          <>
            <ProFormText
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={styles.prefixIcon} />,
              }}
              name="username"
              placeholder="請輸入用戶名"
              rules={[
                {
                  required: true,
                  message: "請輸入用戶名",
                }
              ]}
            />
            <ProFormText
              fieldProps={{
                size: 'large',
                prefix: <MobileOutlined className={styles.prefixIcon} />,
              }}
              name="name"
              placeholder="請輸入姓名"
              rules={[
                {
                  required: true,
                  message: "請輸入姓名",
                }
              ]}
            />
            <ProFormText
              fieldProps={{
                size: 'large',
                prefix: <MobileOutlined className={styles.prefixIcon} />,
              }}
              name="email"
              placeholder="請輸入用戶郵箱"
              rules={[
                {
                  required: true,
                  message: "請輸入用戶郵箱",
                }
              ]}
            />
            <ProFormText.Password
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={styles.prefixIcon} />,
                type: 'password'
              }}
              name="password"
              placeholder="請輸入用戶密碼"
              rules={[
                {
                  required: true,
                  message: "請輸入用戶密碼",
                }
              ]}
            />
          </>
        )}

新增注冊方法

因為之前提交函數(shù)都是用來登錄的，這次我們需要type='register'的時候注冊缴守，而type='account'的時候登錄葬毫。

image

在model中新增register副作用

參考*login方法

首先是調(diào)用注冊方法朝氓，如果成功則回到登錄頁面勿负，失敗則輸出錯誤信息澳化。

注意碑韵，這里的setType就是index.js中的setType方法较坛，因為dispatch不返回結(jié)果保屯，所以我們把改變狀態(tài)的方法傳入辽俗，在effects中進行改變

修改submit（提交）方法

上面說到深啤，我們提交有時候是注冊 有時候是登錄础废，所以我們需要修改一下:

image

第一處就是要修改這里的values汛骂，之前是取出username和password，而現(xiàn)在我們需要全部字段的值评腺，所以直接取到values即可帘瞭。

注釋: 這里values其實是表單的所有值，是一個map蒿讥，比如values可能是{username: "woody"}這樣的形式蝶念。

image

接著改造onFinish方法，也就是提交的實際調(diào)用方法:

可以看到芋绸，我對type進行了判斷祸轮，如果是account則調(diào)用login/login方法，否則調(diào)用login/register方法侥钳。這里把setType也傳遞了進去适袜。

測試一下

• 注冊失敗即用戶名或密碼存在時，停留在注冊頁面

image

• 注冊成功時舷夺，跳回登錄頁面

image

image

用剛才注冊的賬號登錄

image

搞定苦酱！這篇文章可能以圖片的形式居多，但是也解決了無法注冊的核心問題给猾。喜歡的朋友可以點個贊支持一下呀疫萤！

ant design的標題有點多

我們通過全局搜索都替換成Pity。

后端代碼地址: https://github.com/wuranxu/pity

前端代碼地址: https://github.com/wuranxu/pityWeb