Maison > cadre php > Laravel > le corps du texte

Notes pratiques du projet de blog [laravel] - création de listes de classification multi-niveaux en arrière-plan et modification asynchrone Ajax du tri de classification

演明
Libérer: 2021-09-09 16:54:02
original
1134 Les gens l'ont consulté

Je veux toujours faire un petit projet par moi-même, mais je ne sais pas par où commencer. Je fais toujours une certaine partie du projet quand je vais travailler, et je ne fais pas un projet dans son ensemble. sont les notes que j'ai compilées après avoir regardé la vidéo sur le site Web chinois php, pour votre référence. Il s'agit d'un projet de blog pratique réalisé dans un environnement Windows. Les articles suivants font partie du projet. Je les ai partagés section par section. Si vous voulez en voir plus, suivez-moi et je continuerai à mettre à jour.

1. Liste de classification à plusieurs niveaux sur la page de classification de l'article d'arrière-plan

1) Ajoutez une classification à plusieurs niveaux. Notez que cate_pid et cate_id sont les mêmes pour prouver dans quelle catégorie il se trouve

2) Ajoutez une méthode pour. traiter la classification

public function getTree(){
}
Copier après la connexion

3) Ci-dessus Ajustez la méthode suivante dans la méthode

$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);
}
Copier après la connexion

4) Imprimez ci-dessous pour voir si les paramètres ci-dessus sont transmis

public function getTree($data){
dd($data);
}
Copier après la connexion

5) Filtrez d'abord ceux dont cate_pid est 0, puis faites un nouveau cycle pour filtrer ceux dont cate_pid et cate_id sont égaux. Afin de laisser La méthode est plus puissante, nous avons pensé à utiliser la méthode de passage de paramètres,

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];
}
       }
      }
   }
Copier après la connexion

Meilleure optimisation du code :

Mettre le processus d'organisation des données dans le contrôleur dans le modèle

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];
}
}
}
}
Copier après la connexion

Modifications dans le contrôleur :

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

2. Ajax modifie de manière asynchrone le tri de classification de la page de catégorie d'article d'arrière-plan

1) Vérifiez si jquery est introduit dans le modèle principal

2) Écrivez JS

$(function(){});
Copier après la connexion

Écrivez le format de base de jquery

$(function(){
alert();
});
Copier après la connexion

3) Utilisez JS pour envoyer de manière asynchrone

parce que je veux. Les événements sont envoyés lors de l'utilisation de ce formulaire de saisie,

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

4) (2) est destiné aux tests,

function onangeOrder(){
alert();
}
Copier après la connexion

5) Suivant , une requête asynchrone est envoyée

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

6) Allocation d'adresse

function onchangeOrder(){
$.post("{{url(&#39;admin/cate/changeorder&#39;)}}",{},function($data){});
}
Copier après la connexion

7) Allocation de route

Route::post(&#39;admin/changeorder&#39;,&#39;CategoryController@changeorder&#39;);
Copier après la connexion

8) Créer un nouveau contrôleur CategoryController.php

public function changeorder(){
      echo 123;
   }
Copier après la connexion

9) Passer la valeur du jeton en arrière-plan

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

10) Passer quelques paramètres supplémentaires. Le premier paramètre est le paramètre _token, et le deuxième paramètre est l'information sur le paramètre à modifier. Les trois paramètres indiquent dans quelle mesure modifier ces informations de classification

Quelle information modifier

<input type="text" onchange="onchangeOrder({{$v->cate_id}})" value="{{$v->cate_order}}">
Copier après la connexion

Combien. pour changer ces informations de classification en

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

11) Les paramètres d'acceptation suivants, le premier est l'objet, le second est cate_id

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

12) Lisez la valeur que nous saisissons actuellement via obj

Ensuite, nous définissons une variable, cate_order est égal à $() puis transmettez obj, puis ses .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){});
}
Copier après la connexion

et cate_id sont ce que nous transmettons. Il n'est pas nécessaire de traiter les paramètres transmis

13) Voici quelques paramètres à traiter

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){});
}
Copier après la connexion

14) Comment l'accepter après l'avoir transmis au contrôleur

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

15) Ensuite, récupérez les données cate_id correspondantes de la base de données, modifiez la valeur du cate_order correspondant, puis suivez le nouveau Quand ces données

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();
}
Copier après la connexion

16) est mis à jour, une invite est donnée à la réception. C'est à ce moment-là que nous transmettons un $data[] à la réception

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;   //别忘了返回值
}
Copier après la connexion

17) Obtenez la valeur de la fonction de rappel

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);
}
);
}
Copier après la connexion

Maintenant, tout est terminé, mais le La fenêtre pop-up est trop moche, la section suivante partagera avec vous les informations d'installation du pop-up.

Les étapes ci-dessus sont mes notes d'étude. J'ai noté les étapes ou les points clés à opérer. Si vous ne comprenez rien, vous pouvez laisser un message. Merci pour votre soutien. J'espère que cela pourra aider Xiaobai. Si vous souhaitez voir plus d'informations sur le projet de blog, suivez-moi et je continuerai à partager dans le prochain article.

Recommandations associées : "tutoriel laravel"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!