mui中使用ajax实现登录功能

- 日理万妓 2023-10-11 16:29 40阅读 0赞

#### mui中使用ajax实现登录功能 ####

*  引言
 *  1. 实现效果
 *  2. 实现代码
 *   *  前端部分
     *  后端部分

## 引言 ##

mui封装了常用的Ajax函数，支持GET、POST请求方式，在mui.ajax方法基础上，mui 进一步简化出最常用的mui.get、mui.getJSON、mui.post三个方法。详细见[https://dev.dcloud.net.cn/mui/ajax/][https_dev.dcloud.net.cn_mui_ajax]。

## 1. 实现效果 ##

使用mui搭建登录界面，使用ajax来向后端发送请求实现登录效果。  
![在这里插入图片描述][d7964b8757b84573a2e0a90dcf4a3fff.png]

## 2. 实现代码 ##

### 前端部分 ###

**html部分**

**js部分**

### 后端部分 ###

基于**tinkphp**框架，建立mobile文件夹，用来实现和mui前端交互。  
![在这里插入图片描述][96ea863df8c54ad0ad029f1582704eee.png]  
**controller-User.php**

<?php
    namespace app\mobile\controller;
    use think\Controller;
    use think\Db;
    use think\Loader;
    class User extends Controller
    {
        
        public function login()
        {
        
            if(request()->isPost()){
        
                $data=input();
                $user=Db::name("student")->where("suser",$data["username"])->find();
                if ($user==null){
        
                    return $this->success("username");
                }elseif ($user["spassword"]!=$data["password"]){
        
                    return $this->success("password");
                }else{
        
                    return $this->success("success",'',$user);
                }
            }
        }
    }

**model-User.php**：用来与数据库交互

<?php
    namespace app\mobile\model;
    use think\Model;
    class User extends Model
    {
        
        public function login($data){
        
            $user=db('user')->where('username',$data['username'])->find();
            if($user){
        
                if($user['password']==md5($data['password'])){
        
                    return 1;
                }else{
        
                    return 0;
                }
            }else{
        
                return -1;
            }
        }
    }

**validate-User.php** ：完成一些格式验证的功能。

<?php
    namespace app\mobile\validate;
    use think\Validate;
    class User extends Validate
    {
        
        protected $rule = [
            'username|用户名'  	=> 'require|max:30|unique:user',
            'password|密码' 	=> 'require|min:6|max:30',
        ];
        protected $message = [
        ];
        protected $scene = [
            'register'  =>  ['username','password'],
        ];
    }

[https_dev.dcloud.net.cn_mui_ajax]: https://dev.dcloud.net.cn/mui/ajax/
[d7964b8757b84573a2e0a90dcf4a3fff.png]: https://img-blog.csdnimg.cn/d7964b8757b84573a2e0a90dcf4a3fff.png
[96ea863df8c54ad0ad029f1582704eee.png]: https://img-blog.csdnimg.cn/96ea863df8c54ad0ad029f1582704eee.png