【java小程序实战】小程序注销功能实现

小程序实战中，如何实现程序的注销功能呢？后端代码只要删除用户的redi缓存即可。小程序端在成功返回消息后，进行登陆页面的跳转。

页面展示

小程序的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();
    }