可锐资源网

本期内容登录过程较为常见和简单，不再以视频的方式呈现（如果确实有需要，小伙伴可以发私信告知，到时候再录制视频）。这里给大家贴出代码和图片，方便小伙伴们去完成。

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.最后呈现的登录效果：