若依系统结合微信小程序实现sys-user表中的user用户登录

后台一点都不用改,只需要在微信开发者工具里改前端,登录时账号为admin,密码为admin123。

login接口和captchaImage接口都是若依封装好的,不用动

只适用于sys-user表中的user用户登录

 

wxml里这么写

<mp-form id="from" models="{{formData}}">
    <mp-cell prop="username" title="账号" ext-class="weui-cell-inp">
       <input bindinput="formInputChange" data-field="username" placeholder="请输入账号"/>
    </mp-cell>
    <mp-cell prop="password" title="密码" ext-class="weui-cell-inp">
       <input bindinput="formInputChange" password data-field="password" placeholder="请输入密码"/>
    </mp-cell>
    <mp-cell prop="code" title="验证码" ext-class="weui-cell-inp">
        <input bindinput="formInputChange" data-field="code" placeholder="请输入验证码"/>
        <image bindtap="setImgFun"  slot="footer" src="{{img}}" style="width: 80px;height: 40px;"></image>
    </mp-cell>
</mp-form>
    <view class="btn-box">
        <button class="weui-btn" type="primary" bindtap="loginFun">登录</button>
    </view>

js里这么写 

// pages/login/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    formData:{
      username:'',
      password:'',
      code:'',
      uuid:'',
    },
    img:''
  },
  formInputChange(e){
  // console.log(e);
  this.data.formData[e.currentTarget.dataset.field]=e.detail.value
  this.setData({
    formData:this.data.formData
  })
  },
  loginFun(){
    // console.log(this.data.formData);
    if(!this.data.formData.username || !this.data.formData.password || !this.data.formData.code){
      wx.showToast({
        title: '信息不完整',
        icon:'error',
        duration: 2000
      })
    }else {
      let _this=this 
      wx.request({
        url: 'http://localhost:8080/login', //请求地址
        data: _this.data.formData,//请求数据
        method: 'POST',//请求方法
        header: {
          'content-type': 'application/json;charset=UTF-8' // 请求头
          // 'content-type': 'x-www-form-urlencoded'
        },
        success (res) {
           wx.setStorageSync('MyToken', res.data.token)
           console.log("打印token:",res.data.token)
              //登录成功
              wx.showModal({
              title: '提示',
              content: '确认登录!',
              showCancel: true,
              success (res) {
                if (res.confirm) {
                  wx.switchTab({
                    url: '/pages/index/index',
                  })
                } else if (res.cancel) {
                  wx.setStorageSync('MyToken', '')
                }
              }
            })
          }
      })
    }
  },
  setImgFun(){
  //获取验证码和uuid
  let that=this 
  wx.request({
    url: 'http://localhost:8080/captchaImage', //请求地址
    data: '',//请求数据
    method: 'GET',//请求方法
    header: {
      'content-type': 'application/json;charset=UTF-8' // 请求头
    },
    success (res) {
      //  console.log(res.data.img) 
      let bufferImg = "data:image/gif;base64," +res.data.img;
      that.setData({
          img: bufferImg,
          'formData.uuid': res.data.uuid
      })
    }
  })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setImgFun();
  },

 
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值