微信小程序> 小程序登录页验证

小程序登录页验证

浏览量:3689 时间: 来源:有个派大星

最近在做小程序,需要实现账号密码登录,

前端页面:

<!--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;    }}

后台大致的原理是,由小程序传过来的用户名和密码,然后通过用户名查询一条数据,然后新的密码通过用户名进行加密,把传过来的密码和加密生成的密码进行对比,成功就允许登录,失败就不通过,大致就是这个原理

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎