使用Vue.Draggable和laravel实现拖动改变顺序

项目演示

drag.gif

准备工作

1. 新建laravel项目

laravel new drag
composer install
npm install 

2.安装Vue.Draggabel

npm install vuedraggable 

数据准备

• 建立series

php artisan make:model Series -m  -c -r

-m:生成migration文件
-c生成controller
-r 生成个resource controller

migration文件

Schema::create('series', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->timestamps();
        });

• 建立parts

php artisan make:model Parts -m 

migration文件

 Schema::create('parts', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('series_id')->unsigned();
            $table->string('title');
            $table->integer('sort_order');
            $table->timestamps();
        });

Series.php建立关系

public function parts()
    {
        return $this->hasMany(Part::class)->orderBy('sort_order','asc');
    }

使用Seeder填充数据

php artisan make:seeder SeriesTableSeeder
php artisan make:seeder PartsTableSeeder

SeriesTableSeeder.php

 $faker = Faker::create();
 Series::create([
     'title'=>$faker->text(10)
 ]);

PartsTableSeeder.php

$faker = Faker::create();
        for($i=1;$i<5;$i++){
            \App\Part::create([
                'title'=>'Task'.$i,
                'series_id'=>1,
                'sort_order'=>$i
            ]);
        }

使用编写前台代码并且使用Vue.Draggable

                    
Editing {{title}}
                    
                    

                        

                            {{message}}
                        
                        

                            

                                Title
                                
                                

                                    {{errors.title[0]}}
                                
                            
                            
                            

                                
Part {{index + 1}}({{part.sort_order}})
                                

                                    

                                        Part Title
                                        
                                        

                                            {{errors['parts.'+index+'.title'][0]}}
                                        
                                    
                                
                            
                            
                            

                                Save
                            
                        
                    
                

后端代码编写

1.路由文件web.php

Route::get('/series/{series}/edit','SeriesController@edit');
Route::patch('/series/{series}','SeriesController@update');

2.生成数据验证

php artisan make:request UpdateSeriesFormRequest

 public function rules()
    {
        return [
            'title' => 'required',
            'parts.*.title' => 'required'
        ];
    }
    public function messages()
    {
        return [
            'title.required' => 'You must enter a series title',
            'parts.*.title.required'=> 'You need to give this part a title'
        ];
    }

3.创建队列任务

php artisan queue:table
php artisan queue:failed-table
php artisan make:job UpdateSeriesParts

 public function __construct(Series $series,$parts)
    {
        //
        $this->series = $series;
        $this->parts = $parts;
    }
public function handle()
    {
        $this->series->parts->each(function ($part,$index) {
            $part->update(array_only($this->parts[$index],['title','sort_order']));
        });
    }

开启队列监听

php artisan queue:listen 

4.Controller文件

public function edit(Series $series)
    {
        $series->load('parts');
        return view('series.edit',compact('series'));
    }
public function update(UpdateSeriesFormRequest $request, Series $series)
    {
        
        $series->title=$request->title;
        $series->save();
        dispatch(new UpdateSeriesParts($series,$request->parts));
        return response(null,200);
    }

这是codecourse上的Demo,使用了Vue作为前端,Vue.draggable实现拖动,axios发送请求(laravel5.4现在默认就是axios)后端使用Laravel，包括数据填充,数据验证,建立模型,队列等效知识点，希望有助于大家今后用laravel和vue做开发