首頁 >php框架 >Laravel >【laravel】blog專案實戰筆記-後台多層分類清單建立及Ajax非同步修改分類排序

【laravel】blog專案實戰筆記-後台多層分類清單建立及Ajax非同步修改分類排序

演明
演明原創
2021-09-08 07:46:491208瀏覽

總是想自己一個人做一個小的項目,但是不知道怎麼著手,平時上班時總是做項目中某個部分的任務,沒有整體做一個項目,下面是我看php中文網的視頻整理的筆記,供大家參考。這是在Windows環境下做的blog實戰項目,以下文章是專案的一部分,一節一節分享的,想看更多追蹤我,我會持續更新。

一、後台文章分類頁多層次分類清單

1)加入多層分類注意cate_pid和cate_id一樣就證明它在哪個分類下

#2)加入個方法處理分類

public function getTree(){
}

3)在上面的方法裡調下面的方法 

$data = $this->getTree($categroy);
public function index(){
$categroy = CategroyModel::all();
$data = $this->getTree($categroy,'cate_name','cate_pid','cate_id');
return view('home/categroy/index')->with('data',$data);
}

4)下面列印一下看上面參數是否傳進來

public function getTree($data){
dd($data);
}

5)先把cate_pid是0的給篩選出來,然後再次循環把cate_pid和cate_id相等的篩選出來,為了讓方法更加強壯,我們想到用傳參的方式,

public function getTree($data,'$file_pid=‘pid’,$file_id=‘id’,$pid=0){
     $arr = array();
   foreach($data as $key =>$value){
if($value->$file_pid==$pid){
$data[$key]["_cate_name"]=$data[$key]["cate_name"];
$arr[] = $data[$key];
foreach($data as $k=>$v{
                    if($value->$file_pid==$v->$file_id){
      //新定义个字段把分类的下级定义出来
$data[$k]["_cata_name"]='-->'.$data[$k]["cate_name"]
$arr[]=$data[$v];
}
       }
      }
   }

更好的優化程式碼:

把控制器裡的整理資料的過程放到模型中

public static function tree(){   //用的是静态方法
$categroy =  CategroyModel::all();
return (new CategroyModel)->getTree($categroy,'cate_name','cate_pid','cate_id');
}
public function tree(){
$categroy = $this->all();
return $this->getTree($categroy,'cate_name','cate_pid','cate_id');
}
public function getTree($data,'$file_pid=‘pid’,$file_id=‘’,$pid=0){
$arr = array();
foreach($data as $key =>$value){
if($value->$file_pid==$pid){
$data[$key]["_cate_name"]=$data[$key]["cate_name"];
$arr[] = $data[$key];
foreach($data as $k=>$v{
if($value->$file_pid==$v->$file_id){
//新定义个字段把分类的下级定义出来
$data[$k]["_cata_name"]='-->'.$data[$k]["cate_name"]
$arr[]=$data[$v];
}
}
}
}

控制器裡的修改:

public function index(){
// $data= CategroyModel::Tree();   不是静态方法不能用静态方法调用   调用静态方法
$data =(new CategroyModel)->Tree();   调用不是静态方法
return view('home/categroy/index')->with('data',$data);
}

二、後台文章分類頁Ajax異步修改分類排序

1)看主模板裡是否引入jquery

2)寫JS

$(function(){});

寫jquery的基本格式

$(function(){
alert();
});

3)要用JS發送非同步

因為我要操作這個input表單時發送事件,

<input type="text" onchange="onchangeOrder()" value="{{$v->cate_order}}">  //加一个事件onchange,请求方法onchangeOrder方法

4)(2)是測試的,

function onangeOrder(){
alert();
}

5)接下來發送非同步請求了

function onchangeOrder(){
$.post("",{});//第一个url,第二个参数,第三个是回调函数function($data){}回调函数里我们用$data接收
}

6)分配位址

function onchangeOrder(){
$.post("{{url(&#39;admin/cate/changeorder&#39;)}}",{},function($data){});
}

7)分配路由

Route::post(&#39;admin/changeorder&#39;,&#39;CategoryController@changeorder&#39;);

8)新建控制器CategoryController.php

public function changeorder(){
      echo 123;
   }

9)把token值傳給後台

function onchangeOrder(){
$.post("{{url(&#39;admin/cate/changeorder&#39;)}}",{&#39;_token&#39;:&#39;{{csrf_token()}}&#39;},function($data){});
}

10)再傳幾個參數過去,第一個參數是_token參數,第二個參數是修改哪個參數的訊息,第三個參數就是把這個分類訊息改成多少

修改哪個條的資訊

<input type="text" onchange="onchangeOrder({{$v->cate_id}})" value="{{$v->cate_order}}">

這個分類資訊改成多少

<input type="text" onchange="onchangeOrder(this,{{$v->cate_id}})" value="{{$v->cate_order}}"> //能找到当前输入的值到底多少

11)下面的接受參數,第一個就是物件,第二個就是cate_id

function onchangeOrder(obj,cate_id){
$.post("{{url(&#39;home/cate/changeorder&#39;)}}",{&#39;_token&#39;:&#39;{{csrf_token()}}&#39;},function($data){});
}

12)透過obj讀取咱們目前輸入的值到底是多少

那麼咱們定義一個變數,cate_order 等於$()然後把obj傳進去,然後它的. val()

function onchangeOrder(obj,cate_id){
var cate_order=$(obj).val();
$.post("{{url(&#39;home/cate/changeorder&#39;)}}",{&#39;_token&#39;:&#39;{{csrf_token()}}&#39;},function($data){});
}

還有cate_id就是咱們傳過來的參數就不用處理了

13)下面卻幾個參數處理一下

function onchangeOrder(obj,cate_id){
var cate_order=$(obj).val();
$.post("{{url(&#39;home/cate/changeorder&#39;)}}",{&#39;_token&#39;:&#39;{{csrf_token()}}&#39;,&#39;cate_id&#39;:cate_id,&#39;cate_order&#39;:cate_order},function($data){});
}

14)傳給controller後怎麼接受

public function changeorder(){
//用input方法接受前台传过来的值
 $input= Input::all();
print_r( $input);
}

15)然後取資料庫對應cate_id數據,改變對應cate_order的值,然後跟新這條數據

public function changeorder(){
//用input方法接受前台传过来的值
$input= Input::all();
    $cate=CategroyModel::find($input[&#39;cate_id&#39;]);
      //然后改变order参数
   $cate->cate_order=$input[&#39;cate_order&#39;];
    //更新数据库
    $res = $cate->update();
}

16)更新時,給前台一個提示,這是我們給一個$data[]傳給前台​​

public function changeorder(){
//用input方法接受前台传过来的值
$input= Input::all();
$cate=CategroyModel::find($input[&#39;cate_id&#39;]);
//然后改变order参数
$cate->cate_order=$input[&#39;cate_order&#39;];
//执行更新操作
$res=$cate->update();
 if($res){
        $data=[
            &#39;status&#39;=> 0,
            &#39;msg&#39;=>&#39;更新成功!&#39;,
        ];
    }else{
        $data=[
            &#39;status&#39;=> 1,
            &#39;msg&#39;=>&#39;更新失败!&#39;,
        ];
    }
   return $data;   //别忘了返回值
}

17)獲取回調函數的值

function onchangeOrder(obj,cate_id){
var cate_order=$(obj).val();
$.post(
"{{url(&#39;home/cate/changeorder&#39;)}}",
{&#39;_token&#39;:&#39;{{csrf_token()}}&#39;,&#39;cate_id&#39;:cate_id,&#39;cate_order&#39;:cate_order},
function(data){
alert(data.msg);
}
);
}

現在整體完成,但是彈窗太醜,下節給大家分享彈窗安裝信息。

以上步驟是我學習的筆記,我把要操作的步驟或重點的記了下來,如果哪有不懂可以留言。謝謝大家支持。希望能為小白提供幫助,如果想看更多blog項目信息,請關注我,下一篇繼續分享。

相關推薦:《laravel教學

以上是【laravel】blog專案實戰筆記-後台多層分類清單建立及Ajax非同步修改分類排序的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn