微信小程序登录(保持登录状态)
1.提交用户名与密码与后台校验
小程序端wxml文件，定义账号密码输入框和登录按钮
小程序端js文件，定义事件获取输入的账号和密码，定义登录时间校验账号和密码长度，如果符合规则，提交至后台根据用户名查询数据库保存的密码，进行比较，相同返回用户信息并将用户信息保存到本地（wx.setStorageSync("user", res.data)），不同返回null。
// pages/signin/signin.js
Page({
/**
* 页面的初始数据
*/
data: {
username:"",
password:""
},
getusername(event){
this.setData({
username: event.detail.value
})
},
getpassword(event){
this.setData({
password: event.detail.value
})
},
signin(){
let that=this
let username=this.data.username
let password=this.data.password
console.log(this.data)
if(username.length==0){
wx.showToast({
icon:'none',
title: '账号不能为空',
})
return
}
if (password.length ==0) {
wx.showToast({
icon:'onne',
title: '密码不能为空',
})
return
}
if (username.length < 4) {
wx.showToast({
icon: "none",
title: '账号不小于四位',
})
return
}
if (password.length < 4) {
wx.showToast({
icon: "none",
title: '密码不小于四位',
})
return
}
if (username == password) {
wx.showToast({
icon: "none",
title: '账号和密码不能相同',
})
return
}
wx.request({
url: 'http://localhost:8080/signin',
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
data: ({
username: username,
password: password
}),
success(res) {
console.log("返回成功", res)
console.log(res.statusCode)
if (res.statusCode == 200 && res.data.name!=null) {
wx.showToast({
title: "登录成功",
})
wx.navigateTo({
url: '/pages/index/index',
})
wx.setStorageSync("user", res.data)
} else {
wx.showToast({
icon: "none",
title: "登录失败！"
})
}
},
fail(res) {
console.log("返回失败", res)
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})2.java后台校验用户名和密码并返回结果（springboot框架 数据访问采用spring-boot-starter-data-jpa findByUsername是根据框架规则命名会自动生成sql语句查询 findBy+类的属性）
数据表对应的实体类
import javax.persistence.*;
@Entity
@Table
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int id;
private String name;
private String username;
private String password;
public User() {
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
账号密码校验逻辑
@RestController
public class Usercontroller {
@Autowired
UserDao userDao;
@PostMapping("/signin")
public User signin(@RequestParam("username") String username,
@RequestParam("password") String password) {
User byUsername = userDao.findByUsername(username);
if (password.equals(byUsername.getPassword())) {
return byUsername;
} else {
return null;
}
}
}调用的查询方法
public interface UserDao extends JpaRepository {
public User findByUsername(String username);
} 3.小程序登录成功或到跳转到的页面获取保存的用户信息（wx.getStorageSync("user") 此处括号里的值和保存时的一直 根据实体类返回的属性取那个都可以 ）
欢迎你登录,{{name}} // pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
name:""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
let user=wx.getStorageSync("user")
console.log(user)
if(user&&user.name){
this.setData({
name:user.name
})
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})