后台一点都不用改,只需要在微信开发者工具里改前端,登录时账号为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();
},
})