微信小程序登录(保持登录状态)

简介: 微信小程序登录(保持登录状态)

1.提交用户名与密码与后台校验

小程序端wxml文件,定义账号密码输入框和登录按钮

<label>请输入账号</label>
<input class="input" bindinput="getusername" placeholder="账号"></input>
<label>请输入密码</label>
<input class="input" bindinput="getpassword" placeholder="密码" password="true"></input>
<button class="button" bindtap="signin" type="primary">登录</button>

小程序端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<User,Integer> {
    public User findByUsername(String username);
}

3.小程序登录成功或到跳转到的页面获取保存的用户信息(wx.getStorageSync("user") 此处括号里的值和保存时的一直 根据实体类返回的属性取那个都可以 )

<text>欢迎你登录,{{name}}</text>
// 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 () {
 
  }
})
目录
相关文章
|
2月前
|
小程序 API
微信小程序——授权登录
微信小程序——授权登录
60 0
|
2月前
|
前端开发 小程序 JavaScript
电商小程序04实现登录逻辑
电商小程序04实现登录逻辑
|
17天前
|
JSON 小程序 JavaScript
【微信小程序-原生开发】TDesign 实战模板——账号密码登录页(含密码显示隐藏的技巧)
【微信小程序-原生开发】TDesign 实战模板——账号密码登录页(含密码显示隐藏的技巧)
25 0
|
17天前
|
小程序 开发工具 开发者
【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验
【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验
17 0
|
19天前
|
缓存 前端开发 PHP
【超详细】php实现扫码关注微信公众号系统/网站自动注册登录
【超详细】php实现扫码关注微信公众号系统/网站自动注册登录
17 0
|
2月前
|
小程序 JavaScript 数据库
小程序登录页面
该文介绍了使用小程序云开发实现登录和注册的步骤,包括界面设计和后端逻辑。界面使用了`wxss`和`wxml`编写,样式精致,包含手机号和密码输入、登录按钮、注册和忘记密码选项。在`js`中,重点处理了用户输入的账号和密码,通过云数据库查询验证用户是否存在,使用标志位`flag`判断,若账号或密码错误,显示相应提示。文章总结了利用for循环比对数据库账号的难点,并表达了作者的学习心得。
35 1
|
2月前
|
存储 小程序 前端开发
超简单实现小程序用户授权登录与退出
本文介绍了如何轻松实现小程序的用户授权登录与退出功能。通过调用微信的`wx.getUserProfile` API获取用户信息,成功后存储到本地以实现授权登录,并在WXML、CSS和JS中提供示例代码。用户信息存储使用`wx.setStorageSync`,退出登录则清除相关缓存,提升用户体验。
37 1
|
1月前
|
小程序 前端开发 Java
(JAVA)支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
(JAVA)支付宝小程序登录相关(authToken获取用户唯一userId、encryptedData解密手机号)
|
2月前
如何在PC端登录多个微信号?怎么操作免费多开电脑版微信?
如何在PC端登录多个微信号?怎么操作免费多开电脑版微信?
|
2月前
|
小程序 JavaScript
微信小程序授权登录?
微信小程序授权登录?

热门文章

最新文章