阿东编程系列:APP使用用户名、密码和图片验证码进行登录
本期内容登录过程较为常见和简单，不再以视频的方式呈现（如果确实有需要，小伙伴可以发私信告知，到时候再录制视频）。这里给大家贴出代码和图片，方便小伙伴们去完成。
1.APP端基于uni-app的登录页代码（部分）：
- 页面结构代码
<view class="load-main">
<view class="load-box">
<view class="load-text">
登录
</view>
<view class="load-input">
<input class="inputtext" type="text" placeholder-class="load-place" placeholder="请输入账号" v-model="username"/>
</view>
<view class="load-input">
<input class="inputtext" type="text" password placeholder-class="load-place" placeholder="请输入密码" v-model="password"/>
</view>
<view class="load-input">
<view class="load-inputview">
<input type="text" class="load-vcodeinput" placeholder-class="load-place" placeholder="请输入验证码" v-model="vcode">
</view>
<view class="load-vcode">
<image class="load-vcodeimg" v-bind:src="vcodesrc" @tap="getvcode" ></image>
</view>
</view>
<view class="load-button">
<button class="load-button-style" type="warn" @tap="checklogin">登录</button>
</view>
</view>
</view>- 页面登录代码
uni.request({
console.log(res);
if(res.data.errorCode ==0){
uni.showToast({
title: '登录成功',
icon:'success'
});
//跳转到每周计划界面,适合tabBar中的页面
uni.switchTab({
url: '/pages/plan/plan'
});
}
else{
uni.showToast({
title: '用户名或密码错误',
icon:'none'
});
}
}）2.创建User控制器，并且添加两个方法，分别为：
- createVcode：用于生成图片验证码，之前视频已经介绍过
public function createVcode()
{
return Captcha::create();
}- userNameLogin：用户名登录方法
public function userNameLogin()
{
//第一步是验证数据的完整性，包括用户名，密码，图片验证码格式
(new UserValidate())->gocheck('userlogin');
//第二部是在User模型中使用用户名和密码进行登录
$res = (new UserModel())->nameLogin();
return $res;
}3.在路由中添加createVcode路由和userNameLogin路由，如下：
Route::group(':version',function(){
Route::get('test/index',':version.test/index');
Route::get('user/createvcode',':version.user/createvcode');
Route::post('user/usernamelogin',':version.user/usernamelogin');
});这里需要注意的是：一般用户名和密码登录，我们使用post方法进行数据的发送；
4.创建User数据模型，并且创建nameLogin方法，在控制器进行调用该方法。这个方法主要是实现对数据表的绑定，并且验证图片验证码是否正确，根据用户名和密码进行查询验证，最后将正确的数据进行返回；
- 图片验证码验证
if(!captcha_check($vcode)){
//调用在通用函数common中的抛出异常错误
throw_comm_exception('图片验证码错误',10011);
};- 用户名和密码进行查询，注意：这里用户数据作为参数进行查询：
//使用用户名和密码对数据表进行查询，采用数组方式进行多条件查询
$arr = ['username'=>$username,
'userpassword'=>$userpassword
];
//查询
$usr = User::where($arr)->find();- 将数据返回到APP端
//判断返回结果
if($usr!=NULL){
//返回正确的数据
return return_json(0,'登录正常',$usr);
}
else{
//抛出异常错误信息
throw_comm_exception('用户名或密码错误',10012);
}- User数据模型完整的代码如下：
<?php
declare (strict_types = 1);
namespace app\model;
use think\model;
class User extends Model
{
protected $table = 'tblUsers';
protected $pk ='AutoID';
public function nameLogin()
{
$params=request()->param();
$username=$params['username'];
$userpassword = $params['userpassword'];
$vcode = $params['vcode'];
if(!captcha_check($vcode)){
//调用在通用函数common中的抛出异常错误
throw_comm_exception('图片验证码错误',10011);
};
//使用用户名和密码对数据表进行查询，采用数组方式进行多条件查询
$arr = ['username'=>$username,
'userpassword'=>$userpassword
];
//查询
$usr = User::where($arr)->find();
//判断返回结果
if($usr!=NULL){
//返回正确的数据
return return_json(0,'登录正常',$usr);
}
else{
//抛出异常错误信息
throw_comm_exception('用户名或密码错误',10012);
}
}
}4.最后呈现的登录效果：
