feat: 《分布式IM即时通讯系统》-大前端UI-第03节

binghe001 · Feb 12, 2024 · 7a1f347 · 7a1f347
1 parent 3b04189
commit 7a1f347
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -340,6 +340,7 @@
 * [《分布式IM系统》大后端平台-视频通话-第07节：视频通话同步会话状态流程设计和实现](https://t.zsxq.com/17qNQjedo)
 * [《分布式IM系统》大前端UI-第01节-Node.js基础环境搭建](https://t.zsxq.com/17SdXEV8q)
 * [《分布式IM系统》大前端UI-第02节-通用基础功能设计与研发](https://t.zsxq.com/17SQaWzqH)
+* [《分布式IM系统》大前端UI-第03节-注册与登录流程的设计与实现](https://t.zsxq.com/17UBl1WVE)
 
 ### 💥 Seckill秒杀系统
 

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -2585,6 +2585,7 @@ function getBarPeojectIM() {
             children: [
                 "front/2024-02-07-chapter01.md",
                 "front/2024-02-08-chapter02.md",
+                "front/2024-02-09-chapter03.md",
             ]
         },
         {

diff --git a/docs/.vuepress/public/images/project/im/2024-02-09-001.png b/docs/.vuepress/public/images/project/im/2024-02-09-001.png
diff --git a/docs/md/all/all.md b/docs/md/all/all.md
@@ -330,6 +330,7 @@ title: 冰河指南
 * [《分布式IM系统》大后端平台-视频通话-第07节：视频通话同步会话状态流程设计和实现](https://t.zsxq.com/17qNQjedo)
 * [《分布式IM系统》大前端UI-第01节-Node.js基础环境搭建](https://t.zsxq.com/17SdXEV8q)
 * [《分布式IM系统》大前端UI-第02节-通用基础功能设计与研发](https://t.zsxq.com/17SQaWzqH)
+* [《分布式IM系统》大前端UI-第03节-注册与登录流程的设计与实现](https://t.zsxq.com/17UBl1WVE)
 
 ### 💥 分布式Seckill秒杀系统
 

diff --git a/docs/md/other/guide-to-reading.md b/docs/md/other/guide-to-reading.md
@@ -307,6 +307,7 @@ title: 冰河指南
 * [《分布式IM系统》大后端平台-视频通话-第07节：视频通话同步会话状态流程设计和实现](https://t.zsxq.com/17qNQjedo)
 * [《分布式IM系统》大前端UI-第01节-Node.js基础环境搭建](https://t.zsxq.com/17SdXEV8q)
 * [《分布式IM系统》大前端UI-第02节-通用基础功能设计与研发](https://t.zsxq.com/17SQaWzqH)
+* [《分布式IM系统》大前端UI-第03节-注册与登录流程的设计与实现](https://t.zsxq.com/17UBl1WVE)
 
 ### 💥 Seckill秒杀系统
 

diff --git a/docs/md/project/im/front/2024-02-07-chapter01.md b/docs/md/project/im/front/2024-02-07-chapter01.md
@@ -1,5 +1,5 @@
 ---
-title: 第01节-Node.js基础环境搭建
+title: 第01节：Node.js基础环境搭建
 pay: https://t.zsxq.com/17SdXEV8q
 ---
 

diff --git a/docs/md/project/im/front/2024-02-08-chapter02.md b/docs/md/project/im/front/2024-02-08-chapter02.md
@@ -1,5 +1,5 @@
 ---
-title: 第02节-通用基础功能设计与研发
+title: 第02节：通用基础功能设计与研发
 pay: https://t.zsxq.com/17SQaWzqH
 ---
 

diff --git a/docs/md/project/im/front/2024-02-09-chapter03.md b/docs/md/project/im/front/2024-02-09-chapter03.md
@@ -0,0 +1,52 @@
+---
+title: 第03节：注册与登录流程的设计与实现
+pay: https://t.zsxq.com/17UBl1WVE
+---
+
+# 《分布式IM系统》大前端UI-第03节-注册登录流程的设计与实现
+
+作者：冰河
+<br/>星球：[http://m6z.cn/6aeFbs](http://m6z.cn/6aeFbs)
+<br/>博客：[https://binghe.gitcode.host](https://binghe.gitcode.host)
+<br/>文章汇总：[https://binghe.gitcode.host/md/all/all.html](https://binghe.gitcode.host/md/all/all.html)
+<br/>源码获取地址：[https://t.zsxq.com/0dhvFs5oR](https://t.zsxq.com/0dhvFs5oR)
+<br/>课程视频：[https://t.zsxq.com/17UBl1WVE](https://t.zsxq.com/17UBl1WVE)
+
+> 沉淀，成长，突破，帮助他人，成就自我。
+
+* 本节难度：★★☆☆☆
+* 本节重点：对于大前端UI的注册与登录流程进行设计和实现，开发注册登录的前端页面，并能够正常调用后端接口完成数据的交互过程，掌握VUE调用后端接口的方式方法，并能够将其灵活应用到自身实际项目中。
+* 课程视频：[https://t.zsxq.com/17UBl1WVE](https://t.zsxq.com/17UBl1WVE)
+
+**大家好，我是冰河~~**
+
+用户需要注册一个账号并且登录分布式IM即时通讯系统后，才能体验分布式IM即时通讯系统的功能。所以，在开发分布式IM即时通讯系统的大前端UI页面时，第一步就是要设计和实现注册登录的流程。
+
+## 一、前言
+
+在前面的文章中，我们已经搭建了研发大前端UI的基础环境，并且搭建了项目工程，也对通用的基础功能进行了设计和实现，为开发大前端UI页面做好了准备。接下来，我们就从最简单的注册登录功能开始设计和研发。
+
+## 二、本节诉求
+
+对于大前端UI的注册与登录流程进行设计和实现，设计并开发注册登录的前端页面，并能够正常调用后端接口完成数据的交互过程，掌握VUE调用后端接口的方式方法，并能够将其灵活应用到自身实际项目中。
+
+## 三、前端UI设计
+
+对于注册和登录页面来说，我们也是保留了最基础最核心的功能，没有太多冗余复杂的功能。我们希望打开页面链接时，如果没有登录系统，首先出现的是登录页面，输入账号和密码就可以登录系统。如果此时没有账号的话，就可以点击“没有账号，前往注册”跳转到注册页面来注册账号，从注册页面也可以点击“已有账号，前往登录”跳转到登录页面。
+
+### 3.1 登录页面的设计
+
+对于登录页面来说，我们简化了复杂冗余的登录流程，只需要输入用户名和密码，点击登录按钮即可登录系统，并且如果此时用户没有账号的话，可以点击“没有账号，前往注册”跳转到注册页面来注册自己的账号，登录页面的设计如图3-1所示。
+
+<div align="center">
+    <img src="https://binghe.gitcode.host/images/project/im/2024-02-09-001.png?raw=true" width="70%">
+    <br/>
+</div>
+
+### 3.2 注册页面的设计
+
+对于注册页面来说，我们同样简化了复杂冗余的注册流程，只需要输入用户名、昵称、密码和确认密码，点击注册按钮即可注册账号，如果此时已有登录账号的话，可以点击“已有账号，前往登录”跳转到登录页面。注册页面的整体设计如图3-2所示。
+
+## 查看完整文章
+
+加入[冰河技术](https://public.zsxq.com/groups/48848484411888.html)知识星球，解锁完整技术文章与完整代码