mui中使用ajax实现登录功能

简介: 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部分

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


后端部分


基于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'],
    ];
}
相关文章
|
11月前
|
前端开发
mui中使用ajax实现登录功能demo
mui中使用ajax实现登录功能demo
137 3
|
9月前
|
前端开发 JavaScript PHP
【PHP学习】—利用ajax原理实现登录功能(八)
【PHP学习】—利用ajax原理实现登录功能(八)
|
前端开发 安全 JavaScript
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
188 0
使用Servlet+AJAX+AWT实现网站登录时的图片验证码功能
|
JSON 前端开发 数据格式
Shiro Ajax请求没有权限返回JSON,没有登录返回JSON
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/catoop/article/details/69210140 本文基于Shiro权限注解方式来控制Controller方法是否能够访问。
1450 0
N..
|
4月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
54 1
|
4月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
49 0
|
4月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
109 0
|
3月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
35 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
1月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
26 0