Vue學(xué)習(xí)記錄
最近在學(xué)習(xí)Vue3,記錄一下自己從0開(kāi)始搭建后臺(tái)框架,并獲取遠(yuǎn)程接口數(shù)據(jù)對(duì)頁(yè)面的渲染
本次功能實(shí)現(xiàn)主要包括:連接后端的遠(yuǎn)程接口數(shù)據(jù)進(jìn)行登錄注冊(cè)功能實(shí)現(xiàn)：
1.本次登陸注冊(cè)合并為了一個(gè)頁(yè)面,頁(yè)面都使用了element-plus中的組件渲染,更加美觀
2.用route路由實(shí)現(xiàn)不同頁(yè)面邏輯跳轉(zhuǎn)
3.登錄狀態(tài):
打開(kāi)網(wǎng)頁(yè)時(shí)，不論輸入的路由是什么，先判斷是否已是登錄狀態(tài)，如果用戶(hù)為登錄狀態(tài)，則直接顯示主頁(yè)；否則強(qiáng)制跳轉(zhuǎn)至登錄頁(yè)
退出登錄后，更改狀態(tài)為不保持登錄狀態(tài)
localStorage的使用
localStorage.setItem(string key,string value)?將鍵值對(duì)添加到存儲(chǔ)中
localStorage.getItem(string key)?獲取對(duì)應(yīng)的鍵值
localStorage和sessionStorage的區(qū)別
兩者都可用來(lái)存儲(chǔ)數(shù)據(jù)，但是localStorage會(huì)保留原始數(shù)據(jù)，即使關(guān)閉瀏覽器，數(shù)據(jù)仍然存在。而sessionStorage不會(huì)保留，關(guān)閉瀏覽器后數(shù)據(jù)被銷(xiāo)毀。由于要求用戶(hù)在保持登錄狀態(tài)下重新打開(kāi)瀏覽器可以不用登錄直接進(jìn)入主頁(yè)面，所以要用localStorage。
?
首先,頁(yè)面展示:
1.登錄頁(yè)面
2.注冊(cè)頁(yè)面
?注冊(cè)功能展示:
1.簡(jiǎn)單的數(shù)據(jù)表單驗(yàn)證 必填和密碼限制長(zhǎng)度
?2.郵箱和手機(jī)號(hào)的正則格式驗(yàn)證
?3.點(diǎn)擊注冊(cè) 進(jìn)入后臺(tái)接口數(shù)據(jù)成功后回調(diào)到登錄頁(yè)
登錄功能展示:
登錄就更簡(jiǎn)單了,無(wú)非就是輸入數(shù)據(jù)后給到后臺(tái)接口然后返回用戶(hù)狀態(tài)數(shù)據(jù),如果成功則進(jìn)入首頁(yè),否則提示錯(cuò)誤信息
登陸成功后的后臺(tái)首頁(yè) 包含Echart圖表(也是后臺(tái)獲取的數(shù)據(jù)然后動(dòng)態(tài)渲染為echart圖表)
接下來(lái)就是表格數(shù)據(jù),數(shù)據(jù)都是通過(guò)后臺(tái)接口傳過(guò)來(lái)后進(jìn)行渲染的
1.用戶(hù)列表渲染到el-table中,里面包含增刪改查功能的實(shí)現(xiàn)以及分頁(yè)
?2.菜品列表渲染,包含增刪改查基本功能和分頁(yè)
?3.購(gòu)物車(chē)頁(yè)面
?
?搞完這些后大致也算是入門(mén)了,過(guò)程中遇到很多問(wèn)題,不過(guò)也都解決了,也學(xué)習(xí)到了很多知識(shí),也更加深刻的理解了Vue。也順便分享一下筆記,應(yīng)該能對(duì)你們起到幫助
有道云筆記文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-425687.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-425687.html
到了這里，關(guān)于Vue3+element-plus 后臺(tái)管理系統(tǒng)（含登陸注冊(cè)功能頁(yè)面）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[Vue3 博物館管理系統(tǒng)] 使用Vue3、Element-plus tabs組件構(gòu)建選項(xiàng)卡功能](https://imgs.yssmx.com/Uploads/2024/02/703298-1.png)
