## 知識點：
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);
~~~
聚合查詢
http://www.hmoore.net/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
- 窗體操作