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