小編給大家分享一下基于Laravel+Vue組件實(shí)現(xiàn)文章發(fā)布、編輯和瀏覽功能的示例，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元龍馬潭做網(wǎng)站,已為上家服務(wù),為龍馬潭各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108
我們將基于 Laravel 提供后端接口，基于 Vue.js 作為前端 JavaScript 組件開發(fā)框架，基于 Bootstrap 作為 CSS 框架。
首先，我們基于上篇教程創(chuàng)建的資源控制器 PostController 快速編寫后端增刪改查接口實(shí)現(xiàn)代碼：
重慶分公司
重慶分公司
middleware('auth')->except('index', 'all', 'show', 'data');
}
/**
* Display a listing of the resource.
*
* @return Application|Factory|View|Response|\Illuminate\View\View
*/
public function index()
{
return view('posts.index', ['pageTitle' => '文章列表頁']);
}
/**
* Show the form for creating a new resource.
*
* @return Application|Factory|View|Response|\Illuminate\View\View
*/
public function create()
{
return view('posts.create', ['pageTitle' => '發(fā)布新文章']);
}
/**
* Store a newly created resource in storage.
*
* @param Request $request
* @return array
*/
public function store(Request $request)
{
$data = $request->validate([
'title' => 'required|max:128',
'content' => 'required'
]);
$post = new Post($data);
$post->status = 1;
$post->user_id = Auth::user()->id;
if ($post->save()) {
return ['success' => true, 'message' => '文章發(fā)布成功'];
}
return ['success' => false, 'message' => '保存文章數(shù)據(jù)失敗'];
}
/**
* Display the specified resource.
*
* @param Post $post
* @return Application|Factory|View|Response|\Illuminate\View\View
*/
public function show(Post $post)
{
return view('posts.show', ['id' => $post->id, 'pageTitle' => $post->title]);
}
/**
* Show the form for editing the specified resource.
*
* @param Post $post
* @return Application|Factory|View|Response|\Illuminate\View\View
*/
public function edit(Post $post)
{
return view('posts.edit', ['pageTitle' => '編輯文章', 'id' => $post->id]);
}
/**
* Update the specified resource in storage.
*
* @param Request $request
* @param Post $post
* @return array
*/
public function update(Request $request, Post $post)
{
$data = $request->validate([
'title' => 'required|max:128',
'content' => 'required'
]);
$post->fill($data);
$post->status = 1;
if ($post->save()) {
return ['success' => true, 'message' => '文章更新成功'];
}
return ['success' => false, 'message' => '更新文章數(shù)據(jù)失?。?#39;];
}
/**
* Remove the specified resource from storage.
*
* @param Post $post
* @return array
* @throws Exception
*/
public function destroy(Post $post)
{
if ($post->delete()) {
return ['success' => true, 'message' => '文章刪除成功'];
}
return ['success' => false, 'message' => '刪除文章失敗'];
}
/**
* 獲取所有文章數(shù)據(jù)
*
* @return Collection
*/
public function all()
{
return Post::orderByDesc('created_at')->get();
}
/**
* 獲取單個(gè)文章數(shù)據(jù)
*
* @param Post $post
* @return Post
*/
public function data(Post $post)
{
$post->author_name = $post->author->name;
return $post;
}
}除了 Laravel 資源控制器自帶的方法之外，我們額外提供了 all 和 data 兩個(gè)方法，分別用于在 Vue 組件中通過 AJAX 請(qǐng)求獲取文章列表數(shù)據(jù)和文章詳情數(shù)據(jù)。因此，需要在路由文件 routes/web.php 中注冊(cè)資源路由之前添加這兩個(gè)方法對(duì)應(yīng)的路由：
use App\Http\Controllers\PostController;
Route::get('posts/all', [PostController::class, 'all']);
Route::get('posts/{post}/data', [PostController::class, 'data']);
Route::resource('posts', PostController::class);注意這里我們使用了 Laravel 路由提供的隱式模型綁定功能快速獲取模型實(shí)例。此外，相應(yīng)的視圖模板路徑也做了調(diào)整，我們馬上會(huì)介紹這些視圖模板文件。
如果你在上篇教程填充的測(cè)試數(shù)據(jù)基礎(chǔ)上新增過其他數(shù)據(jù)，可以運(yùn)行 php artisan migrate:refresh 命令重建數(shù)據(jù)表快速清空已有數(shù)據(jù)并重新填充。
如果你不想查看返回實(shí)例數(shù)據(jù)格式的細(xì)節(jié)，可以在自帶填充器 database/seeders/DatabaseSeeder.php 中定義填充代碼：
create(); Post::factory(10)->create(); } }
然后運(yùn)行 php artisan migrate:refresh --seed 命令即可一步到位完成數(shù)據(jù)表重建、測(cè)試數(shù)據(jù)清空和重新填充：
cdn.xueyuanjun.com/storage/uploads/images/gallery/2020-10/16036945542122.jpg">
由于我們使用的是 Laravel 提供的 laravel/ui 擴(kuò)展包提供的 Bootstrap 和 Vue 前端腳手架代碼，該擴(kuò)展包還提供了用戶認(rèn)證相關(guān)腳手架代碼實(shí)現(xiàn)，并且提供了一個(gè)視圖模板布局文件 resources/views/layouts/app.blade.php，我們將通過模板繼承基于這個(gè)布局文件來重構(gòu)文章列表、表單、詳情頁相關(guān)視圖模板文件，讓整體 UI 統(tǒng)一。
我們前面在 PostController 中，為所有 GET 路由渲染的視圖文件傳遞了 pageTitle 值作為不同頁面的標(biāo)題，要實(shí)現(xiàn)該功能，需要修改 resources/views/layouts/app.blade.php 布局文件中 title 標(biāo)簽對(duì)應(yīng)的標(biāo)簽文本值：
{{ $pageTitle ?? config('app.name', 'Laravel') }}
接下來，將原來的文章相關(guān)視圖文件都移動(dòng)到 resources/views/posts 目錄下，改寫文章列表視圖文件模板代碼如下（將原來的 posts.blade.php 重命名為 index.blade.php）：
@extends('layouts.app')
@section('content')
將原來的 form.blade.php 重命名為 create.blade.php，并編寫文章發(fā)布表單頁面視圖文件模板代碼如下：
@extends('layouts.app')
@section('content')
@endsection 由于文章發(fā)布和編輯表單共用一個(gè) Vue 表單組件，所以我們這里額外傳遞了一些 props 屬性到組件模板，包括表單標(biāo)題（title）、操作類型（action）、表單提交 URL（url），后面馬上會(huì)介紹表單組件的調(diào)整。
在 resources/views/posts 目錄下新建一個(gè) edit.blade.php 作為文件編輯頁面視圖文件，并編寫模板代碼如下：
@extends('layouts.app')
@section('content')
$id]) }}">
@endsection 同樣也使用 post-form 模板渲染文章編輯表單，只不過額外傳遞了一個(gè) id 屬性，用于在表單組件初始化待編輯的文章數(shù)據(jù)。
文章詳情頁視圖后面單獨(dú)介紹。
為了適配文章編輯表單，以及后端接口返回?cái)?shù)據(jù)格式的調(diào)整，我們需要修改 Vue 表單組件實(shí)現(xiàn)代碼：
