【laravel】ブログプロジェクト実践記 - バックグラウンドでの多段階分類リスト作成と分類ソートのAjax非同期修正

「小さなプロジェクトを一人でやってみたいと思っているのですが、どうやって始めればいいのかわかりません。仕事に行くときはいつもプロジェクトの特定の部分だけをやっていて、プロジェクト全体をやることはありません」 . 以下は、PHP中国語サイトNotesで視聴した動画をまとめたものですので、ご参考までに。これは、Windows 環境で実行される実践的なブログ プロジェクトです。次の記事はプロジェクトの一部です。セクションごとに共有しました。さらに詳しく知りたい場合は、フォローしてください。更新を続けます。

1. 背景記事分類ページのマルチレベル分類リスト

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);
}

2. 背景記事分類ページでの Ajax 非同期 分類ソートの変更

1) メインテンプレートに jquery が導入されているか確認

2) JS

$(function(){});

# を記述する##jqueryの基本的な書き方

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

3) この入力フォームの操作時にイベントを送信したいので、

#

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

というJSを使って非同期送信する必要があります。 4) (2) はテスト用です。

function onangeOrder（）{
alert();
}

5) 次の非同期リクエストが送信されます

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

6) アドレスの割り当て

function onchangeOrder（）{
$.post("{{url('admin/cate/changeorder')}}",{},function($data){});
}

7) ルートの割り当て

Route::post('admin/changeorder','CategoryController@changeorder');

8) 新しいコントローラーを作成します categoryController.php

public function changeorder(){
      echo 123;
   }

9) Put トークン値がバックグラウンドに渡されます

function onchangeOrder（）{
$.post("{{url('admin/cate/changeorder')}}",{'_token':'{{csrf_token()}}'},function($data){});
}

10) さらにいくつかのパラメーターを渡します。 _token パラメータ、2 番目のパラメータは変更するパラメータに関する情報、3 番目のパラメータは分類情報です。変更量

どの情報を変更するか

<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) 以下はパラメータを受け入れます。最初のパラメータはオブジェクト、2 番目のパラメータは cate_id

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

です。12) 現在入力している値を読み取ります。 obj

次に、変数を定義し、cate_order が $() に等しいので、obj を渡し、次にその値を渡します。val()

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

そして、cate_id は渡したパラメータです。処理する必要はありません

13) 処理するパラメータがいくつかあります

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

14) それをコントローラーに渡します後で受け入れる方法

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['cate_id']);
      //然后改变order参数
   $cate->cate_order=$input['cate_order'];
    //更新数据库
    $res = $cate->update();
}

16) 更新するときは、フロント デスクにプロンプ​​トを出します。これは $data[] を渡します。フロントデスクへ

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

17) コールバック関数の値を取得

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

これですべてが完了しましたが、ポップアップウィンドウがあまりにも醜いです。ポップアップウィンドウ設置情報をみんなで。

上記の手順は私の勉強メモです。手順や操作のポイントを書き留めました。わからないことがあればメッセージを残していただけます。ご協力ありがとうございます。 Xiaobai のお役に立てれば幸いです。ブログ プロジェクトの情報をもっと見たい場合は、私をフォローしてください。次の記事で引き続き共有します。

関連する推奨事項:「

laravel チュートリアル

」

以上が【laravel】ブログプロジェクト実践記 - バックグラウンドでの多段階分類リスト作成と分類ソートのAjax非同期修正の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。