文章目录
小程序登录代码
1、小程序登录的wxml代码
<view>
<view class='login-icon'>
<image class="login-img" src="../resource/images/dsp.jpg"></image>
</view>
<view>
<form bindsubmit = 'doLogin'>
<!--账号 -->
<view class="inputView">
<image class="nameImage" src="../resource/images/username.png"></image>
<label class="loginLabel">账号</label>
<input name="username" class="inputText" placeholder='请输入账号'></input>
</view>
<view class="line"></view>
<!--密码-->
<view class="inputView">
<image class="keyImage" src="../resource/images/password.png"></image>
<label class="loginLabel">密码</label>
<input name="password" class="inputText" placeholder='请输入密码'/>
</view>
<!--按钮 -->
<view>
<button class="loginBtn" type="primary" form-type='submit'>登录</button>
</view>
<view>
<button class="goRegistBtn" type="warn" bindtap='goRegistPage'>没有账号?点击注册</button>
</view>
</form>
</view>
</view>
2、小程序登录的wxss代码
page{
background-color: whitesmoke;
}
.login-img{
width: 500px;
}
/*表单内容 */
.inputView {
background-color: white;
line-height: 45px;
}
/*输入框*/
.nameImage,.keyImage{
margin-left: 22px;
width: 20px;
height: 20px;
}
.loginLabel{
margin: 15px 15px 15px 10px;
color: gray;
font-size: 15px;
}
.inputText {
float: right;
text-align: right;
margin-right: 22px;
margin-top: 11px;
font-size: 15px;
}
.line {
width: 100%;
height: 1px;
background-color: gainsboro;
margin-top: 1px;
}
/*按钮*/
.loginBtn {
width: 80%;
margin-top: 35px;
}
.goRegistBtn {
width: 80%;
margin-top: 15px;
}
3、小程序js代码
const app = getApp();
Page({
data:{
},
doLogin: function (e) {
var fromObject = e.detail.value;
var username = fromObject.username;
var password = fromObject.password;
console.log(username+password);
if(username.length == 0 || password.length == 0){
wx.showToast({
title: '用户名和密码不能为空',
icon: 'none',
duration: 500
})
} else {
var serverUrl = app.serverUrl;
//在发起请求前,如果后端接口卡住,在此添加loading...
wx.showLoading({
title: '请等待'
})
wx.request({
url: serverUrl+'/login',
method: "POST",
data:{
username: username,
password: password
},
header:{
'content-type': 'application/json' //默认值
},
success:function(res){
wx.hideLoading();
var status = res.data.status;
if(status == 500){
//失败弹出框
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 5000,
})
} else if(status == 200){
//登录成功跳转
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
});
app.userInfo = res.data.data;
//TODD页面跳转
}
}
})
}
},
//注册页面跳转
goRegistPage:function(){
//页面跳转api
wx.navigateTo({
url:'../userRegist/regist'
})
}
})
注册后端代码
因为我们之前通过代码生成mybatis的mapper配置文件和mapper映射类。
对于一些简单的数据库插入、删除、修改,就不需要我们再进行重写了
1、UserService的登录接口
/**
* 根据用户名 和 密码进行查询
* @param username
* @param password
* @return
*/
public Users queryUserForLogin(String username ,String password );
2、UserServiceImpl实现类
@Transactional 是管理事务的注解,通常默认情况下,只有RunTimeException时,才会回滚,为了保证数据一致性,我们需要声所有异常都会回滚(rollbackFor = Exception.class)
// Propagation.SUPPORTS 其他bean调用该方法时,如果该bean有事务,就使用该事务,如果该Bean没有事务就不用事务。
@Transactional(propagation = Propagation.SUPPORTS)
@Override
public Users queryUserForLogin(String username, String password) {
Example userExample = new Example(Users.class);
Criteria criteria = userExample.createCriteria();
criteria.andEqualTo("username",username);
criteria.andEqualTo("password",password);
Users result = usersMapper.selectOneByExample(userExample);
return result;
}
3、controller代码
@ApiOperation(value= "用户登陆" , notes = "用户登陆接口")
@PostMapping("/login")
public IMoocJSONResult login(@RequestBody Users users) throws NoSuchAlgorithmException, InterruptedException {
Thread.sleep(3000);
String username = users.getUsername();
String password = users.getPassword();
//1、判断用户名和密码不能为空
if (StringUtils.isBlank(username) || StringUtils.isBlank(password)){
return IMoocJSONResult.errorMsg("用户名和密码不能为空");
}
// 2、判断用户是否存在
Users userResult = userService.queryUserForLogin(username,MD5Utils.getMD5Str(password));
//3、返回
if (userResult !=null ){
userResult.setPassword("");
return IMoocJSONResult.ok(userResult);
} else {
return IMoocJSONResult.errorMsg("用户名或密码不正确,请重试...");
}
}
以上就是小程序登录的前后端代码。