ajaxを使用してmuiにログイン機能を実装する

導入

mui は、一般的に使用される Ajax 関数をカプセル化し、GET および POST リクエスト メソッドをサポートします。mui.ajax メソッドに基づいて、mui は、最も一般的に使用される 3 つのメソッド (mui.get、mui.getJSON、および mui.post) をさらに簡素化します。詳細については、 https://dev.dcloud.net.cn/mui/ajax/を参照してください。

1.効果を実感する

mui を使用してログイン インターフェイスを構築し、ajax を使用してリクエストをバックエンドに送信してログイン効果を実現します。

2. コードを実装する

フロントエンド

html部分

<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部分

(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));

バックエンド部分

tinkphpフレームワークに基づいて、mui フロントエンドと対話するためのモバイル フォルダーを作成します。

コントローラー-ユーザー.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'],
    ];
}