第 9 章 用户登录
1)开篇
在上一章中,我们说到:如果想要完成:关注、收藏、点赞、评论 这些功能的话,那么需要首先完成 用户登录 的功能。
那么这一章中,我们就来看一下,我们应该如何完成 用户登录 的功能实现。
首先我们先来看一下 用户登录 的业务逻辑。
对于 用户登录 来说,主要有两个登录的入口:
- 在《我的页面》中 -> 也叫个人中心
- 在调用需要登录权限的功能时
那么在明确了 用户登录 的业务逻辑之后,接下来我们就去实现用户登录的对应功能。
2)用户登录 - 登录页面基本样式
效果:
3)用户登录 - 封装登录组件
在开篇中,我们说到,对于 登录 功能来说提供了两个登录的入口。
那么大家想一下,现在我们已经在 我的 这个 tab 页
中实现了 登录的 UI
,难道我还需要在另外一个页面中再去实现一遍吗?
这个肯定是不需要的,对不对。所以我们希望可以复用登录的 UI
,而复用的方式则可以把 登录的 UI
封装称为一个 组件
- 创建登录组件
my-login
- 在
my
里边使用my-login
组件
在调用需要登录权限的功能时,进入的登录页面 -> 我们先不需要去创建,等到使用的时候,再创建就可以了。
4)用户登录 - 明确登录的实现思路
在实现登录的具体功能之前,为了避免一些没有开发经验的同学直接看代码一脸懵逼,我们需要先来明确一下登录的实现基本逻辑。
首先对于登录来说,我们会分为两个不同的端来进行适配实现:
- 微信小程序
- 非微信小程序(在讲解适配时实现)
我们这里先只讲解 【微信小程序的实现】,【非微信小程序】的实现将在后面的 适配环节进行。
微信小程序:
- 想要实现登录功能,那么我们需要调用登录接口来进行实现,而登录接口所需要的参数,我们可以直接通过
getUserProfile
方法进行获取。 - 调用登录接口成功,服务端会返回用户的
token
,这个token
为当前的用户身份令牌。(拥有 token) 则表示用户已经登录了。 - 而此处的
token
,我们需要在多个组件中进行使用,所以token
需要被保存到全局状态管理工具 - vuex
中,同时需要保存的还有通过getUserProfile
获取到的用户基本信息。 - 而当前的用户登录状态,我们希望可以一直保存(PS:不需要每次都进行登录)。所以在登录完成后,我们需要把
token
和userinfo
保存到 本地存储中 - 最后,为了实现 数据与组件的分离,我们需要把与 与登录相关的逻辑 都封装在
vuex
中进行。
这些业务是 前端用户登录的标准逻辑,大家在以后的前端登录业务处理中,也可以按照此逻辑进行。
那么从下一小节开始,我们就按照这个逻辑实现一下对应的代码。
5)用户登录 - 封装 action 调用登录接口
在上一小节中,我们分析了【微信小程序】中进行登录的实现逻辑,那么从这一小节开始,我们就实现对应的功能。
实现:
- 在
api/user.js
里边定义login
函数,用来发送POST
请求,请求地址是'/sys/login'
,传递的数据是「用户信息」 - 在
my-login
里边定义getUserInfo
方法,用来获取用户信息,这个信息是微信登录的用户信息 -> 把这个用户信息交给在vuex
里边定义的login
方法,用作登录时的请求参数 - 在
store/user.js
里边定义user
模块,在store/index.js
里边注册user
模块,在my-login
里边通过mapActions
注册user
模块的login
方法
6)用户登录 - 保存用户登录状态
用户的登录状态需要被保存到 vuex
中,同时需要进行 本地存储。
- 用户信息
- 用户
token
效果:
7)用户登录 - 完成已登录的用户视图
当 token
存在时,表示用户已经登录了,此时需要 展示用户登录完成的视图:
8)用户登录 - 实现退出登录功能
删除token
和用户信息即可 -> 两个地方需要删除,vuex
和本地存储
9)用户登录 - 判断用户登录状态
截止到目前为止, 用户登录 的功能其实就已经全部构建完毕了。
接下来我们就需要实现:
- 关注用户
- 文章点赞
- 文章收藏
- 文章评论
这四个对应的功能。
之前我们说过,想要实现这四个功能, 那么需要有一个前提条件就是:当前用户已登录。
所以说,我们就需要在用户使用这四个功能之前,来判断用户的登录状态。
也就是说,在 用户登录功能完成之后,我们其实还不可以立刻着手这四个功能的开发,我们还需要进行一步操作,那就是 判断用户的登录状态!
想要判断用户的登录状态,我们依然需要在 vuex
中进行(数据和组件分离):
如果用户未登录,则引导用户进入登录页面,那么这一步功能如何进行实现呢?
10)用户登录 - 新建登录页面,处理当前场景
开篇的时候,我们说过,对于 登录 来说,包含有两个入口:
- 在 《我的页面》中
- 在调用需要登录权限的功能时
那么此时,就是使用到第二个场景的时候了。
- 我们创建一个新页面,叫做
login-page
,在这个页面中,导入my-login
组件 - 当 进行登录判定,用户未登录时,进入
login-page
页面 - 在 关注 用户时,调用这个
isLogin
action
注意点:
uni.showModal
的返回值 -> 根据你是点击确定还是点击取消,来决定下一步操作uni.showModal
的使用 -> 没有用success
方法,而是用了async/await
去处理 -> 因为需要返回false
效果:
11)用户登录 - 监听登录成功的状态,返回之前页面
在上一节,我们已经完成了 在调用需要登录权限的功能时,进入登录页面 ,但是当我们登录完成之后,我们 还需要返回之前页面,因为只有这样才能完成我们的功能闭环,所以在这一小节中,我们就去完成这一块的功能:
my-login
:在登录成功后,发送事件login-page
:监听登录成功的事件,并返回上一个页面
效果:
12)用户登录 - 处理登录时无 loading 的 bug
13)文章操作 - 关注用户
在彻底完成了 登录 相关的内容之后,接下来就可以回过头去实现这四个功能了。
首先我们先去实现 关注用户 的功能:
- 定义
api
接口 - 关注用户接口需要传递
token
请求头,所以我们可以在request.js
中,传递当前的token
- 在
blog-detail
中调用 接口
效果(这是已登录情况):
14)文章操作 - 处理发表评论的 UI
- 监听
article-operate
中的 输入框点击事件 - 在
blog-detail
中展示弹出层 - 在
blog-detail
中使用article-comment-commit
组件
15)文章操作 - 处理评论框的显示问题
现在评论框已经可以显示出来了,但是目前 评论框的显示存在两个问题:
- 输入内容之后,关闭评论框,再次展示评论框时,之前输入的内容依然存在
- 在真机中,软键盘会遮挡评论框的展示
那么在本小节中,我们就来处理一下这两个问题:
1. 输入内容之后,关闭评论框,再次展示评论框时,之前输入的内容依然存在:
原因:
当 popup
关闭时,article-comment-commit
组件 并未销毁,依然存在
解决方案:
监听 popup
的关闭事件,通过 v-if
控制 article-comment-commit
组件的销毁
2. 在真机中,软键盘会遮挡评论框的展示
原因:
软键盘弹出,占用了底部空间
解决方案:
检测软键盘的弹出事件,动态修改 article-comment-commit
组件的位置
效果:
16)文章操作 - 发表评论
在一切准备就绪之后,最后就可以实现 发表评论 的功能了。
- 在
api/user
中,定义发表评论的接口 - 在
article-comment-commit
中调用接口,发表评论 - 在
blog-detail
中传递id
,处理评论成功之后的操作
效果:
发送完就关闭遮罩层!
注意:
- 单点登录 -> 有两个项目,完成后的项目,开发中的项目,你不能用一个账号同时登录这两个项目,这是互斥的,不然,
token
会冲突!
17)文章操作 - 回显评论数据
article-comment-commit
:评论发布成功,传递评论数据对象article-comment-list
:增加添加评论项的方法blog-detail
:评论成功后,调用添加评论项的方法
效果:
注意点:
- 调用组件实例的方法:
this.$refs.mescrollItem.addCommentList(data)
18)文章操作 - 关于点赞和收藏的功能实现
因为 点赞 和 收藏 的功能实现和 关注,几乎一致,所以:
点赞 和 收藏 的功能作为课下作业让大家进行实现,视频中不在进行讲解。
实现代码会在 文档 和 最终代码 中进行体现,供大家进行参考。
💡:点赞功能实现代码
效果:
如果有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 - 知乎
💡:收藏功能实现代码
效果:
19)总结
在这一大章中,我们完成了整个的【用户登录】以及【文章详情】的功能。
针对于【用户登录】来说,我们使用 vuex
来对 【组件】和【数据】进行了分离。
所有与【用户登录】相关的数据操作,都被封装到了 vuex
之中,这样做的好处在于:我们可以在多个组件中对数据进行操作,而不需要担心其影响 单向数据流的简洁性。
而【文章详情】的剩余功能,我们在视频中完成了【关注】和【发布评论】两个功能,而把【点赞】和【收藏】留做了课下作业。这样做的目的是 可以让大家有能够独立思考,以及独立完成功能的机会。
那么到现在为止,我们项目还剩余【热播】模块没有完成,那么从下一章开始,我们就要搞定【热播】模块啦。