小程式實戰中，如何實現程式的登出功能呢？後端程式碼只要刪除使用者的redi快取即可。小程式端在成功返回訊息後，進行登陸頁面的跳轉。

文章目錄

• 小程式的mine.wxml程式碼
• mine.wxss程式碼
• 登出事件的程式碼mine.js
• RegistLoginController 中登出程式碼

小程式的mine.wxml程式碼

<view>
  <view class='container'>

    <image src="{{faceUrl}}" class="face" bindtap='changeFace'></image>
    <label class="nickname">{{nickname}}</label>
    <button size="mini" class="primary" bindtap="uploadVideo">上傳作品</button>
    <button size="mini" type="" class="logout" bindtap='logout'>登出</button>

    <view class="container-row">
      <label class='info-items'>{{fansCounts}} 粉絲</label>
      <label class='info-items'>{{followCounts}} 關注</label>
      <label class='info-items'>{{receiveLikeCounts}} 獲贊</label>
    </view>
  </view>
</view>

<view class='line'></view>
 

mine.wxss程式碼

page {
  font-size: 14px;
}

.container {
   background-color: whitesmoke;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.container-row {
   display: flex;
   flex-direction: row;
   margin-bottom: 10px;
   margin-top: 10px;
}

.info-items {
   margin-left: 30px;
}
.face {
   width: 180rpx;
   height: 180rpx;
   border-radius: 50%;
   margin-top: 20px;
}

.nickname {
   margin-top: 5px;
   font-weight: bold;
   font-size: 18px;
}
.logout {
  margin-top: 3px;
  float: right;
}
.follow {
   margin-top: 3px;
}
.line {
   width: 100%;
   height: 1px;
   background-color: gainsboro;
   margin-top: 1px;
}
.container-video {
   display: flex;
   flex-direction: row;
   margin-top: 20px;
   text-align: center;
   border: solid 1px;
   line-height: 30px;
}

.video-info {
   width: 100%;
}
.video-info-selected {
   background-color: gainsboro;
}

.container-video-list {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}

.videoImage {
   width: 250rpx;
   height: 180px;
}
 

登出事件的程式碼mine.js

通過事件函式發起請求，後端處理成功返回結果，並跳轉至登陸頁面。
設定小程式的全域性變數userInfo為null

   //登出事件
    logout: function () {
      console.log("logout")
      var user = app.userInfo;
      var serverUrl = app.serverUrl;
      wx.showLoading({
        title: '請等待',
      });
      wx.request({
        url: serverUrl+'/logout?userId=' + user.id,
        method:"POST",
        header: {
          'content-type': 'application/json' //預設值
        },
        success: function (res) {
           wx.hideLoading();
           if( res.data.status == 200){
             wx.showToast({
               title: '登出成功',
               icon: 'success',
               duration: 20000
             });
             //登出成功，設定全域性資訊為null
             app.userInfo = null;
             wx.navigateTo({
               url: '../login/login',
             })
           }
        }

      })
    },
 

RegistLoginController 中登出程式碼

根據使用者id，清楚redis中的快取記錄。

  @ApiOperation(value="使用者登出" , notes = "使用者登出的介面")
    @ApiImplicitParam(name = "userId", value = "使用者id" ,required = true,
                      dataType = "String", paramType = "query")
    @PostMapping("/logout")
    public IMoocJSONResult logout(String userId) {
        System.out.println("userId:"+userId);
          redis.del(USER_REDIS_SESSION + ":" + userId);
           return IMoocJSONResult.ok();
    }