cml

✍️ Tangxt ⏳ 2021-12-27 🏷️ uni-app

第 9 章 用户登录

1）开篇

在上一章中，我们说到：如果想要完成：关注、收藏、点赞、评论 这些功能的话，那么需要首先完成 用户登录 的功能。

那么这一章中，我们就来看一下，我们应该如何完成 用户登录 的功能实现。

首先我们先来看一下 用户登录 的业务逻辑。

对于 用户登录 来说，主要有两个登录的入口：

1. 在《我的页面》中 -> 也叫个人中心
2. 在调用需要登录权限的功能时

那么在明确了 用户登录 的业务逻辑之后，接下来我们就去实现用户登录的对应功能。

2）用户登录 - 登录页面基本样式

效果：

Demo

3）用户登录 - 封装登录组件

在开篇中，我们说到，对于 登录 功能来说提供了两个登录的入口。

那么大家想一下，现在我们已经在 我的 这个 tab 页 中实现了 登录的 UI，难道我还需要在另外一个页面中再去实现一遍吗？

这个肯定是不需要的，对不对。所以我们希望可以复用登录的 UI，而复用的方式则可以把 登录的 UI 封装称为一个 组件

1. 创建登录组件 my-login
2. 在my里边使用my-login组件

在调用需要登录权限的功能时，进入的登录页面 -> 我们先不需要去创建，等到使用的时候，再创建就可以了。

Demo

4）用户登录 - 明确登录的实现思路

在实现登录的具体功能之前，为了避免一些没有开发经验的同学直接看代码一脸懵逼，我们需要先来明确一下登录的实现基本逻辑。

首先对于登录来说，我们会分为两个不同的端来进行适配实现：

1. 微信小程序
2. 非微信小程序（在讲解适配时实现）

我们这里先只讲解 【微信小程序的实现】，【非微信小程序】的实现将在后面的 适配环节进行。

微信小程序：

1. 想要实现登录功能，那么我们需要调用登录接口来进行实现，而登录接口所需要的参数，我们可以直接通过 getUserProfile 方法进行获取。
2. 调用登录接口成功，服务端会返回用户的 token，这个 token 为当前的用户身份令牌。（拥有 token） 则表示用户已经登录了。
3. 而此处的 token，我们需要在多个组件中进行使用，所以 token 需要被保存到 全局状态管理工具 - vuex 中，同时需要保存的还有通过 getUserProfile 获取到的用户基本信息。
4. 而当前的用户登录状态，我们希望可以一直保存（PS：不需要每次都进行登录）。所以在登录完成后，我们需要把 token 和 userinfo 保存到 本地存储中
5. 最后，为了实现 数据与组件的分离，我们需要把与 与登录相关的逻辑 都封装在 vuex 中进行。

这些业务是 前端用户登录的标准逻辑，大家在以后的前端登录业务处理中，也可以按照此逻辑进行。

那么从下一小节开始，我们就按照这个逻辑实现一下对应的代码。

5）用户登录 - 封装 action 调用登录接口

在上一小节中，我们分析了【微信小程序】中进行登录的实现逻辑，那么从这一小节开始，我们就实现对应的功能。

实现：

1. 在api/user.js里边定义login函数，用来发送POST请求，请求地址是'/sys/login'，传递的数据是「用户信息」
2. 在my-login里边定义getUserInfo方法，用来获取用户信息，这个信息是微信登录的用户信息 -> 把这个用户信息交给在vuex里边定义的login方法，用作登录时的请求参数
3. 在store/user.js里边定义user模块，在store/index.js里边注册user模块，在my-login里边通过mapActions注册user模块的login方法

Demo

6）用户登录 - 保存用户登录状态

用户的登录状态需要被保存到 vuex 中，同时需要进行 本地存储。

• 用户信息
• 用户token

效果：

Demo

7）用户登录 - 完成已登录的用户视图

当 token 存在时，表示用户已经登录了，此时需要 展示用户登录完成的视图：

Demo

8）用户登录 - 实现退出登录功能

删除token和用户信息即可 -> 两个地方需要删除，vuex和本地存储

Demo

9）用户登录 - 判断用户登录状态

截止到目前为止， 用户登录 的功能其实就已经全部构建完毕了。

接下来我们就需要实现：

• 关注用户
• 文章点赞
• 文章收藏
• 文章评论

这四个对应的功能。

之前我们说过，想要实现这四个功能， 那么需要有一个前提条件就是：当前用户已登录。

所以说，我们就需要在用户使用这四个功能之前，来判断用户的登录状态。

也就是说，在 用户登录功能完成之后，我们其实还不可以立刻着手这四个功能的开发，我们还需要进行一步操作，那就是 判断用户的登录状态！

想要判断用户的登录状态，我们依然需要在 vuex 中进行（数据和组件分离）：

Demo

如果用户未登录，则引导用户进入登录页面，那么这一步功能如何进行实现呢？

10）用户登录 - 新建登录页面，处理当前场景

开篇的时候，我们说过，对于 登录 来说，包含有两个入口：

1. 在 《我的页面》中
2. 在调用需要登录权限的功能时

那么此时，就是使用到第二个场景的时候了。

1. 我们创建一个新页面，叫做 login-page，在这个页面中，导入 my-login 组件
2. 当 进行登录判定，用户未登录时，进入 login-page 页面
3. 在 关注 用户时，调用这个isLogin action

注意点：

• uni.showModal的返回值 -> 根据你是点击确定还是点击取消，来决定下一步操作
• uni.showModal的使用 -> 没有用success方法，而是用了async/await去处理 -> 因为需要返回false

效果：

Demo

11）用户登录 - 监听登录成功的状态，返回之前页面

在上一节，我们已经完成了 在调用需要登录权限的功能时，进入登录页面 ，但是当我们登录完成之后，我们 还需要返回之前页面，因为只有这样才能完成我们的功能闭环，所以在这一小节中，我们就去完成这一块的功能：

1. my-login：在登录成功后，发送事件
2. login-page：监听登录成功的事件，并返回上一个页面

效果：

Demo

12）用户登录 - 处理登录时无 loading 的 bug

13）文章操作 - 关注用户

在彻底完成了 登录 相关的内容之后，接下来就可以回过头去实现这四个功能了。

首先我们先去实现 关注用户 的功能：

1. 定义 api 接口
2. 关注用户接口需要传递 token 请求头，所以我们可以在 request.js 中，传递当前的 token
3. 在 blog-detail 中调用 接口

效果（这是已登录情况）：

Demo

14）文章操作 - 处理发表评论的 UI

1. 监听 article-operate 中的 输入框点击事件
2. 在 blog-detail 中展示弹出层
3. 在 blog-detail 中使用 article-comment-commit 组件

Demo

15）文章操作 - 处理评论框的显示问题

现在评论框已经可以显示出来了，但是目前 评论框的显示存在两个问题：

1. 输入内容之后，关闭评论框，再次展示评论框时，之前输入的内容依然存在
2. 在真机中，软键盘会遮挡评论框的展示

那么在本小节中，我们就来处理一下这两个问题：

1. 输入内容之后，关闭评论框，再次展示评论框时，之前输入的内容依然存在：

原因：

当 popup 关闭时，article-comment-commit 组件 并未销毁，依然存在

解决方案：

监听 popup 的关闭事件，通过 v-if 控制 article-comment-commit 组件的销毁

2. 在真机中，软键盘会遮挡评论框的展示

原因：

软键盘弹出，占用了底部空间

解决方案：

检测软键盘的弹出事件，动态修改 article-comment-commit 组件的位置

---

效果：

Demo

16）文章操作 - 发表评论

在一切准备就绪之后，最后就可以实现 发表评论 的功能了。

1. 在 api/user 中，定义发表评论的接口
2. 在 article-comment-commit 中调用接口，发表评论
3. 在 blog-detail 中传递 id ，处理评论成功之后的操作

效果：

发送完就关闭遮罩层！

Demo

注意：

• 单点登录 -> 有两个项目，完成后的项目，开发中的项目，你不能用一个账号同时登录这两个项目，这是互斥的，不然，token会冲突！

17）文章操作 - 回显评论数据

1. article-comment-commit ：评论发布成功，传递评论数据对象
2. article-comment-list：增加添加评论项的方法
3. blog-detail：评论成功后，调用添加评论项的方法

效果：

Demo

注意点：

• 调用组件实例的方法：this.$refs.mescrollItem.addCommentList(data)

18）文章操作 - 关于点赞和收藏的功能实现

因为 点赞 和 收藏 的功能实现和 关注，几乎一致，所以：

点赞 和 收藏 的功能作为课下作业让大家进行实现，视频中不在进行讲解。

实现代码会在 文档 和 最终代码 中进行体现，供大家进行参考。

💡：点赞功能实现代码

效果：

Demo

如果有null值的情况，那就不要用required: true了，不然，控制台会有警告

➹：Shouldn’t null be accepted as prop value with any type? - Get Help - Vue Forum

➹：『 Vue 小 Case 』- Vue Prop 中的 null vs undefined - 知乎

💡：收藏功能实现代码

效果：

Demo

19）总结

在这一大章中，我们完成了整个的【用户登录】以及【文章详情】的功能。

针对于【用户登录】来说，我们使用 vuex 来对 【组件】和【数据】进行了分离。

所有与【用户登录】相关的数据操作，都被封装到了 vuex 之中，这样做的好处在于：我们可以在多个组件中对数据进行操作，而不需要担心其影响 单向数据流的简洁性。

而【文章详情】的剩余功能，我们在视频中完成了【关注】和【发布评论】两个功能，而把【点赞】和【收藏】留做了课下作业。这样做的目的是 可以让大家有能够独立思考，以及独立完成功能的机会。

那么到现在为止，我们项目还剩余【热播】模块没有完成，那么从下一章开始，我们就要搞定【热播】模块啦。