front-end development tools
need to use
login.wxml
<view>
<image src="/asset/b.jpg" mode="scaleToFill"/>
<view>
<input placeholder="Please enter username" maxlength="11" bind:input="changeValue" data-label="account"/>
</view>
<view>
<input placeholder="请输入密码" password="{ {true}}" bind:input="changeValue" maxlength="16" data-label="password"/>
</view>
<view>
<button bindtap="userLogin" type="primary">登录</button>
</view>
</view>
Adjust size login.wxss
input {
width: 90%;
line-height: 40px;
border: 1px solid gray;
border-bottom: 2px solid green;
display: block;
margin: 10px auto;
height: 40px;
}
image {
width: 300px;
height: 300px;
border-radius: 50%;
display: block;
margin: auto;
}
login.js
import {request} from "../../request/index";
Page({
data: {
user: {
account: "",
password: ""
}
},
changeValue(e) {
let property = "user." + e.target.dataset.label
let value = e.detail.value
this.setData({
[property]: value
})
},
userLogin() {
wx.showLoading({
title: "Working hard to load",
mask: false
})
request("/user/login", this.data.user).then(res => {
console.log(res)
wx.hideLoading()
let icon = "error"
if (res.data.code === 200) {
icon = "success"
}
wx.showToast({
title: res.data.message,
icon
})
}).catch(res => {
console.error(res)
wx.hideLoading()
})
}
})
running interface
backend development
If you are interested, you can private message me to provide the source code