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 () { } })
