mui中使用ajax实现登录功能

引言

mui封装了常用的Ajax函数，支持GET、POST请求方式，在mui.ajax方法基础上，mui 进一步简化出最常用的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框架，建立mobile文件夹，用来实现和mui前端交互。

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