最近在做小程序,需要实现账号密码登录,
前端页面:
<!--pages/index/login/login.wxml--><view class='pages'> <view class='weui-cell-header'> <image class='img' src='/static/img/1.png'/> <text class='weui-fl'>登录</text> </view><form bindsubmit='formSubmit' report-submit='true'> <view class='box'> <view class='section'> <view class='section-box'> <image class='section-img' src='/static/img/ren.png'/> </view> <input placeholder='请输入用户名' name="username" bindblur='togetUsername' value="" /> </view> <view class='section'> <view class='section-box'> <image class='section-img' src='/static/img/m.png'/> </view> <input password='true' bindblur='togetPassword' name="password" placeholder='请输入密码' value="" /> </view> <view class='button'> <button type="primary" formType='submit' bindtap='tj'> 提交</button> </view> </view> </form> <view class='fpwd' bindtap='findpwd'> <text>忘记密码?</text> </view></view>
js:
// pages/index/login/login.jsvar call=require('../../utils/request.js'); Page({ /** * 页面的初始数据 */ data: { username:'', }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.clearStorage() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, togetUsername:function(e){ this.setData({ username: e.detail.value, }) console.log(e.detail.value) }, togetPassword:function(e){ // this.setData({ // password: Md5.hexMD5(e.detail.value) // }) console.log(e.detail.value) }, formSubmit: function (e) { var that=this; // var options=e.detail.value // console.log('form发生了submit事件,携带数据为:', e.detail.value) call.request('login/index', e.detail.value, that.shuffleSuc, that.fail); }, shuffleSuc: function (data) { console.log(data) var areanum=data.user1.areanum wx.setStorageSync("areanum",areanum) if(data.code==0){ wx.redirectTo({ url: '../information/information', }) } else{ wx.showToast({ title: data.msg, image: '/static/img/close.png', }) } }, // tj:function(e){ // wx.navigateTo({ // url: '../information/information', // }) // }, fail: function () { // console.log("失败") },})
写完之后要与后台交互,后台我用的是jeeweb,所要要先去理解mybatis或者mybatis-plus的API,我这里直接上代码:
package com.zlf.modules.xcx.controller;import com.zlf.core.security.shiro.authz.annotation.RequiresPathPermission;import com.zlf.modules.sys.entity.User;import com.zlf.modules.sys.service.IUserService;import org.apache.shiro.crypto.hash.SimpleHash;import org.apache.shiro.util.ByteSource;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.ResponseBody;import javax.annotation.Resource;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.util.HashMap;import java.util.Map;@Controller@RequestMapping("${admin.url.prefix}/xcx/login")@RequiresPathPermission("xcx:login")public class XLoginController { @Resource private IUserService userService; @ResponseBody @RequestMapping(value = "index", method = { RequestMethod.GET, RequestMethod.POST }) public Map Login( User user, HttpServletRequest request, HttpServletResponse httpServletResponse) { User user1 = userService.login(user.getUsername(), null); Map m=new HashMap(); String msg="用户名不存在!";int code=1; //code 1:用户名不存在 2 密码错误 0登录成功 if (null!=user1) { user.setSalt(user1.getSalt()); //密码加密处理 String newPassword = new SimpleHash("md5", user.getPassword(), ByteSource.Util.bytes(user.getCredentialsSalt()), 2).toHex(); if(newPassword.equals(user1.getPassword())){ msg="登录成功!"; code=0; }else{ msg="密码错误!"; code=2; } } m.put("msg",msg); m.put("code",code); m.put("user1",user1); return m; }}
后台大致的原理是,由小程序传过来的用户名和密码,然后通过用户名查询一条数据,然后新的密码通过用户名进行加密,把传过来的密码和加密生成的密码进行对比,成功就允许登录,失败就不通过,大致就是这个原理