Use ajax to implement login function in mui

introduction

mui encapsulates commonly used Ajax functions and supports GET and POST request methods. Based on the mui.ajax method, mui further simplifies the most commonly used three methods: mui.get, mui.getJSON, and mui.post. See https://dev.dcloud.net.cn/mui/ajax/ for details .

1. Realize the effect

Use mui to build the login interface, and use ajax to send requests to the backend to achieve the login effect.

2. Implement the code

front end

html part

<div class="mui-content"  id="bg">
	<form id='login-form' class="mui-input-group" name="login">
		<div class="mui-input-row" id="put">
			<label>账号</label>
			<input id='account' type="text" class="mui-input-clear mui-input" placeholder="用户名/邮箱/手机号" name="username">
		</div>
		<div class="mui-input-row" id="put">
			<label>密码</label>
			<input id='password' type="password" class="mui-input-clear mui-input" placeholder="密码登录" name="password">
		</div>
	</form>
	
	<div class="mui-content-padded" id="login-box">
		<button id='login' class="mui-btn mui-btn-block mui-btn-danger" style="background-color: #007aff;border: 1px solid #007aff;">登录</button>
		<div id="des">
			<a id='reg'>注册账号</a>  
			<a id='forgetPassword'>忘记密码</a>
		</div>
	</div>
	<img src="images/login/air.png" id="air"/>
	<div class="mui-content-padded oauth-area" style="position: relative;top: 20rem;">

	</div>
</div>

js part

(function($, doc) {
    
    
	$.init();
	//这里的mobile文件夹后台中专门用来与mui交互的模块，可以按自己需求来定义
	localStorage.setItem("serverUrl", 'http://47.96.167.26/index.php/mobile/');	
	$.plusReady(function() {
    
    
		plus.screen.lockOrientation("portrait-primary");
		var settings = app.getSettings();
		var state = app.getState();
		var mainPage = plus.webview.getWebviewById("main");
		var main_loaded_flag = false;

		loginUrl = localStorage.getItem("serverUrl") + "User/login";	//后台登录模块
		//点击登录,向服务器发送POST请求
		document.getElementById("login").addEventListener("tap",function(){
    
    
			var username=document.login.username.value;
			var password=document.login.password.value;
			console.log("local:"+username+password);
			mui.post(loginUrl,{
    
    
					username:username,
					password:password
				},function(data){
    
    
					// alert(JSON.stringify(data))
					// console.log(JSON.stringify(data));
					if(data.msg=="success"){
    
    
						localStorage.setItem("user",JSON.stringify(data.data))
						var user=localStorage.getItem("user");
						console.log(JSON.stringify(data.data));
						// alert(JSON.stringify(JSON.parse(user)))
						toMain();
					}else if(data.msg=="password"){
    
    
						password=document.login.password.value="";
						alert("密码错误！请重新输入")
					}else if(data.msg=="username"){
    
    
						document.login.username.value="";
						password=document.login.password.value="";
						alert("用户名错误！请重新输入")
					}else{
    
    
						alert("登陆异常！")
					}
				},'json'
			);
		})
	});
}(mui, document));

backend part

Based on the tinkphp framework, create a mobile folder for interaction with the mui front end.

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 : used to interact with the database

<?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 : Complete some format validation functions.

<?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'],
    ];
}