部門和人員全部實(shí)現(xiàn)無刷新并結(jié)合Csrf驗(yàn)證所遇問題

Zhuxy 發(fā)布于2019-06-27 13:39 / 1592人閱讀

摘要：根據(jù)文章的標(biāo)題，大家應(yīng)該看出來了，我在部門和人員這一模塊當(dāng)中就用了無刷新的技術(shù)，一并結(jié)合自帶的驗(yàn)證。需求分析做一個(gè)部門和人員模塊全部使用無刷新技術(shù)開發(fā)。一大模塊全部實(shí)現(xiàn)無刷新，有些方法代碼量會(huì)很大，得把握好它們之間的相關(guān)性和其它互不影響性。

前言

Ajax+PHP實(shí)現(xiàn)動(dòng)態(tài)無刷新技術(shù)應(yīng)用及其廣泛，因?yàn)樗兄蓜?dòng)態(tài)的實(shí)現(xiàn)WEB頁面局部刷新，減輕服務(wù)器端負(fù)擔(dān)，按需取數(shù)據(jù)，能帶來更好的用戶體驗(yàn)的優(yōu)勢(shì)。主要適用的場(chǎng)景像一些表單驅(qū)動(dòng)的交互，普通的文本輸入提示和自動(dòng)完成，投票yes/no等無關(guān)痛癢的場(chǎng)景等等。根據(jù)文章的標(biāo)題，大家應(yīng)該看出來了，我在“部門和人員”這一模塊當(dāng)中就用了無刷新的技術(shù)，一并結(jié)合Yii2自帶的Csrf驗(yàn)證。在這么使用的時(shí)候，我遇到了一些問題，也想出了一些解決方式，今天花了點(diǎn)時(shí)間整理一下，分享了。

需求分析

1、做一個(gè)部門和人員模塊全部使用Aajx無刷新技術(shù)開發(fā)。
2、要求使用Yii2自帶的Csrf驗(yàn)證。

效果圖

部門和人員模塊效果

Csrf驗(yàn)證

代碼分析

結(jié)合需求，在點(diǎn)擊的按鈕上全部加上onClick點(diǎn)擊事件，然后function事件的方法通過Ajax把數(shù)據(jù)傳到控制器處理，返回進(jìn)行局部刷新頁面，查看結(jié)果是否正確，實(shí)現(xiàn)思路大致就這樣。這么說可能還有人迷糊，下面我附上代碼，因代碼量太大，所以我只附關(guān)鍵部分。

以添加員工為例：

1、視圖部分

點(diǎn)擊添加員工按鈕，在添加員工按鈕上定義個(gè)onClick="AddUser()"事件，因?yàn)槲矣玫氖莂標(biāo)簽，所以為了避免雙重點(diǎn)擊跳轉(zhuǎn)，這里我把a(bǔ)標(biāo)簽里的href設(shè)為“javascript:void(0);”禁止跳轉(zhuǎn)。

 添加員工

點(diǎn)擊提交表單按鈕，通過Ajax提交。注意這里我使用的是Button，而不是submitButton，使用submitButton無法實(shí)現(xiàn)無刷新。

"btn btn-primary","onClick"=>"UUpdate1()"]) ?>

2、JS部分。

我分成兩步走，第一步是點(diǎn)擊添加展示視圖頁面，第二部分是添加部門提交表單驗(yàn)證，返回局部刷新頁面。

第一步：
//列表添加員工
  function AddUser(){
     $.ajax({ 
            type     : "post",
            url      : "/department/tree",
            dataType : "text",
            data     :  {"AddUser":"AddUser"}, //固定參數(shù)，區(qū)分用
            success  : function(data){ 
                $("#href_data").html(data);
            }
    });  

  }

第二步：
 //列表添加員工提交表單驗(yàn)證
 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 ++;
        }
    } 
    //昵稱，真實(shí)姓名，郵箱同時(shí)存在才能提交表單
    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);
                }
       }); 
    }  
 }

注釋：三個(gè)url都是一樣的，這就是Ajax的特別之處，不管頁面數(shù)據(jù)怎么變化，url地址還是一樣的。

3、PHP部分。

列表-添加員工展示視圖
        if(!empty($post["AddUser"])){   
             $Data=$this->actionTreeUpdate("",$user1->company_id,""); //獲取員工，員工詳細(xì)信息，部門實(shí)例化的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方法主要代碼，驗(yàn)證保存數(shù)據(jù)在這里
        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";
                }  
            } 

            //驗(yàn)證通過，選擇職位后保存
            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)){
                        //判斷個(gè)人詳細(xì)信息表是否有值，有值直接替換，無值重新實(shí)例化
                        $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自動(dòng)驗(yàn)證功能只有使用$model_2->validate()或者$model_2->save()才能夠觸發(fā)。
2、使用$model->load($post)；$post的數(shù)組格式如下幾種類型，必須的

Array
(
    [User] => Array
        (
            [parent_id] => 
            [t_nickname] => 測(cè)試
            [t_realname] => 小凌
            [t_mobile] => 
            [t_email] => [email protected]
        )

    [department_ids] => Array
        (
            [0] => 14
            [1] => 15
        )
    [UserProfile] => Array
        (
            [position]=>Array
            (
                [0] => 5
                [1] => 10
            )    
        )

    [_csrf] => LkU4dlE2amdIdVI9AHVZJGYdC058BCctejRbPhdxDQJlBmI3MFkpNQ==
)

常見問題

1、Yii2自帶的Csrf驗(yàn)證不起作用。
檢查方向：
1.1、是否使用了$model_2->validate()或者$model_2->save()，觸發(fā)Csrf驗(yàn)證必須有。
1.2、Ajax傳過來的數(shù)組格式是不是正確的，上面有說明。
1.3、查看控制臺(tái)報(bào)錯(cuò)信息，哪報(bào)錯(cuò)從哪找原因。
2、提交表單的時(shí)候使用submitButton，使用submitButton的話沒法實(shí)現(xiàn)無刷新?？刂破魉璧臄?shù)據(jù)全部都是通過JS獲取，Ajax傳的方式得到。
3、一大模塊全部實(shí)現(xiàn)無刷新，有些方法代碼量會(huì)很大，得把握好它們之間的相關(guān)性和其它互不影響性。

相關(guān)資料

大俠給講解一下， $model->load() 與 validate()：http://www.yiichina.com/question/955
使用表單：http://www.yiibai.com/yii2/start-forms.html
Ajax+PHP實(shí)現(xiàn)動(dòng)態(tài)無刷新技術(shù)：http://www.cnblogs.com/freespider/archive/2012/04/11/2442138.html

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/21536.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Zhuxy

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

小小碼民刷算法——反轉(zhuǎn)字符串

閱讀 2987·2021-11-16 11:45
寶塔網(wǎng)站誤刪除如何恢復(fù)?寶塔網(wǎng)站刪除恢復(fù)備份的方法

閱讀 5187·2021-09-22 10:57
??數(shù)據(jù)科學(xué)-Pandas、Numpy、Matplotlib秘籍之精煉總結(jié)

閱讀 1774·2021-09-08 09:36
使用STM32CubeMX初始化STM32F031F6Px系列

閱讀 1602·2021-09-02 15:40
騰訊云-云產(chǎn)品限時(shí)秒殺，爆款1核2G云服務(wù)器，首年99元，企業(yè)新用戶新購2核4G僅454一年！須要下

閱讀 2517·2021-07-26 23:38
手機(jī)H5 web調(diào)試?yán)鳌猈EINRE (WEb INspector REmote) 安卓手機(jī)

閱讀 1203·2019-08-30 15:55
angular 組件通信

閱讀 929·2019-08-30 15:54
JavaScript 優(yōu)雅的實(shí)現(xiàn)方式包含你可能不知道的知識(shí)點(diǎn)

閱讀 1220·2019-08-29 14:06

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

部門和人員全部實(shí)現(xiàn)無刷新并結(jié)合Csrf驗(yàn)證所遇問題

相關(guān)文章

競(jìng)爭激烈的互聯(lián)網(wǎng)時(shí)代，是否需要注重一下WEB安全？

競(jìng)爭激烈的互聯(lián)網(wǎng)時(shí)代，是否需要注重一下WEB安全？

mpvue開發(fā)小程序所遇問題及h5轉(zhuǎn)化方案

**理解CSRF跨站請(qǐng)求偽造**

發(fā)表評(píng)論

0條評(píng)論

Zhuxy

男|高級(jí)講師

TA的文章

小小碼民刷算法——反轉(zhuǎn)字符串

寶塔網(wǎng)站誤刪除如何恢復(fù)?寶塔網(wǎng)站刪除恢復(fù)備份的方法

??數(shù)據(jù)科學(xué)-Pandas、Numpy、Matplotlib秘籍之精煉總結(jié)

使用STM32CubeMX初始化STM32F031F6Px系列

騰訊云-云產(chǎn)品限時(shí)秒殺，爆款1核2G云服務(wù)器，首年99元，企業(yè)新用戶新購2核4G僅454一年！須要下

手機(jī)H5 web調(diào)試?yán)鳌猈EINRE (WEb INspector REmote) 安卓手機(jī)

angular 組件通信

JavaScript 優(yōu)雅的實(shí)現(xiàn)方式包含你可能不知道的知識(shí)點(diǎn)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

部門和人員全部實(shí)現(xiàn)無刷新并結(jié)合Csrf驗(yàn)證所遇問題

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！