注：iVX也有免費(fèi)直播課《第八期直播課》

首先打開(kāi)在線編輯器進(jìn)入我們的項(xiàng)目：https://editor.ivx.cn/

一、登錄頁(yè)功能實(shí)現(xiàn)

上一節(jié)中已經(jīng)完成了登錄頁(yè)的頁(yè)面制作，那么這一節(jié)就開(kāi)始對(duì)應(yīng)的完成登錄頁(yè)的功能實(shí)現(xiàn)。

登錄頁(yè)的功能實(shí)現(xiàn)主要是對(duì)用戶登錄后進(jìn)行昵稱獲取等操作（在本項(xiàng)目中）。那么必然需要一個(gè)數(shù)據(jù)庫(kù)進(jìn)行用戶的存儲(chǔ)；在ivx 中用戶存儲(chǔ)需要一個(gè)組件“用戶”，用戶組件點(diǎn)擊后臺(tái)后選擇私有用戶組件即可進(jìn)行增加：

增加完畢后可以對(duì)其進(jìn)行重命名使整個(gè)項(xiàng)目更加清晰：

我們給登錄設(shè)置事件：

此時(shí)選擇剛剛添加的用戶組件進(jìn)行對(duì)應(yīng)的登錄動(dòng)作，需要將手機(jī)號(hào)、驗(yàn)證碼作為參數(shù)，接著給予一個(gè)回調(diào)，判斷用戶是否登錄成功：

在回調(diào)中直接判斷當(dāng)前的登錄結(jié)果，是否成功如果是是，那么就是登錄成功，將會(huì)進(jìn)行彈出提示登錄成功，其余情況就是登錄失敗，直接給予對(duì)應(yīng)彈窗文本為登錄失敗的原因即可。

二、驗(yàn)證碼獲取

那么此時(shí)我們的驗(yàn)證碼獲取還未制作，那么此時(shí)給予對(duì)應(yīng)的發(fā)送按鈕事件：

此時(shí)直接在發(fā)起觸發(fā)觸發(fā)器時(shí)進(jìn)行驗(yàn)證碼獲取，需要傳入手機(jī)號(hào)作為對(duì)應(yīng)的參數(shù)，還需要注意，類型需要選擇為登錄驗(yàn)證，否則將會(huì)出現(xiàn) bug，在此處還需要選擇無(wú)須圖片驗(yàn)證碼，否則將會(huì)獲取不到手機(jī)短信。

在這里編寫了短信獲取動(dòng)作之后，也解釋了為什么需要判斷登錄倒計(jì)時(shí)為 60 才發(fā)起服務(wù)，這樣才可以限制發(fā)起短信驗(yàn)證碼動(dòng)作次數(shù)，否則只要點(diǎn)擊當(dāng)前的按鈕就會(huì)發(fā)起獲取驗(yàn)證碼服務(wù)，并且過(guò)多發(fā)起將會(huì)限制 ip。

三、注冊(cè)頁(yè)制作

注冊(cè)頁(yè)與當(dāng)前的登錄頁(yè)制作類似，直接復(fù)制整個(gè)登錄塊：

接著重命名為注冊(cè)塊，并且對(duì)應(yīng)的把提示的文本更改問(wèn)注冊(cè)：

此時(shí)還需要更改對(duì)應(yīng)的事件和新建兩個(gè)組件，一個(gè)是新建一個(gè)倒計(jì)時(shí)變量命名為注冊(cè)倒計(jì)時(shí)，用于存儲(chǔ)注冊(cè)的驗(yàn)證碼倒計(jì)時(shí)描述存儲(chǔ)，另一個(gè)是創(chuàng)建一個(gè)觸發(fā)器命名為注冊(cè)驗(yàn)證碼倒計(jì)時(shí)觸發(fā)器：

接著更改對(duì)應(yīng)的事件對(duì)象，不然的話你將會(huì)調(diào)用到登錄框部分的組件內(nèi)容：

接著把提示以及對(duì)應(yīng)所需要的參數(shù)內(nèi)容重新進(jìn)行選擇，防止調(diào)用錯(cuò)誤的內(nèi)容值：

此時(shí)我們發(fā)現(xiàn)少了昵稱內(nèi)容，只需要重新創(chuàng)建一個(gè)一個(gè)行，命名為昵稱輸入框即可：

接著再把這個(gè)昵稱內(nèi)容給予到對(duì)應(yīng)的參數(shù)之中：

接著我們?cè)傩薷挠|發(fā)器的選擇組件即可，在此一定要注意，選擇正確的組件，否則會(huì)出現(xiàn)你意想不到的錯(cuò)誤，并且也不好排查：

此時(shí)我們測(cè)試數(shù)據(jù)：

成功后我們點(diǎn)擊用戶數(shù)據(jù)可以查看注冊(cè)的用戶：

我們?cè)賴L試登陸內(nèi)容：

此時(shí)你可以選擇注冊(cè)成功后顯示登錄框：

直接隱藏登錄框即可：

四、優(yōu)化

接下來(lái)我們還可以優(yōu)化一下登錄和注冊(cè)的操作，例如直接點(diǎn)擊發(fā)送驗(yàn)證碼時(shí)，點(diǎn)擊條件 + 號(hào)，直接判斷手機(jī)號(hào)是否等于 11 位，否則就不是正確的手機(jī)號(hào)：

還可以給予一個(gè)其余條件，給予提示輸入的不是正確的手機(jī)號(hào)：

注冊(cè)時(shí)也可以給予對(duì)應(yīng)的信息判斷，判斷驗(yàn)證碼、手機(jī)號(hào)、昵稱是否輸入正確，否則就彈出提示：

登錄頁(yè)也可以做判斷，內(nèi)容重復(fù)不再贅述。

總結(jié)

以上是生活随笔為你收集整理的四、登录注册页功能实现《iVX低代码/无代码个人博客制作》的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。