## 知识点：
1、准备工作
2、实现注册功能
3、实现登录功能
[TOC]
## 一、准备工作
### （一）新建模板文件夹
位置：application\index\view\default\user\
两个文件：login.html和register.html
### （二）前台添加user控制器
~~~
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
class User extends Controller
{
public function login(){
return view('../application/index/view/default/user/login.html');
}
public function register(){
return view('../application/index/view/default/user/register.html');
}
}
~~~
### （三）首页添加登录和注册链接
~~~
<i class="fa fa-user"></i> <a href="{:url('user/login')}">请登录</a>
<i class="fa fa-plus-square"></i> <a href="{:url('user/register')}">我要注册</a>
~~~
### （四）完善登录和注册页面模板
## 二、实现注册功能
### （一）表单验证
#### 1、拷贝文件夹
位置：public\static\index\default\plugins\layui
#### 2、引入两个文件
注册页面引入
~~~
<script type="text/javascript" src="__INDEX__/default/plugins/layui/layui.js"></script>
~~~
#### 3、模板表单添加样式
表单添加样式class="layui-form"
~~~
<form class="layui-form" method="post" action="">
<input type="text" class="form-control uname layui-input" lay-verify="required" placeholder="用户名" />
<input type="password" class="form-control pword m-b" placeholder="密码" />
<input type="password" class="form-control pword m-b" placeholder="确认密码" />
<button class="btn btn-success btn-block layui-btn" lay-submit="">注册</button>
</form>
~~~
#### 4、事件响应
~~~
<script type="text/javascript" src="__INDEX__/default/plugins/layui/layui.js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form(),layer = layui.layer;
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
},
pass: [/(.+){6,12}$/, '密码必须6到12位']
});
//监听提交
form.on('submit', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
});
</script>
~~~
#### 5、改样式冲突
位置：public\static\admin\css\login.min.css
删除：;color:rgba(255,255,255,.95)
### （二）表单自定义验证
#### 1、改进表单
引入jQuery.js文件
~~~
<script type='text/javascript' src='__INDEX__/default/js/jquery.min.js'></script>
<form class="layui-form" method="post" action="">
<input type="text" name="username" class="form-control uname layui-input" lay-verify="username" placeholder="用户名" />
<input type="password" name="password" class="form-control pword m-be layui-input" lay-verify="password" placeholder="密码" />
<input type="password" name="repassword" class="form-control pword m-b layui-input" lay-verify="repassword" placeholder="确认密码" />
<button class="btn btn-success btn-block layui-btn" lay-submit="">注册</button>
</form>
~~~
#### 2、响应事件
~~~
<script>
layui.use(['form'], function(){
var form = layui.form(),layer = layui.layer;
//自定义验证规则
form.verify({
username: function(value){
if(value.length == 0){
return '用户名不能为空!';
}
},
password: [
/(.+){6,}$/,
'密码必须大于6位'
],
repassword: function(value){
var password = $("input[name='password']").val();
if(value != password){
return '两次密码不一致!';
}
},
});
//监听提交
form.on('submit', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
});
</script>
~~~
### （三）后台处理
#### 1、获取数据和地址
~~~
var url = $("form").attr('action');
var data = $('form').serializeArray(); //序列化表单元素
~~~
#### 2、异步提交
~~~
<script>
layui.use(['form'], function(){
var form = layui.form(),layer = layui.layer;
//自定义验证规则
form.verify({
username: function(value){
if(value.length == 0){
return '用户名不能为空!';
}
},
password: [
/(.+){6,}$/,
'密码必须大于6位'
],
repassword: function(value){
var password = $("input[name='password']").val();
if(value != password){
return '两次密码不一致!';
}
},
});
//监听提交
form.on('submit', function(data){
//获取数据
var url = $("form").attr('action');
var data = $('form').serializeArray(); //序列化表单元素
$.ajax({
type: "POST",
dataType:"json",
url:url,
data:data,
success:function(obj){
},
error:function(data){
layer.alert('注册失败!');
}
});
return false;
});
});
</script>
~~~
#### 3、后台处理
首先，判断用户名是否存在，是则不能注册202，否则执行注册程序
其次，用户注册
第三，写入Session
第四，返回成功信息（跳转至后台）
第五，插入新数据后执行触发器
~~~
public function register(){
if(request()->isPost()){
//判断用户名是否存在
$count = Db::name('user')->where('username',input('post.username'))->count();
if($count){
$data['status'] = 202;
$data['msg'] = '用户名已存在!';
return json($data);
}else{
//用户注册
$data = input('post.');
$data['password'] = md5($data['password']);
$id = Db::name('user')->strict(false)->insert($data); //插入新数据后执行触发器
}
}else{
return view('../application/index/view/default/user/register.html');
}
}
~~~
#### 4、改user数据表结构
删除表字段：code、last_login_time、last_login_ip
修改字段register_time：类型是timestamp（时间戳）、默认是CURRENT_TIMESTAMP
清空原数据
#### 5、插入新数据后执行触发器
>个人理解
触发器，从字面来理解，一触即发的一个器，简称触发器（哈哈，个人理解），举个例子吧，好比天黑了，你开灯了，你看到东西了。你放炮仗，点燃了，一会就炸了。
>user表触发器：
名：t_insert_group_access
出发：after
插入时
定义：写入一条新数据 （1标识用户ID，4标识会员ID）
~~~
INSERT INTO x_auth_group_access VALUES(1,4)
INSERT INTO x_auth_group_access VALUES((SELECT MAX(id) FROM x_user),4)
~~~
>触发器写在PHP代码中
~~~
$uid = Db::name('user')->max('id');
$group_access = ['uid'=>$uid,'group_id'=>4];
Db::name('auth_group_access')->strict(false)->insert($group_access);
~~~
聚合查询
https://www.kancloud.cn/manual/thinkphp5/135183
mysql触发器(Trigger)简明总结和使用实例
https://www.jb51.net/article/49207.htm
## 三、实现登录功能
### （一）表单
~~~
<form class="m-t layui-form" action="{:url('login')}">
<div class="form-group">
<input type="text" name="username" class="form-control uname layui-input" lay-verify="username" placeholder="用户名" />
</div>
<div class="form-group">
<input type="password" name="password" class="form-control pword m-be layui-input" lay-verify="password" placeholder="密码" />
</div>
<button class="btn btn-primary block full-width layui-btn" lay-submit="">登录到雪狐CMS</button>
</form>
~~~
### （二）事件响应
~~~
<script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script>
<script src="__ADMIN__/js/bootstrap.min.js?v=3.3.6"></script>
<script type="text/javascript" src="__INDEX__/default/plugins/layui/layui.js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form(),layer = layui.layer;
//自定义验证规则
form.verify({
username: function(value){
if(value.length == 0){
return '用户名不能为空!';
}
},
password: [
/(.+){6,}$/,
'密码必须大于6位'
]
});
//监听提交
form.on('submit', function(data){
//获取数据
var url = $("form").attr('action');
var data = $('form').serializeArray(); //序列化表单元素
$.ajax({
type: "POST",
dataType:"json",
url:url,
data:data,
success:function(obj){
if(obj.status == 200){
location.href = obj.url;
}else{
layer.alert(obj.msg);
}
},
error:function(data){
layer.alert('登录失败!');
}
});
return false;
});
});
</script>
~~~
### （三）后台处理
~~~
public function login(){
if(request()->isPost()){
$data = input('post.');
//判断用户名是否存在
$map['username'] = $data['username'];
$user = Db::name('user')->where($map)->find();
if($user){
if($user['password'] == md5($data['password'])){
//写入Session
session('uid',$user['id']);
//返回成功信息
$data['status'] = 200;
$data['url'] = url('/admin');
return json($data);
}else{
//返回错误信息
$data['status'] = 202;
$data['msg'] = '登录密码错误!';
return json($data);
}
}else{
//返回错误信息
$data['status'] = 202;
$data['msg'] = '用户名不存在!';
return json($data);
}
}else{
return view('../application/index/view/default/user/login.html');
}
}
~~~
- Layer无刷新不跳转弹框提示信息
- 整合ThinkPHP+实用代码
- TP整合Layer插件实现无刷新
- 自定义助手函数
- 添加信息失败后不跳转
- 三种无限级分类
- TP常用代码
- 自定义公共函数
- TP模型管理专题
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之删除模型
- TP模型管理之编辑模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段删除
- TP模型管理之字段编辑
- TP模型管理之预览模型
- TP模型管理之公共函数
- layer_hplus.js_修订一
- TP模型管理之预览模型静态页
- 后台内容管理系统
- 分类树显示
- 内容列表显示
- 信息发布
- 编辑信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 简单调用
- 路径问题
- 跨域多图上传
- 跨域单图上传
- UEditor图片跨域上传解决方案
- 定制工具栏图标
- ajaxFileUpload
- LayUI
- 图片上传
- layui分页
- 搜索页
- 搜索优化及删除
- Uploadify
- TP5前端应用
- 静态首页
- 前台首页功能实现
- 自定义标签库
- 前台模板继承应用
- 首页自定义标签改进
- 文章内容页
- 自定义标签改进
- 自定义标签修正
- 图片等比例自动缩放
- 后台权限管理
- 角色管理
- 规则管理
- 权限设置
- 会员管理
- 权限管理
- 前台登录注册功能
- 注册登录
- 阿里大于手机注册
- 阿里大于升级阿里云短信服务
- 自动登录完成
- PHP异位或加密实现自动登陆
- 微信开发
- 分享接口
- 静态页面实现微信分享
- 动态页微信分享
- 页面静态化
- 1-全站静态化前期配置
- 2-链接地址静态化
- TP5常用片段代码
- 加载静态资源路径与常量
- thinkphp5预定义常量
- 删除某文件夹的内容
- 解压插件包
- 异步提交插件
- 其他功能
- 背景音乐
- 手机访问PC网站自动跳转到手机网站代码
- 手机微信音乐MP3播放器
- 后盾之网页背景音乐
- 播放器宽度自适应
- 前台首页数据调用
- 视频列表
- 搜索分页
- H5解决苹果（IOS）不能自动播放音乐
- 清空缓存
- 文件处理常识
- 删除路径下的所有文件夹和文件
- 一键清空缓存
- 评论留言
- 格式化时间
- 替换微博内容的URL地址@用户与表情
- PHP正则理解
- jQuery评论插件
- TP空操作
- TP路由
- 跨域访问
- 设置请其头允许跨域请求
- 模板前台判断手机访问跳转手机网址代码
- PHP遍历一个文件夹下所有文件和子文件夹
- PHP获取视频的第一帧与时长
- TP5数据库
- 链式操作原理
- update替换字段部分内容
- 后台开发
- 后台登录页居中显示
- TP5自带验证码
- JS & JQuery专题
- 二级城市联动菜单
- 模板引擎
- 混合模板编译
- 黄永成TP微博开发
- 消息推送
- memcache安装
- 插件开发
- 插件介绍
- 插件钩子
- 浅谈初步理解钩子
- 插件钩子(hooks)分析
- 插件钩子简单理解
- 控制器调用插件
- 钩子通用处理函数
- 插件基类代码
- 插件测试代码
- 浅谈钩子与插件
- 技术综合
- 常用代码
- PHP
- 56个PHP开发常用代码片段（上）
- 56个PHP 开发常用代码片段（中）
- 56个PHP 开发常用代码片段（下）
- sublime text安装自动补全注释的插件
- 影音视频开发
- 视频
- H5视频直播扫盲
- 音乐
- 语音
- PHP实现语音播报功能
- MUI
- 窗体操作