【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();
}