Web前端应用开发项目式教程（基于uni-app框架） 课件 任务7　实现登录注册功能

任务7

实现登录注册功能Web前端应用开发项目式教程（基于uni-app框架）

目录CONTENTS017.5任务实施7.7学习自评Part17.1任务描述7.2任务效果7.4知识储备7.8课后练习7.9任务拓展7.3学习目标7.6任务测试本任务将实现启嘉校园的用户登录注册功能，常见的用户登录注册方式有账号密码登录、手机号或邮箱登录、第三方平台账号登录（如QQ、微信、微博等）、小程序终端授权登录等。由于启嘉校园是利用我国企业自主研发的跨平台应用框架Uniapp开发的，具有一套代码多端发布的优势，因此为了兼容不同终端的登录，最终选择账号密码登录和小程序授权。

7.1任务描述

7.2任务效果任务效果扫描二维码查看。

7.3学习目标能力目标素养目标知识目标通过模块封装和本地存储，培养学习者良好的编码习惯和行业开发技巧的认知。通过前后端分离开发模式，培养学习者团队合作精神和缜密思维习惯。通过登录注册功能的开发，培养学习者信息安全意识。通过开发框架的技术优势，培养学习者爱国情怀，推进文化自信自强。了解常用登录注册方式。了解微信小程序授权登录流程。了解前后端分离开发模式及其优点。了解JWT实现身份验证解决方案及其特点。了解请求封装方法及其优点。掌握使用uni.request方法进行接口调用。掌握使用Vue实现后端数据绑定。掌握uni.login登录方法的使用。掌握本地缓存技术的使用。掌握uni-app条件编译的使用。掌握uni-app应用生命周期方法的使用。掌握uni-appgetApp获取当前应用实例方法的使用。掌握uni-appglobalData全局变量机制的使用。能够使用uni-app调用后端接口。能够使用uni.login方法和后端登录接口实现微信小程序授权登录功能。能够使用本地缓存技术实现维护用户登录状态功能。能够使用uni-app条件编译兼容小程序和H5端登录方式和网络请求地址存在的差异。

7.4知识储备HTTP协议的特点类型无连接无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。媒体独立只要客户端和服务器知道如何处理的数据内容都可以通过HTTP协议传输。客户端以及服务器指定适合的MIME-type类型来描述传输的内容。大多数Web浏览器都拥有一系列可配置的辅助应用程序，它们告诉浏览器应该如何处理Web服务器发送过来的各种类型的内容。无状态无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要之前的信息时它的应答就较快。7.4.1HTTP请求

HTTP（HyperTextTransferProtocol，超文本传输协议）是一套计算机通过网络进行通信的规则。通过HTTP协议可以使客户端（如Web浏览器）从服务端（如Web服务器）请求信息和服务，HTTP遵循请求（Request）/应答（Response）模型，即客户端向服务端发送请求，服务端处理请求并返回应答，所有HTTP连接都被构造成一套请求和应答。

7.4知识储备七大步骤建立TCP连接Web浏览器向Web服务器发送请求命令7.4.1HTTP请求通信步骤Web浏览器发送请求头信息Web服务器应答Web服务器发送应答头信息Web服务器向浏览器发送数据Web服务器关闭TCP连接

7.4知识储备7.4.1HTTP请求请求方式方法描述GET请求指定的页面信息，并返回实体主体HEAD类似于GET请求，只不过返回的响应中没有具体的内容，用于获取报头POST向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改PUT从客户端向服务器传送的数据取代指定的文档的内容DELETE请求服务器删除指定的页面CONNECTHTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器OPTIONS允许客户端查看服务器的性能TRACE回显服务器收到的请求，主要用于测试或诊断

7.4知识储备7.4.1HTTP请求消息结构客户端请求消息：客户端向服务器端发送的HTTP请求消息包括请求行（RequestLine）、请求头部（Header）、空行和请求数据四个部分。服务器响应消息：HTTP响应消息也由四个部分组成，分别是状态行、消息报头、空行和响应正文。状态码

服务器响应客户端请求时，首先会返回一个包含HTTP状态码的信息头（ServerHeader）给客户端。HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型。响应分为五类：信息响应（100-199），成功响应（200-299），重定向（300-399），客户端错误（400-499）和服务器错误（500-599）。常见的HTTP状态码如下：200：请求成功301：资源（网页等）被永久转移到其它URL404：请求的资源（网页等）不存在。500：内部服务器错误。

7.4知识储备7.4.1

HTTP请求接口设计规范在接口设计中存在一个被普遍认可和遵守的设计原则——RESTful原则。其核心是将API拆分为逻辑上的资源，RESTful设计原则可以促使开发者更加规范的使用HTTP协议。GET/tickets：获取ticket列表。GET/tickets/12：查看某个具体的ticket。POST/tickets：新建一个ticket。PUT/tickets/12：更新ticket12。DELETE/tickets/12：删除ticekt12。GET/tickets/12/messages：获取关于ticket12的messages。GET/tickets/12/messages/5：获取关于ticket12的某个具体messages。POST/tickets/12/messages：新建关于ticket12的messages。PUT/tickets/12/messages/5：更新关于ticket12的messages5。PATCH/tickets/12/messages/5：局部更新关于ticket12的messages5。DELETE/tickets/12/messages/5：删除关于ticket12的messages5。

7.4知识储备7.4.2uni-app发送网络请求uni-app使用uni.request方法发送网络请求，在各个小程序平台运行时，网络相关的API在使用前需要配置域名白名单。参数名类型必填默认值说明平台差异说明urlString是

开发者服务器接口地址

dataObject/String/ArrayBuffer否

请求的参数App3.3.7以下不支持ArrayBuffer类型headerObject否

设置请求的header，header中不能设置RefererApp、H5端会自动带上cookie，且H5端不可手动修改methodString否GET有效值详见下方说明

timeoutNumber否60000超时时间，单位msH5(HBuilderX2.9.9+)、APP(HBuilderX2.9.9+)、微信小程序（2.10.0）、支付宝小程序successFunction否

收到开发者服务器成功返回的回调函数

failFunction否

接口调用失败的回调函数

completeFunction否

接口调用结束的回调函数（调用成功、失败都会执行）

7.4知识储备7.4.2uni-app发送网络请求method参数表示请求方式，其值必须为大写，每个平台支持的method有效值不同methodAppH5微信小程序支付宝小程序百度小程序字节跳动小程序、飞书小程序快手小程序京东小程序GET√√√√√√√√POST√√√√√√√√PUT√√√x√√xxDELETE√√√x√xxxCONNECTx√√xxxxxHEAD√√√x√xxxOPTIONS√√√x√xxxTRACEx√√xxxxx

7.4知识储备7.4.2uni-app发送网络请求success参数表示成功后的回调函数，其返回参数说明如下表所示。参数类型说明dataObject/String/ArrayBuffer开发者服务器返回的数据statusCodeNumber开发者服务器返回的HTTP状态码headerObject开发者服务器返回的HTTPResponseHeadercookiesArray.<string>开发者服务器返回的cookies，格式为字符串数组uni.request方法的使用示例如下。

7.4知识储备7.4.3应用生命周期uni-app支持应用生命周期函数见表函数名说明onLaunch当uni-app初始化完成时触发（全局只触发一次）onShow当uni-app启动，或从后台进入前台显示onHide当uni-app从前台进入后台onError当uni-app报错时触发onUniNViewMessage对nvue页面发送的数据进行监听onUnhandledRejection对未处理的Promise拒绝事件监听函数（2.8.1+）onPageNotFound页面不存在监听函数onThemeChange监听系统主题变化应用生命周期函数的使用示例

7.4知识储备7.4.3应用生命周期注意事项：应用生命周期仅可在App.vue中监听，在其他页面监听无效。应用启动参数，可以在APIuni.getLaunchOptionsSync获取。onlaunch里进行页面跳转，如遇白屏报错，请参考/article/35942。onPageNotFound页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，API跳转不存在的页面不会触发（如uni.navigateTo）。

7.4知识储备7.4.4获取当前应用实例方法getApp()函数用于获取当前应用实例，一般用于获取globalData注意事项：不要在定义App()内的函数中，或调用App前调用getApp()，可以通过this.$scope获取对应的app实例。通过getApp()获取实例之后，不要私自调用生命周期函数。当在首页nvue中使用getApp()不一定可以获取真正的App对象。对此提供了constapp=getApp({allowDefault:true})用来获取原始的App对象，可以用来在首页对globalData等初始化。

7.4知识储备7.4.5globalData全局变量机制JS中操作globalData的方式：getApp().globalData.text='test'。在应用onLaunch时，getApp对象还未获取，暂时可以使用this.globalData获取globalData。如果需要把globalData的数据绑定到页面上，可在页面的onShow生命周期函数里进行变量重赋值。如果在nvue的weex编译模式下使用globalData，由于weex生命周期不支持onShow，那么可以监听webview的show事件来实现onShow效果，或者直接使用weex生命周期中的beforeCreate函数。。globalData是简单的全局变量，如果使用状态管理，请使用vuex（main.js中定义）。小程序有globalData，这是一种简单的全局变量机制。这套机制在uni-app里也可以使用，并且全端通用。

7.5任务实施7.5.1微信授权登录登录流程逻辑分析（1）在小程序端向微信接口服务发起授权登录请求，获取临时登录授权凭证code。（2）前端开发者通过调用开发者服务器的登录接口，将code发送给开发者服务器。（3）开发者服务器在接收到code后，将code与项目的appid和appsecret一并发送给微信接口服务，微信接口服务收到这些信息后，会生成一个session_key和openid返回给开发者服务器。（4）开发者服务器接收到微信接口服务返回的session_key和openid后，会生成一个与session_key和openid关联的自定义登录态（一般为Token），这个自定义登录态便是用户的登录令牌。（5）开发者服务器将自定义登录态和登录后需要展示的用户基本信息返回给小程序端，小程序接收到这些信息后便完成了微信授权登录流程。

7.5任务实施7.5.1微信授权登录接口分析

实现登录功能需要三个接口，分别为微信授权接口、后端登录接口和查询用户信息接口。其中微信授权接口wx.login由微信接口服务提供，为方便开发者使用，uni-app将其封装到uni.login方法中（1）用户登录接口API地址：{{HOST_API}}/account/loginAPI请求方式：POSTAPI请求：见表注意API地址中的“{{HOST_API}}”为一个常量，代表接口的服务地址，在项目准备部分我们已经将接口部署到本地，读者需要在/api/index.js文件中将HOST_API值设置为本地部署的接口服务地址。参数字段名数据类型说明codestring微信临时请求凭证

7.5任务实施7.5.1微信授权登录API返回的响应参数参数字段名数据类型说明successBoolean响应状态codeNumber响应码messageString响应消息dataObject返回数据data.userObject用户信息data.user.userIdString用户iddata.user.idNumber用户查询iddata.user.userNameString用户名data.user.classIdString班级iddata.user.phoneNumberObject电话号码data.user.fansNumNumber粉丝数data.user.sexString性别0保密1女性2男性data.user.isDeletedString删除状态0可用1删除（删除后相关信息不可见）data.user.avatarString头像地址data.user.signatureString个性签名data.user.createTimeString创建时间data.user.updateTimeString更新时间data.user.tokenString认证令牌data.user.badgeNumber成就徽章0萌新小白1优质博主参数字段名数据类型说明

7.5任务实施7.5.1微信授权登录用户登录接口调用成功后，会返回上表中的响应数据，该数据结构符合http响应字段的标准结构。其中success为响应状态，值为true或false，代表接口请求成功或失败；code为响应状态码，具体响应状态码见下表；massage为响应消息，储存提示的文本信息；data为一个响应对象，存储业务数据。由于接口响应数据较多，下面仅展示一部分。错误码错误信息-1失败（此错误响应表明程序中发生了一个未知异常）101该用户不存在102该用户被禁用103用户权限异常104无效签名105token过期106token算法不一致107无效token108两次密码不一致109该用户已注册110密码错误301添加数据失败

7.5任务实施7.5.1微信授权登录（2）查询用户基本信息接口API地址：{{HOST_API}}/account/userInfoAPI请求方式：GETAPI请求：见下表

7.5任务实施7.5.1微信授权登录代码实现

实际开发中，一般会对网络请求进行封装，在封装方法中配置接口的请求地址和公共请求参数，添加接口响应状态的公共处理方法等，以便实现对请求和响应的管理和后期的维护、拓展。下面我们将网络请求封装到一个单独的文件中。

在根目录创建名为“api”的目录，用于存放网络请求封装方法文件。在/api目录下新建js文件，文件命名为“index”，文件最终路径为“/api/index.js”。编写网络请求封装代码，部分内容如下，详细代码请见教材。

7.5任务实施7.5.1微信授权登录代码实现

完成网络请求封装后，便可引入该模块编写用户登录接口和查询用户信息接口的调用方法，我们将同一页面或组件中所有接口的调用方法编写到同一个文件中，使代码整体结构清晰、代码复用性高且易于后期维护。在/api目录下创建名为“my”的目录，用于存放个人中心页接口调用方法文件。在/api/my目录下新建js文件，文件命名为“my”，文件最终路径为“/api/my/my.js”。编写调用用户登录接口和查询用户信息接口的方法，代码内容如下。//引入网络请求方法importrequestfrom"@/api/index.js"

//用户登录exportfunctionpostLoginApi(data){returnrequest({url:"/account/login",method:"post",data})}//查询用户信息exportfunctiongetUserInfo(){returnrequest({url:"/account/userInfo",method:"get"})}

7.5任务实施7.5.1微信授权登录代码实现获取微信授权码code，然后通过uni.getUserProfile获取用户信息，将code和用户信息作为参数调用登录接口请求方法获取登录令牌token，最后将token作为参数调用查询用户信息接口请求方法获取用户头像、昵称等信息。实现微信授权登录业务逻辑，部分代码如下，全部代码请见教材

7.5任务实施7.5.2获取用户个人数据逻辑分析用户登录接口调用成功后获取用户个人数据，相关逻辑如下：（1）调用后端接口获取用户文章、关注和粉丝数量。（2）将获取的数据赋值给Vue数据对象中对应属性。（3）用户退出登录后，将Vue数据对象中对应属性重新赋值为0。接口分析用户文章、关注和粉丝相关数据通过“查询用户个人数据”后端接口获取，接口详情如下：API地址：{{HOST_API}}/user/numAPI请求方式：GET

API请求：见下表参数字段名数据类型说明tokenText认证令牌

7.5任务实施7.5.2获取用户个人数据代码实现在“/api/my/my.js”文件中，编写调用获取用户个人数据接口的方法，代码如下。在“/pages/my/my.vue”文件，登录后执行的方法handleAfterLogin中添加调用获取用户个人数据方法。部分代码如下，全部代码见教材。

7.5任务实施7.5.3维护用户登录状态维护用户登录状态分保持登录状态和退出登录，保持登录状态为用户登录时间具有一定的时效性，用户登录后在有效期内重新打开小程序无需重复登录；退出登录为登录状态到期自动退出登录或用户主动退出登录。登录令牌token用于判断用户的登录状态，因此可以通过维护token实现登录状态的维护。逻辑分析由于登录令牌token是无状态的，所以不会保存在服务器端，只保存在客户端。可以通过本地缓存技术将token保存到客户端，需要使用token时，直接从本地缓存中读取。项目中大部分后端接口都需要登录后才可以进行调用，因此可以在调用后端接口时将token作为参数传递给服务器，用于服务器验证用户的登录状态。本任务中我们将token保存到本地，为了方便维护用户登录状态，相关逻辑如下：（1）用户登录成功后，通过uni.setStorageSync将token写到本地中。（2）页面载入时，在uni-app页面生命周期onShow方法中，通过uni.getStorageSync从本地读取token，进行相关业务处理；（3）用户退出登录时，通过uni.setStorageSync将token赋值为Null，同时将储存token、用户基本信息和用户个人数据的Vue数据对象清空，从而恢复到未登录状态。

7.5任务实施7.5.3维护用户登录状态接口分析token的本地缓存读取使用uni.setStorageSync和uni.getStorageSync方法实现，无需后端接口支持，退出登录同样仅需要从本地缓存中删除token即可。代码实现维护登录状态存在于“启嘉校园”项目的多个页面中，因此我们可以将这部分业务逻辑放到项目的入口文件“App.vue”中。部分代码如下，全部代码见教材

7.5任务实施7.5.3维护用户登录状态完成token的本地缓存读写方法后，即可取消子任务7.5.1中相关代码注释，此时登录状态下重新打开小程序会从本地中读取token，并判断是否需要重新登录。登录状态的维护还需要实现用户退出登录，用户点击退出登录按钮后从本地缓存中删除保存的token值。部分代码如下：

7.6任务测试测试条目是否通过点击头像可以调起微信授权登录窗口

微信授权登录成功后，在个人中心页展示出用户的昵称、头像及成就徽章

微信授权登录成功后，在个人中心页展示出用户的文章、关注及粉丝数量

用户退出登录后，个人中心页恢复到未登录状态

用户登录成功后，重新打开小程序个人中心页仍处于登录状