資訊專欄INFORMATION COLUMN
摘要：根據文章的標題，大家應該看出來了，我在部門和人員這一模塊當中就用了無刷新的技術，一并結合自帶的驗證。需求分析做一個部門和人員模塊全部使用無刷新技術開發。一大模塊全部實現無刷新，有些方法代碼量會很大，得把握好它們之間的相關性和其它互不影響性。
前言
Ajax+PHP實現動態無刷新技術應用及其廣泛，因為它有著可動態的實現WEB頁面局部刷新，減輕服務器端負擔，按需取數據，能帶來更好的用戶體驗的優勢。主要適用的場景像一些表單驅動的交互，普通的文本輸入提示和自動完成，投票yes/no等無關痛癢的場景等等。根據文章的標題，大家應該看出來了，我在“部門和人員”這一模塊當中就用了無刷新的技術，一并結合Yii2自帶的Csrf驗證。在這么使用的時候，我遇到了一些問題，也想出了一些解決方式，今天花了點時間整理一下，分享了。
需求分析1、做一個部門和人員模塊全部使用Aajx無刷新技術開發。
2、要求使用Yii2自帶的Csrf驗證。
部門和人員模塊效果
Csrf驗證
代碼分析結合需求，在點擊的按鈕上全部加上onClick點擊事件，然后function事件的方法通過Ajax把數據傳到控制器處理，返回進行局部刷新頁面，查看結果是否正確，實現思路大致就這樣。這么說可能還有人迷糊，下面我附上代碼，因代碼量太大，所以我只附關鍵部分。
以添加員工為例：
1、視圖部分
點擊添加員工按鈕，在添加員工按鈕上定義個onClick="AddUser()"事件，因為我用的是a標簽，所以為了避免雙重點擊跳轉，這里我把a標簽里的href設為“javascript:void(0);”禁止跳轉。
添加員工
點擊提交表單按鈕，通過Ajax提交。注意這里我使用的是Button，而不是submitButton，使用submitButton無法實現無刷新。
"btn btn-primary","onClick"=>"UUpdate1()"]) ?>
2、JS部分。
我分成兩步走，第一步是點擊添加展示視圖頁面，第二部分是添加部門提交表單驗證，返回局部刷新頁面。
第一步：
//列表添加員工
function AddUser(){
$.ajax({
type : "post",
url : "/department/tree",
dataType : "text",
data : {"AddUser":"AddUser"}, //固定參數，區分用
success : function(data){
$("#href_data").html(data);
}
});
}
第二步：
//列表添加員工提交表單驗證
function AddUser1(){
var id=$("#current_dep").val();
var company_id=$("#current_com").val();
var parent_id=$("#user-parent_id").val();
var t_nickname=$("#user-t_nickname").val();
var t_realname=$("#user-t_realname").val();
var t_mobile=$("#user-t_mobile").val();
var t_email=$("#user-t_email").val();
//獲取選中部門
var arr = document.getElementsByName("department_ids[]");
var arrLen = arr.length;
var chk = [];
var chkPoint = 0;
for (var i = 0; i < arrLen; i ++) {
if(arr[i].checked == true){
chk[chkPoint] = arr[i].value;
chkPoint ++;
}
}
//獲取選中職位
var posit = document.getElementsByName("UserProfile[position][]");
var arrlen = posit.length;
var position = [];
var chkpoint = 0;
for (var i = 0; i < arrlen; i ++) {
if(posit[i].checked == true){
position[chkpoint] = posit[i].value;
chkpoint ++;
}
}
//昵稱，真實姓名，郵箱同時存在才能提交表單
if(t_nickname && t_realname && t_email){
$.ajax({
type : "post",
url : "/department/tree",
dataType : "text",
data : {
"UId":id,
"UCompany_id":company_id,
"SEdit":"SEdit",
"add_user":"add_user",
"User[parent_id]":parent_id,
"User[t_nickname]":t_nickname,
"User[t_realname]":t_realname,
"User[t_mobile]":t_mobile,
"User[t_email]":t_email,
"department_ids":chk,
"UserProfile[position]":position,
"_csrf":"request->getCsrfToken (); ?>"
},
success : function(data){
$("#href_data").html(data);
}
});
}else{
$.ajax({
type : "post",
url : "/department/tree",
dataType : "text",
data : {"UId":id,"UCompany_id":company_id,"SEdit":"SEdit","add_user":"add_user","User[t_nickname]":t_nickname,"User[t_realname]":t_realname,"User[t_email]":t_email,"User[t_mobile]":t_mobile},
success : function(data){
$("#href_data").html(data);
}
});
}
}
注釋：三個url都是一樣的，這就是Ajax的特別之處，不管頁面數據怎么變化，url地址還是一樣的。
3、PHP部分。
列表-添加員工展示視圖
if(!empty($post["AddUser"])){
$Data=$this->actionTreeUpdate("",$user1->company_id,""); //獲取員工，員工詳細信息，部門實例化的model
return $this->renderPartial("tree_update", [
"model" => $Data["model"],
"model_1" => $Data["model_"],
"departar"=>$Data["departar"],
"positionar"=>$Data["positionar"],
"users" => $Data["users"],
"UId"=>"", //添加不需要傳
"UCompany_id"=>"", //添加不需要傳
"add_user"=>"add_user"
]);
}
department里的tree方法主要代碼，驗證保存數據在這里
if(!empty($post["SEdit"])){
$UId=$post["UId"];
$UCompany_id=$post["UCompany_id"];
$SEdit=$post["SEdit"];
$add_user=!empty($post["add_user"])?$post["add_user"]:"";
unset($post["SEdit"],$post["UId"],$post["UCompany_id"],$post["add_user"]);
$Data=$this->actionTreeUpdate($UId,$UCompany_id,$post);
$class = $this->userModels;
$Class_= $this->UserProfile;
//判斷是否為添加員工
if(!empty($add_user)){
$UId=0;
}
$model_2 = $class::findIdentity($UId);
$model_3=$Class_::findOne($UId);
//列表-添加員工
$t_id1="";
$t_id=!empty($model_2->attributes["t_id"])?$model_2->attributes["t_id"]:"";
if(empty($model_2)){
$model_2 = new $class;
$post["_csrf"]=Yii::$app->request->getCsrfToken();
$depart=!empty($post["department_ids"])?$post["department_ids"]:array();
$model_2->parent_id=!empty($post["User"]["parent_id"])?$post["User"]["parent_id"]:"";
if($depart)
{
$model_2->department_id1=!empty($depart[0])?$depart[0]:0;
$model_2->department_id2=!empty($depart[1])?$depart[1]:0;
$model_2->department_id3=!empty($depart[2])?$depart[2]:0;
$model_2->department_ids=join(",",$depart);
}else{
$model_2->department_ids="";
}
$model_2->t_password=base64_encode($user1->t_password);
$model_2->t_state=0;
$model_2->t_status=1;
$model_2->company_id= $user1->company_id;
if($model_2->load($post) && $model_2->save()){
//插入返回員工id
$t_id1=$model_2->attributes["t_id"];
$Data="success";
}
}
//驗證通過，選擇職位后保存
if($model_2->load($post) && $model_2->validate() && !empty($post["UserProfile"]["position"])){
$Data="success";
}
if($model_2->load($post) && $model_2->validate() && $Data=="success"){
if(empty($model_3) && !empty($t_id1)){
$model_3 = new $Class_;
$model_3->uid=$t_id1;
}
//保存職位
if(!empty($post["UserProfile"]["position"]) && $model_3->load($post))
{
$posar=!empty($post["UserProfile"]["position"])?$post["UserProfile"]["position"]:array();
if($posar)
{
$model_3->position_id1=!empty($posar[0])?$posar[0]:0;
$model_3->position_id2=!empty($posar[1])?$posar[1]:0;
$model_3->position_id3=!empty($posar[2])?$posar[2]:0;
$model_3->position_ids=$posar?join(",",$posar):"";
$model_3->position=Position::getpos_name($posar);
}else{
$model_3->position_id1="";
}
$model_3->save();
}else{
$posar=!empty($post["UserProfile"]["position"])?$post["UserProfile"]["position"]:array();
if(empty($posar)){
//判斷個人詳細信息表是否有值，有值直接替換，無值重新實例化
$model_3=$Class_::find()->where(["uid"=>$t_id])->one();
if(empty($model_3)){
$model_3 = new $Class_;
$model_3->uid=$t_id;
}
$model_3->position_id1=0;
$model_3->position_id2=0;
$model_3->position_id3=0;
$model_3->position_ids=0;
$model_3->save();
}
}
return $this->renderPartial("tree_list", [
"dataProvider" => $dataProvider,
"searchModel" => $searchModel,
"idField" => $this->idField,
"usernameField" => $this->usernameField,
"extraColumns" => $this->extraColumns,
"data"=>$data_1,
"data_2" => $html,
"model_"=>$model,
"department_ids1" =>!empty($Dep->id)?$Dep->id:"",
"company_id1"=>$UCompany_id,
]);
注釋：1、Yii2 Csrf自動驗證功能只有使用$model_2->validate()或者$model_2->save()才能夠觸發。
2、使用$model->load($post)；$post的數組格式如下幾種類型，必須的
Array
(
[User] => Array
(
[parent_id] =>
[t_nickname] => 測試
[t_realname] => 小凌
[t_mobile] =>
[t_email] => 123321@qq.com
)
[department_ids] => Array
(
[0] => 14
[1] => 15
)
[UserProfile] => Array
(
[position]=>Array
(
[0] => 5
[1] => 10
)
)
[_csrf] => LkU4dlE2amdIdVI9AHVZJGYdC058BCctejRbPhdxDQJlBmI3MFkpNQ==
)
常見問題
1、Yii2自帶的Csrf驗證不起作用。
檢查方向：
1.1、是否使用了$model_2->validate()或者$model_2->save()，觸發Csrf驗證必須有。
1.2、Ajax傳過來的數組格式是不是正確的，上面有說明。
1.3、查看控制臺報錯信息，哪報錯從哪找原因。
2、提交表單的時候使用submitButton，使用submitButton的話沒法實現無刷新。控制器所需的數據全部都是通過JS獲取，Ajax傳的方式得到。
3、一大模塊全部實現無刷新，有些方法代碼量會很大，得把握好它們之間的相關性和其它互不影響性。
大俠給講解一下， $model->load() 與 validate()：http://www.yiichina.com/question/955
使用表單：http://www.yiibai.com/yii2/start-forms.html
Ajax+PHP實現動態無刷新技術：http://www.cnblogs.com/freespider/archive/2012/04/11/2442138.html
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/21536.html
摘要：前言一直以來自己對安全方面的知識了解的比較少，最近有點閑工夫了解了一下。攻擊的一般是由服務端解決。攻擊條件登錄受信任網站，并在本地生成。驗證對所有引用對象的授權。 前言 一直以來自己對WEB安全方面的知識了解的比較少，最近有點閑工夫了解了一下。也是為了以后面試吧，之前就遇到過問WEB安全方面的問題，答的不是很理想，所以整理了一下！ 一、XSS攻擊 跨站腳本攻擊(Cross Site ...
摘要：前言一直以來自己對安全方面的知識了解的比較少，最近有點閑工夫了解了一下。攻擊的一般是由服務端解決。攻擊條件登錄受信任網站，并在本地生成。驗證對所有引用對象的授權。 前言 一直以來自己對WEB安全方面的知識了解的比較少，最近有點閑工夫了解了一下。也是為了以后面試吧，之前就遇到過問WEB安全方面的問題，答的不是很理想，所以整理了一下！ 一、XSS攻擊 跨站腳本攻擊(Cross Site Sc...
摘要：騰訊地圖提供的只提供了經緯度定位，而產品需要的是確認定位后獲取城市，進行同城商品檢索阿里云對象儲存處理文件上傳，比較意外的是騰訊對阿里云的域名前綴進行了封禁后臺不能配置，解決方案是讓后臺將該域名進行服務器域名代理。 mpvue開發小程序所遇問題及h5轉化方案 項目結構 |---build |---pages.js文件目錄 |---src ...
摘要：受害者在銀行有一筆存款，通過對銀行的網站發送請求可以使把的存款轉到的賬號下。大多數情況下，該請求會失敗，因為他要求的認證信息。要抵御，關鍵在于在請求中放入黑客所不能偽造的信息，并且該信息不存在于之中。 受害者 Bob 在銀行有一筆存款，通過對銀行的網站發送請求 http://bank.example/withdraw?... 可以使 Bob 把 1000000 的存款轉到 bob2 的...
閱讀 2990·2021-11-16 11:45
閱讀 5191·2021-09-22 10:57
閱讀 1775·2021-09-08 09:36
閱讀 1605·2021-09-02 15:40
閱讀 2517·2021-07-26 23:38
閱讀 1206·2019-08-30 15:55
閱讀 931·2019-08-30 15:54
閱讀 1223·2019-08-29 14:06
