小编给大家分享一下基于Laravel+Vue组件实现文章发布、编辑和浏览功能的示例，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联成立于2013年，是专业互联网技术服务公司，拥有项目成都做网站、成都网站制作、成都外贸网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元龙马潭做网站,已为上家服务,为龙马潭各地企业和个人服务,联系电话:18982081108
我们将基于 Laravel 提供后端接口，基于 Vue.js 作为前端 JavaScript 组件开发框架，基于 Bootstrap 作为 CSS 框架。
首先，我们基于上篇教程创建的资源控制器 PostController 快速编写后端增删改查接口实现代码：
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' => '发布新文章']);
}
/**
* 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' => '文章发布成功'];
}
return ['success' => false, 'message' => '保存文章数据失败'];
}
/**
* 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' => '更新文章数据失败！'];
}
/**
* 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' => '删除文章失败'];
}
/**
* 获取所有文章数据
*
* @return Collection
*/
public function all()
{
return Post::orderByDesc('created_at')->get();
}
/**
* 获取单个文章数据
*
* @param Post $post
* @return Post
*/
public function data(Post $post)
{
$post->author_name = $post->author->name;
return $post;
}
}除了 Laravel 资源控制器自带的方法之外，我们额外提供了 all 和 data 两个方法，分别用于在 Vue 组件中通过 AJAX 请求获取文章列表数据和文章详情数据。因此，需要在路由文件 routes/web.php 中注册资源路由之前添加这两个方法对应的路由：
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 路由提供的隐式模型绑定功能快速获取模型实例。此外，相应的视图模板路径也做了调整，我们马上会介绍这些视图模板文件。
如果你在上篇教程填充的测试数据基础上新增过其他数据，可以运行 php artisan migrate:refresh 命令重建数据表快速清空已有数据并重新填充。
如果你不想查看返回实例数据格式的细节，可以在自带填充器 database/seeders/DatabaseSeeder.php 中定义填充代码：
create(); Post::factory(10)->create(); } }
然后运行 php artisan migrate:refresh --seed 命令即可一步到位完成数据表重建、测试数据清空和重新填充：
cdn.xueyuanjun.com/storage/uploads/images/gallery/2020-10/16036945542122.jpg">
由于我们使用的是 Laravel 提供的 laravel/ui 扩展包提供的 Bootstrap 和 Vue 前端脚手架代码，该扩展包还提供了用户认证相关脚手架代码实现，并且提供了一个视图模板布局文件 resources/views/layouts/app.blade.php，我们将通过模板继承基于这个布局文件来重构文章列表、表单、详情页相关视图模板文件，让整体 UI 统一。
我们前面在 PostController 中，为所有 GET 路由渲染的视图文件传递了 pageTitle 值作为不同页面的标题，要实现该功能，需要修改 resources/views/layouts/app.blade.php 布局文件中 title 标签对应的标签文本值：
{{ $pageTitle ?? config('app.name', 'Laravel') }}
接下来，将原来的文章相关视图文件都移动到 resources/views/posts 目录下，改写文章列表视图文件模板代码如下（将原来的 posts.blade.php 重命名为 index.blade.php）：
@extends('layouts.app')
@section('content')
将原来的 form.blade.php 重命名为 create.blade.php，并编写文章发布表单页面视图文件模板代码如下：
@extends('layouts.app')
@section('content')
@endsection 由于文章发布和编辑表单共用一个 Vue 表单组件，所以我们这里额外传递了一些 props 属性到组件模板，包括表单标题（title）、操作类型（action）、表单提交 URL（url），后面马上会介绍表单组件的调整。
在 resources/views/posts 目录下新建一个 edit.blade.php 作为文件编辑页面视图文件，并编写模板代码如下：
@extends('layouts.app')
@section('content')
$id]) }}">
@endsection 同样也使用 post-form 模板渲染文章编辑表单，只不过额外传递了一个 id 属性，用于在表单组件初始化待编辑的文章数据。
文章详情页视图后面单独介绍。
为了适配文章编辑表单，以及后端接口返回数据格式的调整，我们需要修改 Vue 表单组件实现代码：
