[laravel] 블로그 프로젝트 실용 노트 - 배경 다단계 분류 목록 생성 및 분류 정렬의 Ajax 비동기 수정

演明
풀어 주다: 2021-09-09 16:54:02
원래의
1071명이 탐색했습니다.

저는 항상 혼자서 작은 프로젝트를 하고 싶은데 어떻게 시작해야 할지 모르겠어요. 출근할 때면 항상 프로젝트의 특정 부분만 하고, 여기서는 프로젝트 전체를 하지 않아요. 참고용으로 PHP 중국어 웹사이트에서 비디오를 보고 편집한 메모입니다. 이 글은 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) JS를 사용하여 비동기적으로 전송합니다

이 입력 폼을 조작할 때 이벤트가 전송됩니다.

<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) 토큰 값을 배경에 전달

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

10) 통과 몇 가지 매개변수가 더 필요합니다. 첫 번째 매개변수는 _token 매개변수이고, 두 번째 매개변수는 어떤 매개변수를 수정할 것인지에 대한 정보입니다. 3개의 매개변수는 이 분류 정보를 얼마만큼 수정할 것인지입니다. 이 분류 정보를

<input type="text" onchange="onchangeOrder({{$v->cate_id}})" value="{{$v->cate_order}}">
로그인 후 복사

11) 다음 승인 매개변수로 첫 번째는 객체, 두 번째는 cate_id

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

12) 현재 obj를 통해 입력 중인 값을 읽어옵니다

그런 다음 변수를 정의합니다. cate_order는 $()와 같고 obj를 전달한 다음 해당 .val()

function onchangeOrder(obj,cate_id){
$.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;},function($data){});
}
로그인 후 복사

14) 컨트롤러에 전달한 후 이를 수락하는 방법

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){});
}
로그인 후 복사

15) 그런 다음 데이터베이스에서 해당 cate_id 데이터를 가져오고 해당 cate_order의 값을 변경한 다음 새 데이터를 따릅니다.

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

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();
}
로그인 후 복사

17) 콜백 함수의 값을 가져옵니다

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;   //别忘了返回值
}
로그인 후 복사

이제 모든 것이 완료되었지만 팝업 창이 너무 보기 흉한 경우 다음 섹션에서 팝업 설치 정보를 공유하겠습니다.

위 단계는 제가 진행해야 할 단계나 핵심 사항을 적어둔 학습 노트입니다. 이해가 안 되는 부분이 있으면 메시지를 남겨주세요. 귀하의 지원에 감사드립니다. Xiaobai에 도움이 되기를 바랍니다. 더 많은 블로그 프로젝트 정보를 보고 싶으시다면 저를 팔로우해 주세요. 다음 글에서 계속 공유하겠습니다.

관련 추천: "

laravel 튜토리얼

"

위 내용은 [laravel] 블로그 프로젝트 실용 노트 - 배경 다단계 분류 목록 생성 및 분류 정렬의 Ajax 비동기 수정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!