本项目基于腾讯外包框架（wei框架）
地址：https://github.com/twinh/wei/tree/master/docs/zh-CN#wei
HTML页面：
【基于bootstrap前端框架】
头部：
<ul id="js-reset-tabs" class="nav tab-underline border-bottom"><li class="active border-primary"><a class="text-active-primary" href="#tab-mobile" data-toggle="tab">账号登录</a></li><li class="border-primary"><a class="text-active-primary" href="#tab-email" data-toggle="tab">手机登录</a></li></ul>下方两个div模块：
<div class="tab-content"><div class="tab-pane fade in active" id="tab-user"><form class="form" method="post" id="reset-password-form-by-user" action="<?= $url('users/login') ?>"><div class="form-group"><label for="email">帐号</label><input name="username" type="text" value="<?= $e->attr($req['username']) ?>" class="form-control"placeholder="用户名/邮箱" required/></div><div class="form-group"><label for="password">密码</label><input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"data-rule-required="true"></div><?php if (wei()->setting('user.enableLoginCaptcha')) : ?><div class="form-group"><label for="captcha">验证码</label><div class="input-group"><input type="text" class="form-control" id="captcha" name="captcha" placeholder="请输入验证码"data-rule-required="true"><span class="input-group-addon p-a-0"><img class="js-captcha" src="<?= $url('captcha') ?>"></span></div></div><?php endif ?><div class="form-group"><div class="error-message text-danger text-center"><?= $e($req['message']) ?></div></div><div class="form-group"><div class="text-primary"><a href="<?= $url('registration/forget') ?>">忘记密码</a><a style="float:right;" href="<?= $url('registration/editInsurance') ?>">食品安全责任险</a></div></div><div class="clearfix form-group m-t-md" style="margin-top: 1%!important;"><button type="submit" class="btn btn-primary btn-block">账号登录</button><div id="phone-prompt" align="center" class="phone-prompt" style="color: red;width:100%;font-size:1em!important;" > 为了您更好的使用体验，请在电脑端登录:su1010.cn</div><?php if ($setting('admin.enableRegister')) : ?><div class="m-t text-center" style="margin-top: 1% !important;">没有账号，点击<a href="<?= $url('registration/register') ?>">注册</a></div><?php endif ?></div></form></div><div class="tab-pane fade in" id="tab-mobile"><form class="form" method="post" id="reset-password-form-by-mobile"><div class="form-group"><label for="mobile" class="control-label">手机号码<span class="text-warning">*</span></label><div class="col-control"><input type="tel" class="js-mobile form-control" id="mobile" name="mobile" placeholder="请输入注册手机号码"></div></div><div class="form-group" id="get-verify-code-group"><label for="verify-code" class="control-label">验证码<span class="text-warning">*</span></label><div class="col-control"><div class="input-group"><input type="tel" class="form-control" id="verify-code" name="verifyCode" placeholder="请输入验证码"><span class="input-group-btn border-left"><button type="button" class="js-verify-code-send text-primary btn btn-default form-link"id="get-verify-code">获取验证码</button></span></div></div></div><div class="form-group"><div class="text-primary"><a href="<?= $url('registration/forget') ?>">忘记密码</a><a style="float:right;" href="<?= $url('registration/editInsurance') ?>">食品安全责任险</a></div></div><div class="clearfix form-group m-t-md" style="margin-top: 1%!important;"><button type="submit" class="btn btn-primary btn-block">手机登录</button><div id="phone-prompt" align="center" class="phone-prompt" style="color: red;width:100%;font-size:1em!important;" > 为了您更好的使用体验，请在电脑端登录:su1010.cn</div><?php if ($setting('admin.enableRegister')) : ?><div class="m-t text-center" style="margin-top: 1% !important;">没有账号，点击<a href="<?= $url('registration/register') ?>">注册</a></div><?php endif ?></div></form></div>
</div>看到的效果：（可以直接复制粘贴滴）
1.
2.
这是HTML写出来的效果了，但是！！！
肯定没有那么简单的，如果要有这两个效果，得引入bootstrap文件了！
关于bootstrap的学习：李炎恢：http://study.163.com/course/courseLearn.htm?courseId=947005#/learn/video?lessonId=1122161&courseId=947005
引入：
bootstrap.min.css
jasny-bootstrap.min.css
bootstrap.min.js
jasny-bootstrap.min.js
jquery.min.js
js部分：
以我的实际项目出发：
关键引入： ‘plugins/verify-code/js/verify-code’ 【短信接口】
提交账号登录部分（不做详解）
var $form = $('#reset-password-form-by-user');$form.ajaxForm({dataType: 'json',beforeSubmit: function (arr, $form) {return $form.valid();},success: function (ret) {if (ret.code === 1) {window.location = ($.req('next') === '' ? $.url('admin') : $.req('next'));} else {$('.error-message').html(ret.message);if (typeof $captcha != 'undefined') {$captcha.attr('src', src + '?t=' + new Date());}}}}).validate();$form.find('input').keyup(function (e) {if (e.which === ENTER_KEY) {return;}$('.error-message').html('');});<?php if (wei()->setting('user.enableLoginCaptcha')) : ?>var $captcha = $('.js-captcha');$captcha.click(changeCaptcha);var src = $captcha.attr('src');function changeCaptcha() {$captcha.attr('src', src + '?t=' + new Date());}<?php endif ?>手机登录js部分：
直接绑定放松验证码部分，进行调用模块：
$('.js-verify-code-send').verifyCode({url: '<?= $url->query('users/send-verify-code') ?>'});users下的send-verify-code模块：
/*** 获取验证码*/public function sendVerifyCodeAction($req){if (!$req['mobile']) {return $this->err('请输入手机号码');}if(!wei()->isMobileCn($req['mobile'])){return $this->err('请输入合法的手机号码');}//数据库去查找这个手机号码是否存在，进行判断，值不值得去发送验证码这一环节$user = wei()->user()->find(['mobile' => $req['mobile']]);if (!$user) {return $this->err('该手机号码尚未注册，请重新输入');}//调用短信插件verifyCode中的send方法$ret = wei()->verifyCode->send($req['mobile']);//返回出相应的数据return $this->ret($ret);}关于整个verifyCode模块的模板：
百度云盘中显示：
完整的模板（login->users->curuser->index）
http://pan.baidu.com/s/1kUO39I3
进行判断登录页面：
public function loginByMobile(User $user){$this->loadRecordData($user);$this->session['mobile'] = $user->toArray($this->sessionFields);$this->session['user'] = $user->toArray($this->sessionFields);wei()->event->trigger('userLogin', [$user]);return ['code' => 1, 'message' => '登录成功'];}完工！
