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

演明
リリース: 2021-09-09 16:54:02
オリジナル
1032 人が閲覧しました

「小さなプロジェクトを一人でやってみたいと思っているのですが、どうやって始めればいいのかわかりません。仕事に行くときはいつもプロジェクトの特定の部分だけをやっていて、プロジェクト全体をやることはありません」 . 以下は、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) この入力フォームの操作時にイベントを送信したいので、

#

 //加一个事件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 番目のパラメータは分類情報です。変更量

どの情報を変更するか

ログイン後にコピー

どのくらい変更するかこの分類情報を

 //能找到当前输入的值到底多少
ログイン後にコピー

に変更します。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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!