增加登录和注册界面及控制器
This commit is contained in:
parent
3ab5787c26
commit
92a08c5e6d
@ -13,6 +13,7 @@ use app\index\model\Resources\ResourcesCategory;
|
||||
use app\index\model\Articles\ArticlesCategory;
|
||||
use app\index\model\Resources\Resources;
|
||||
use app\index\model\Articles\Articles;
|
||||
use PHPMailer\PHPMailer\PHPMailer;
|
||||
|
||||
|
||||
class IndexController extends BaseController
|
||||
@ -27,7 +28,7 @@ class IndexController extends BaseController
|
||||
->order('sort DESC, id DESC')
|
||||
->select()
|
||||
->toArray();
|
||||
|
||||
|
||||
View::assign('bannerList', $bannerList);
|
||||
return View::fetch();
|
||||
}
|
||||
@ -190,7 +191,7 @@ class IndexController extends BaseController
|
||||
}
|
||||
|
||||
// 按上传时间排序
|
||||
usort($allResources, function($a, $b) {
|
||||
usort($allResources, function ($a, $b) {
|
||||
return $b['create_time'] - $a['create_time'];
|
||||
});
|
||||
|
||||
@ -256,7 +257,7 @@ class IndexController extends BaseController
|
||||
}
|
||||
|
||||
// 按上传时间排序
|
||||
usort($allPrograms, function($a, $b) {
|
||||
usort($allPrograms, function ($a, $b) {
|
||||
return $b['create_time'] - $a['create_time'];
|
||||
});
|
||||
|
||||
@ -325,7 +326,7 @@ class IndexController extends BaseController
|
||||
}
|
||||
|
||||
// 按上传时间排序
|
||||
usort($allPrograms, function($a, $b) {
|
||||
usort($allPrograms, function ($a, $b) {
|
||||
return strtotime($b['create_time']) - strtotime($a['create_time']);
|
||||
});
|
||||
|
||||
@ -341,4 +342,80 @@ class IndexController extends BaseController
|
||||
]
|
||||
]);
|
||||
}
|
||||
|
||||
function sendEmail($email, $to, $content, $title)
|
||||
{
|
||||
|
||||
// 邮件内容
|
||||
|
||||
//实例化PHPMailer核心类
|
||||
$mail = new PHPMailer();
|
||||
|
||||
//是否启用smtp的debug进行调试 开发环境建议开启 生产环境注释掉即可 默认关闭debug调试模式
|
||||
$mail->SMTPDebug = 1;
|
||||
|
||||
//使用smtp鉴权方式发送邮件
|
||||
$mail->isSMTP();
|
||||
|
||||
//smtp需要鉴权 这个必须是true
|
||||
$mail->SMTPAuth = true;
|
||||
|
||||
//链接qq域名邮箱的服务器地址
|
||||
$mail->Host = 'smtp.qq.com';//如果是163邮箱 就把qq换成163
|
||||
|
||||
//设置使用ssl加密方式登录鉴权
|
||||
$mail->SMTPSecure = 'ssl';
|
||||
|
||||
//设置ssl连接smtp服务器的远程服务器端口号，以前的默认是25，但是现在新的好像已经不可用了 可选465或587
|
||||
$mail->Port = 465;
|
||||
|
||||
//设置smtp的helo消息头 这个可有可无 内容任意
|
||||
// $mail->Helo = 'Hello smtp.qq.com Server';
|
||||
|
||||
//设置发件人的主机域 可有可无 默认为localhost 内容任意，建议使用你的域名
|
||||
$mail->Hostname = $email;
|
||||
|
||||
//设置发送的邮件的编码 可选GB2312 我喜欢utf-8 据说utf8在某些客户端收信下会乱码
|
||||
$mail->CharSet = 'UTF-8';
|
||||
|
||||
//设置发件人姓名（昵称） 任意内容，显示在收件人邮件的发件人邮箱地址前的发件人姓名
|
||||
$mail->FromName = '学创网络';
|
||||
|
||||
//smtp登录的账号 这里填入字符串格式的qq号即可
|
||||
$mail->Username = $email;
|
||||
|
||||
//smtp登录的密码 使用qq邮箱生成的授权码（qq邮箱生成授权码参考网址：http://www.huochewu.com/show_1609305/）
|
||||
$mail->Password = '';
|
||||
|
||||
//设置发件人邮箱地址 这里填入上述提到的“发件人邮箱”
|
||||
$mail->From = $email;
|
||||
|
||||
//邮件正文是否为html编码 注意此处是一个方法 不再是属性 true或false
|
||||
$mail->isHTML(true);
|
||||
|
||||
//设置收件人邮箱地址 该方法有两个参数 第一个参数为收件人邮箱地址 第二参数为给该地址设置的昵称 不同的邮箱系统会自动进行处理变动 这里第二个参数的意义不大
|
||||
$mail->addAddress($to, '666');
|
||||
|
||||
//添加多个收件人 则多次调用方法即可
|
||||
// $mail->addAddress('xxx@163.com','');
|
||||
|
||||
//添加该邮件的主题
|
||||
$mail->Subject = $title;
|
||||
|
||||
//添加邮件正文 上方将isHTML设置成了true，则可以是完整的html字符串 如：使用file_get_contents函数读取本地的html文件
|
||||
$mail->Body = $content;
|
||||
|
||||
//为该邮件添加附件 该方法也有两个参数 第一个参数为附件存放的目录（相对目录、或绝对目录均可） 第二参数为在邮件附件中该附件的名称
|
||||
// $mail->addAttachment('./d.jpg','mm.jpg');
|
||||
//同样该方法可以多次调用 上传多个附件
|
||||
// $mail->addAttachment('./Jlib-1.1.0.js','Jlib.js');
|
||||
$status = $mail->send();
|
||||
//简单的判断与提示信息
|
||||
if ($status) {
|
||||
return '发送成功';
|
||||
} else {
|
||||
return '发送失败';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
237
app/index/controller/UserController.php
Normal file
237
app/index/controller/UserController.php
Normal file
@ -0,0 +1,237 @@
|
||||
<?php
|
||||
namespace app\index\controller;
|
||||
|
||||
use think\Controller;
|
||||
use app\index\model\User;
|
||||
use think\facade\Redirect;
|
||||
use \think\facade\Log;
|
||||
use \think\facade\Cache;
|
||||
|
||||
class UserController extends BaseController
|
||||
{
|
||||
/**
|
||||
* 用户登录
|
||||
*
|
||||
* @return \think\Response
|
||||
*/
|
||||
public function login()
|
||||
{
|
||||
// 增加日志记录，记录用户访问登录页面的操作
|
||||
Log::record('用户访问登录页面', 'info');
|
||||
|
||||
// 如果用户已经登录，直接跳转到主页
|
||||
if (session('user_id')) {
|
||||
return redirect('index');
|
||||
} else {
|
||||
//跳转登录界面
|
||||
return view('login');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户注册
|
||||
*
|
||||
* @return \think\Response
|
||||
*/
|
||||
public function register()
|
||||
{
|
||||
if ($this->request->isPost()) {
|
||||
$data = $this->request->post();
|
||||
$type = $data['type'] ?? 'account'; // 注册类型：account-账号密码，phone-手机号，wechat-微信
|
||||
|
||||
try {
|
||||
switch ($type) {
|
||||
case 'account':
|
||||
// 账号密码注册
|
||||
$validate = validate([
|
||||
'username' => 'require|min:3|max:20|unique:user',
|
||||
'password' => 'require|min:6|max:20',
|
||||
'confirm_password' => 'require|confirm:password'
|
||||
], [
|
||||
'username.require' => '用户名不能为空',
|
||||
'username.min' => '用户名长度不能小于3个字符',
|
||||
'username.max' => '用户名长度不能超过20个字符',
|
||||
'username.unique' => '用户名已存在',
|
||||
'password.require' => '密码不能为空',
|
||||
'password.min' => '密码长度不能小于6个字符',
|
||||
'password.max' => '密码长度不能超过20个字符',
|
||||
'confirm_password.require' => '确认密码不能为空',
|
||||
'confirm_password.confirm' => '两次输入的密码不一致'
|
||||
]);
|
||||
|
||||
if (!$validate->check($data)) {
|
||||
return json(['code' => 0, 'msg' => $validate->getError()]);
|
||||
}
|
||||
|
||||
$user = new UserModel;
|
||||
$user->username = $data['username'];
|
||||
$user->password = password_hash($data['password'], PASSWORD_DEFAULT);
|
||||
$user->create_time = time();
|
||||
$user->save();
|
||||
|
||||
return json(['code' => 1, 'msg' => '注册成功']);
|
||||
|
||||
case 'phone':
|
||||
// 手机号注册
|
||||
$validate = validate([
|
||||
'phone' => 'require|mobile|unique:user',
|
||||
'code' => 'require|number|length:6'
|
||||
], [
|
||||
'phone.require' => '手机号不能为空',
|
||||
'phone.mobile' => '手机号格式不正确',
|
||||
'phone.unique' => '该手机号已注册',
|
||||
'code.require' => '验证码不能为空',
|
||||
'code.number' => '验证码必须为数字',
|
||||
'code.length' => '验证码长度必须为6位'
|
||||
]);
|
||||
|
||||
if (!$validate->check($data)) {
|
||||
return json(['code' => 0, 'msg' => $validate->getError()]);
|
||||
}
|
||||
|
||||
// 验证短信验证码
|
||||
$smsCode = cache('sms_code_' . $data['phone']);
|
||||
if (!$smsCode || $smsCode != $data['code']) {
|
||||
return json(['code' => 0, 'msg' => '验证码错误或已过期']);
|
||||
}
|
||||
|
||||
$user = new UserModel;
|
||||
$user->phone = $data['phone'];
|
||||
$user->create_time = time();
|
||||
$user->save();
|
||||
|
||||
// 清除验证码缓存
|
||||
cache('sms_code_' . $data['phone'], null);
|
||||
|
||||
return json(['code' => 1, 'msg' => '注册成功']);
|
||||
|
||||
case 'wechat':
|
||||
// 微信注册
|
||||
$validate = validate([
|
||||
'openid' => 'require|unique:user'
|
||||
], [
|
||||
'openid.require' => '微信授权失败',
|
||||
'openid.unique' => '该微信账号已注册'
|
||||
]);
|
||||
|
||||
if (!$validate->check($data)) {
|
||||
return json(['code' => 0, 'msg' => $validate->getError()]);
|
||||
}
|
||||
|
||||
$user = new UserModel;
|
||||
$user->openid = $data['openid'];
|
||||
$user->nickname = $data['nickname'] ?? '';
|
||||
$user->avatar = $data['avatar'] ?? '';
|
||||
$user->create_time = time();
|
||||
$user->save();
|
||||
|
||||
return json(['code' => 1, 'msg' => '注册成功']);
|
||||
|
||||
default:
|
||||
return json(['code' => 0, 'msg' => '注册类型错误']);
|
||||
}
|
||||
} catch (\Exception $e) {
|
||||
return json(['code' => 0, 'msg' => '注册失败：' . $e->getMessage()]);
|
||||
}
|
||||
}
|
||||
|
||||
return $this->fetch();
|
||||
}
|
||||
|
||||
/**
|
||||
* 退出登录
|
||||
*
|
||||
* @return \think\Response
|
||||
*/
|
||||
public function logout()
|
||||
{
|
||||
// 增加日志记录，记录用户退出登录操作
|
||||
Log::record('用户退出登录', 'info');
|
||||
|
||||
// 销毁当前会话中的所有数据
|
||||
session(null);
|
||||
|
||||
// 清除缓存中的用户信息
|
||||
Cache::tag('user_cache')->clear();
|
||||
return redirect('login');
|
||||
}
|
||||
|
||||
// 发送短信验证码
|
||||
public function sendSmsCode()
|
||||
{
|
||||
if ($this->request->isPost()) {
|
||||
$phone = $this->request->post('phone');
|
||||
|
||||
// 验证手机号
|
||||
$validate = validate([
|
||||
'phone' => 'require|mobile|unique:user'
|
||||
], [
|
||||
'phone.require' => '手机号不能为空',
|
||||
'phone.mobile' => '手机号格式不正确',
|
||||
'phone.unique' => '该手机号已注册'
|
||||
]);
|
||||
|
||||
if (!$validate->check(['phone' => $phone])) {
|
||||
return json(['code' => 0, 'msg' => $validate->getError()]);
|
||||
}
|
||||
|
||||
// 生成6位随机验证码
|
||||
$code = mt_rand(100000, 999999);
|
||||
|
||||
// 这里应该调用短信服务商API发送验证码
|
||||
// 示例代码，实际使用时需要替换为真实的短信发送逻辑
|
||||
try {
|
||||
// TODO: 调用短信服务商API发送验证码
|
||||
// $result = sendSms($phone, $code);
|
||||
|
||||
// 将验证码保存到缓存，有效期5分钟
|
||||
cache('sms_code_' . $phone, $code, 300);
|
||||
|
||||
return json(['code' => 1, 'msg' => '验证码发送成功']);
|
||||
} catch (\Exception $e) {
|
||||
return json(['code' => 0, 'msg' => '验证码发送失败：' . $e->getMessage()]);
|
||||
}
|
||||
}
|
||||
|
||||
return json(['code' => 0, 'msg' => '非法请求']);
|
||||
}
|
||||
|
||||
// 微信授权回调
|
||||
public function wechatCallback()
|
||||
{
|
||||
$code = $this->request->get('code');
|
||||
if (!$code) {
|
||||
return json(['code' => 0, 'msg' => '微信授权失败']);
|
||||
}
|
||||
|
||||
try {
|
||||
// 这里应该调用微信API获取用户信息
|
||||
// 示例代码，实际使用时需要替换为真实的微信API调用逻辑
|
||||
// $wechatUser = getWechatUserInfo($code);
|
||||
|
||||
// 模拟获取到的微信用户信息
|
||||
$wechatUser = [
|
||||
'openid' => 'test_openid_' . time(),
|
||||
'nickname' => '微信用户',
|
||||
'avatar' => ''
|
||||
];
|
||||
|
||||
// 检查用户是否已注册
|
||||
$user = UserModel::where('openid', $wechatUser['openid'])->find();
|
||||
if ($user) {
|
||||
// 已注册，直接登录
|
||||
session('user_id', $user->id);
|
||||
return json(['code' => 1, 'msg' => '登录成功']);
|
||||
}
|
||||
|
||||
// 未注册，返回注册所需信息
|
||||
return json([
|
||||
'code' => 2,
|
||||
'msg' => '需要注册',
|
||||
'data' => $wechatUser
|
||||
]);
|
||||
} catch (\Exception $e) {
|
||||
return json(['code' => 0, 'msg' => '微信授权失败：' . $e->getMessage()]);
|
||||
}
|
||||
}
|
||||
}
|
||||
241
app/index/view/user/login.php
Normal file
241
app/index/view/user/login.php
Normal file
@ -0,0 +1,241 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="__LAYUI__/css/layui.css">
|
||||
<script src="__LAYUI__/layui.js" charset="utf-8"></script>
|
||||
<title>用户登录</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #f5f7fa;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 420px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
padding: 40px 40px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-header h2 {
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
color: #666;
|
||||
margin: 10px 0 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
padding: 20px 40px 40px;
|
||||
}
|
||||
|
||||
.layui-form-item {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.layui-input {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e7ed;
|
||||
padding: 0 15px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-input:focus {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.layui-btn {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
background: #409eff;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-btn:hover {
|
||||
background: #66b1ff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.layui-tab {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layui-tab-title {
|
||||
border: none;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.layui-tab-title li {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.layui-tab-title .layui-this {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.layui-tab-title .layui-this:after {
|
||||
border-bottom: 2px solid #409eff;
|
||||
}
|
||||
|
||||
.layui-tab-content {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
|
||||
.wechat-login {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.wechat-login img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.wechat-login img:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.wechat-login p {
|
||||
margin-top: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layui-input-inline {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
|
||||
#getCode {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.layui-input-block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<h2>欢迎登录</h2>
|
||||
<p>请选择登录方式</p>
|
||||
</div>
|
||||
<div class="layui-tab">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this" lay-id="account">账号密码</li>
|
||||
<li lay-id="phone">手机验证码</li>
|
||||
<li lay-id="wechat">微信登录</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show" id="account">
|
||||
<form action="#" method="post" class="layui-form login-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<input type="password" name="password" required lay-verify="required"
|
||||
placeholder="请输入密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit
|
||||
lay-filter="accountLogin">登录</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="layui-tab-item" id="phone">
|
||||
<form action="#" method="post" class="layui-form login-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<input type="tel" name="phone" required lay-verify="required|phone" placeholder="请输入手机号"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<div class="layui-input-inline" style="width: calc(100% - 120px);">
|
||||
<input type="text" name="code" required lay-verify="required" placeholder="请输入验证码"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 110px;">
|
||||
<button type="button" class="layui-btn" id="getCode">获取验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="phoneLogin">登录</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="layui-tab-item" id="wechat">
|
||||
<div class="wechat-login">
|
||||
<img src="" alt="微信登录" class="layui-img">
|
||||
<p>点击使用微信登录</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
layui.use(['form', 'element'], function () {
|
||||
var form = layui.form;
|
||||
var element = layui.element;
|
||||
|
||||
form.on('submit(accountLogin)', function (data) {
|
||||
console.log(data.field);
|
||||
return false;
|
||||
});
|
||||
|
||||
form.on('submit(phoneLogin)', function (data) {
|
||||
console.log(data.field);
|
||||
return false;
|
||||
});
|
||||
|
||||
document.getElementById('getCode').addEventListener('click', function () {
|
||||
console.log('获取验证码');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
193
app/index/view/user/register.php
Normal file
193
app/index/view/user/register.php
Normal file
@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="__LAYUI__/css/layui.css">
|
||||
<script src="__LAYUI__/layui.js" charset="utf-8"></script>
|
||||
<title>用户注册</title>
|
||||
<style>
|
||||
/* 保持原有样式不变 */
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: #f5f7fa;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.register-container {
|
||||
width: 420px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.register-header {
|
||||
padding: 40px 40px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register-header h2 {
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.register-header p {
|
||||
color: #666;
|
||||
margin: 10px 0 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
padding: 20px 40px 40px;
|
||||
}
|
||||
|
||||
.layui-form-item {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.layui-input {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4e7ed;
|
||||
padding: 0 15px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-input:focus {
|
||||
border-color: #409eff;
|
||||
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.layui-btn {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
background: #409eff;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-btn:hover {
|
||||
background: #66b1ff;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.layui-input-inline {
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
|
||||
#getCode {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.layui-input-block {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.login-link {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.login-link a {
|
||||
color: #409eff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="register-container">
|
||||
<div class="register-header">
|
||||
<h2>用户注册</h2>
|
||||
<p>创建您的账号</p>
|
||||
</div>
|
||||
<form action="#" method="post" class="layui-form register-form">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<input type="email" name="email" required lay-verify="required|email" placeholder="请输入邮箱"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<div class="layui-input-inline" style="width: calc(100% - 120px);">
|
||||
<input type="text" name="code" required lay-verify="required" placeholder="请输入验证码"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width: 110px;">
|
||||
<button type="button" class="layui-btn" id="getCode">获取验证码</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<input type="password" name="repassword" required lay-verify="required" placeholder="请确认密码"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block" style="margin-left: 0;">
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="register">注册</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-link">
|
||||
已有账号？<a href="{:url('user/login')}">立即登录</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
layui.use(['form', 'layer'], function () {
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
form.on('submit(register)', function (data) {
|
||||
console.log(data.field);
|
||||
return false;
|
||||
});
|
||||
|
||||
document.getElementById('getCode').addEventListener('click', function () {
|
||||
var email = document.querySelector('input[name="email"]').value;
|
||||
if (!email) {
|
||||
layer.msg('请先输入邮箱地址');
|
||||
return;
|
||||
}
|
||||
// 发送邮箱验证码请求
|
||||
console.log('发送邮箱验证码到：' + email);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -27,7 +27,8 @@
|
||||
"topthink/think-multi-app": "^1.1",
|
||||
"topthink/think-view": "^1.0",
|
||||
"topthink/think-captcha": "^3.0",
|
||||
"phpoffice/phpspreadsheet": "^1.25"
|
||||
"phpoffice/phpspreadsheet": "^1.25",
|
||||
"phpmailer/phpmailer": "^6.9"
|
||||
},
|
||||
"require-dev": {
|
||||
"symfony/var-dumper": "^4.2",
|
||||
|
||||
89
composer.lock
generated
89
composer.lock
generated
@ -4,7 +4,7 @@
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "7c23a0e75a1b3f811f5e1afc64aff308",
|
||||
"content-hash": "e7aa95c6a8e70b3ab7dc4893252beb4d",
|
||||
"packages": [
|
||||
{
|
||||
"name": "composer/pcre",
|
||||
@ -649,6 +649,93 @@
|
||||
],
|
||||
"time": "2022-08-04T09:53:51+00:00"
|
||||
},
|
||||
{
|
||||
"name": "phpmailer/phpmailer",
|
||||
"version": "v6.9.3",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/PHPMailer/PHPMailer.git",
|
||||
"reference": "2f5c94fe7493efc213f643c23b1b1c249d40f47e"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/PHPMailer/PHPMailer/zipball/2f5c94fe7493efc213f643c23b1b1c249d40f47e",
|
||||
"reference": "2f5c94fe7493efc213f643c23b1b1c249d40f47e",
|
||||
"shasum": "",
|
||||
"mirrors": [
|
||||
{
|
||||
"url": "https://mirrors.aliyun.com/composer/dists/%package%/%reference%.%type%",
|
||||
"preferred": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"require": {
|
||||
"ext-ctype": "*",
|
||||
"ext-filter": "*",
|
||||
"ext-hash": "*",
|
||||
"php": ">=5.5.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"dealerdirect/phpcodesniffer-composer-installer": "^1.0",
|
||||
"doctrine/annotations": "^1.2.6 || ^1.13.3",
|
||||
"php-parallel-lint/php-console-highlighter": "^1.0.0",
|
||||
"php-parallel-lint/php-parallel-lint": "^1.3.2",
|
||||
"phpcompatibility/php-compatibility": "^9.3.5",
|
||||
"roave/security-advisories": "dev-latest",
|
||||
"squizlabs/php_codesniffer": "^3.7.2",
|
||||
"yoast/phpunit-polyfills": "^1.0.4"
|
||||
},
|
||||
"suggest": {
|
||||
"decomplexity/SendOauth2": "Adapter for using XOAUTH2 authentication",
|
||||
"ext-mbstring": "Needed to send email in multibyte encoding charset or decode encoded addresses",
|
||||
"ext-openssl": "Needed for secure SMTP sending and DKIM signing",
|
||||
"greew/oauth2-azure-provider": "Needed for Microsoft Azure XOAUTH2 authentication",
|
||||
"hayageek/oauth2-yahoo": "Needed for Yahoo XOAUTH2 authentication",
|
||||
"league/oauth2-google": "Needed for Google XOAUTH2 authentication",
|
||||
"psr/log": "For optional PSR-3 debug logging",
|
||||
"symfony/polyfill-mbstring": "To support UTF-8 if the Mbstring PHP extension is not enabled (^1.2)",
|
||||
"thenetworg/oauth2-azure": "Needed for Microsoft XOAUTH2 authentication"
|
||||
},
|
||||
"type": "library",
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"PHPMailer\\PHPMailer\\": "src/"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"LGPL-2.1-only"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Marcus Bointon",
|
||||
"email": "phpmailer@synchromedia.co.uk"
|
||||
},
|
||||
{
|
||||
"name": "Jim Jagielski",
|
||||
"email": "jimjag@gmail.com"
|
||||
},
|
||||
{
|
||||
"name": "Andy Prevost",
|
||||
"email": "codeworxtech@users.sourceforge.net"
|
||||
},
|
||||
{
|
||||
"name": "Brent R. Matzelle"
|
||||
}
|
||||
],
|
||||
"description": "PHPMailer is a full-featured email creation and transfer class for PHP",
|
||||
"support": {
|
||||
"issues": "https://github.com/PHPMailer/PHPMailer/issues",
|
||||
"source": "https://github.com/PHPMailer/PHPMailer/tree/v6.9.3"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://github.com/Synchro",
|
||||
"type": "github"
|
||||
}
|
||||
],
|
||||
"time": "2024-11-24T18:04:13+00:00"
|
||||
},
|
||||
{
|
||||
"name": "phpoffice/phpspreadsheet",
|
||||
"version": "1.29.10",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user