部门和人员所有实现无刷新并结合Csrf验证所遇问题

时间 2020-08-22

原文原文链接

前言

Ajax+PHP实现动态无刷新技术应用及其普遍，由于它有着可动态的实现WEB页面局部刷新，减轻服务器端负担，按需取数据，能带来更好的用户体验的优点。主要适用的场景像一些表单驱动的交互，普通的文本输入提示和自动完成，投票yes/no等无关痛痒的场景等等。根据文章的标题，你们应该看出来了，我在“部门和人员”这一模块当中就用了无刷新的技术，一并结合Yii2自带的Csrf验证。在这么使用的时候，我遇到了一些问题，也想出了一些解决方式，今天花了点时间整理一下，分享了。javascript

需求分析

一、作一个部门和人员模块所有使用Aajx无刷新技术开发。
二、要求使用Yii2自带的Csrf验证。php

效果图

部门和人员模块效果html

Csrf验证java

代码分析

结合需求，在点击的按钮上所有加上onClick点击事件，而后function事件的方法经过Ajax把数据传到控制器处理，返回进行局部刷新页面，查看结果是否正确，实现思路大体就这样。这么说可能还有人迷糊，下面我附上代码，因代码量太大，因此我只附关键部分。ajax

以添加员工为例：数组

一、视图部分服务器

点击添加员工按钮，在添加员工按钮上定义个onClick="AddUser()"事件，由于我用的是a标签，因此为了不双重点击跳转，这里我把a标签里的href设为“javascript:void(0);”禁止跳转。yii2

<a style="margin-left: 130px;" class="btn btn-success" onClick="AddUser()" href="javascript:void(0);"><i class="glyphicon glyphicon-plus"></i> 添加员工</a>

点击提交表单按钮，经过Ajax提交。注意这里我使用的是Button，而不是submitButton，使用submitButton没法实现无刷新。app

<?php echo Html::Button(Yii::t('yii', 'Create'), ['class' =>'btn btn-primary','onClick'=>"UUpdate1()"]) ?>

二、JS部分。yii

我分红两步走，第一步是点击添加展现视图页面，第二部分是添加部门提交表单验证，返回局部刷新页面。

第一步：
//列表添加员工
  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':'<?php echo Yii::$app->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地址仍是同样的。

三、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,

               ]);

注释：一、Yii2 Csrf自动验证功能只有使用$model_2->validate()或者$model_2->save()才可以触发。
二、使用$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==
)

常见问题

一、Yii2自带的Csrf验证不起做用。
检查方向：
1.一、是否使用了$model_2->validate()或者$model_2->save()，触发Csrf验证必须有。
1.二、Ajax传过来的数组格式是否是正确的，上面有说明。
1.三、查看控制台报错信息，哪报错从哪找缘由。
二、提交表单的时候使用submitButton，使用submitButton的话无法实现无刷新。控制器所需的数据所有都是经过JS获取，Ajax传的方式获得。
三、一大模块所有实现无刷新，有些方法代码量会很大，得把握好它们之间的相关性和其它互不影响性。

部门和人员所有实现无刷新并结合Csrf验证所遇问题

前言

需求分析

效果图

代码分析

常见问题

相关资料