項(xiàng)目演示
drag.gif
準(zhǔn)備工作
- 新建laravel項(xiàng)目
laravel new drag
composer install
npm install
2.安裝Vue.Draggabel
npm install vuedraggable
數(shù)據(jù)準(zhǔn)備
- 建立
series
php artisan make:model Series -m -c -r
-m:生成
migration文件
-c生成controller
-r 生成個(gè)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建立關(guān)系
public function parts()
{
return $this->hasMany(Part::class)->orderBy('sort_order','asc');
}
使用Seeder填充數(shù)據(jù)
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
]);
}
使用編寫前臺(tái)代碼并且使用Vue.Draggable
<div class="panel panel-default">
<div class="panel-heading">Editing <em>{{title}}</em></div>
<div class="panel-body">
<div class="alert alert-success" v-if="message">
{{message}}
</div>
<form action="#" @submit.prevent="submit">
<div class="form-group" v-bind:class="{'has-error':errors.title}">
<label for="title" class="control-label">Title</label>
<input type="text" name="title" id="title" class="form-control" v-model="title" >
<div class="help-block" v-if="errors.title">
{{errors.title[0]}}
</div>
</div>
<draggable :list="parts" :options="{'handle':'.panel-heading'}" @start="drag=true" @end="drag=false " @change="update">
<div class="panel panel-default" v-for="part,index in parts">
<div class="panel-heading">Part {{index + 1}}({{part.sort_order}})</div>
<div class="panel-body">
<div class="form-group" v-bind:class="{'has-error':errors['parts.'+index+'.title']}">
<label>Part Title</label>
<input type="text" name="" id="" class="form-control" v-model="part.title">
<div class="help-block" v-if="errors['parts.'+index+'.title']">
{{errors['parts.'+index+'.title'][0]}}
</div>
</div>
</div>
</div>
</draggable>
<div class="form-group">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
<script>
import draggable from 'vuedraggable';
export default {
components:{
draggable
},
data(){
return {
title: null,
parts: [],
errors:[],
message:null
}
},
props: [
'data'
],
mounted() {
this.title = this.data.title;
this.parts = this.data.parts;
},
methods:{
update(e){
this.parts.map((part,index)=>{
part.sort_order = index + 1
})
},
submit(){
axios.patch('/series/'+this.data.id,{
title:this.title,
parts:this.parts
}).then((response)=>{
this.message="Series saved!"
}).catch((error)=>{
this.errors=error.response.data
})
}
}
}
</script>
后端代碼編寫
1.路由文件web.php
Route::get('/series/{series}/edit','SeriesController@edit');
Route::patch('/series/{series}','SeriesController@update');
2.生成數(shù)據(jù)驗(yàn)證
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.創(chuàng)建隊(duì)列任務(wù)
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']));
});
}
開啟隊(duì)列監(jiān)聽
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實(shí)現(xiàn)拖動(dòng),axios發(fā)送請(qǐng)求(laravel5.4現(xiàn)在默認(rèn)就是axios)后端使用Laravel冀值，包括數(shù)據(jù)填充,數(shù)據(jù)驗(yàn)證,建立模型,隊(duì)列等效知識(shí)點(diǎn)，希望有助于大家今后用laravel和vue做開發(fā)
