教你基於Laravel+Vue元件實現文章發布、編輯和瀏覽功能
- 藏色散人轉載
- 2020-11-13 14:08:502844瀏覽
下面由Laravel教學欄位介紹基於Laravel Vue元件實作文章發佈、編輯和瀏覽功能，希望對需要的朋友有所幫助！
我們將基於 Laravel 提供後端接口，基於 Vue.js 作為前端 JavaScript 元件開發框架，基於 Bootstrap 作為 CSS 框架。
Laravel 後端介面
首先，我們基於上篇教學所建立的資源控制器PostController 快速編寫後端增刪改查介面實作程式碼：
<?php namespace App\Http\Controllers;
use App\Models\Post;
use Exception;
use Illuminate\Contracts\Foundation\Application;
use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Auth;
class PostController extends Controller
{
public function __construct()
{
$this->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 中定義填充程式碼：
<?php namespace Database\Seeders;
use App\Models\Post;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
// \App\Models\User::factory(10)->create();
Post::factory(10)->create();
}
}
然後執行php artisan migrate:refresh --seed 指令即可一步到位完成資料表重建、測試資料清空與重新填入：
laravel/ui 擴充包提供的Bootstrap 和Vue 前端鷹架程式碼，該擴充包還提供了用戶認證相關腳手架程式碼實現，並且提供了一個視圖模板佈局文件resources/views/layouts/app.blade.php，我們將透過模板繼承基於這個佈局文件來重構文章列表、表單、詳情頁相關視圖範本文件，讓整體UI 統一。
PostController 中，為所有GET 路由渲染的視圖檔案傳遞了pageTitle 值作為不同頁面的標題，要實現該功能，需要修改resources/views/layouts/app.blade.php 版面配置檔案中title 標籤對應的標籤文字值：
<title>{{ $pageTitle ?? config('app.name', 'Laravel') }}</title>文章清單檢視接下來，將原來的文章相關檢視檔案都移到resources/views/posts 目錄下，改寫文章清單檢視檔案範本程式碼如下（將原來的posts.blade.php 重新命名為index.blade.php）：
@extends('layouts.app')
@section('content')
<p>
<post-list></post-list>
</p>
@endsection文章發佈視圖將原來的form. blade.php 重新命名為create.blade.php，並撰寫文章發佈表單頁面視圖檔案範本程式碼如下：
@extends('layouts.app')
@section('content')
<p>
</p><p>
<post-form>
</post-form>
</p>
@endsection由於文章發佈和編輯表單共用一個Vue 表單元件，所以我們這裡額外傳遞了一些props 屬性到元件模板，包括表單標題（title）、操作類型（action）、表單提交URL（url），後面馬上會介紹表單組件的調整。
resources/views/posts 目錄下新建一個edit.blade.php 作為文件編輯頁面視圖文件，並編寫範本程式碼如下：
@extends('layouts.app')
@section('content')
<p>
</p><p>
<post-form> $id]) }}">
</post-form>
</p>
@endsection同樣也使用post-form 範本渲染文章編輯表單，只不過額外傳遞了一個id 屬性，用於在表單元件初始化待編輯的文章數據。
<template>
<formsection>
<template>{{ title }}</template>
<template>
<p>
<label></label>
<inputtext></inputtext>
<errormsg></errormsg>
</p>
<p>
<label></label>
<textarea></textarea>
<errormsg></errormsg>
</p>
</template>
<template>
<button>立即发布</button>
</template>
<template>
<toastmsg>
{{ form.message }}
</toastmsg>
</template>
</formsection>
</template>
<script>
import FormSection from './form/FormSection';
import InputText from './form/InputText';
import TextArea from './form/TextArea';
import Button from './form/Button';
import ToastMsg from './form/ToastMsg';
import Label from "./form/Label";
import ErrorMsg from "./form/ErrorMsg";
export default {
components: {FormSection, InputText, TextArea, Label, ErrorMsg, Button, ToastMsg},
props: ['title', 'url', 'action', 'id'],
data() {
return {
form: new Form({
title: '',
content: ''
})
}
},
mounted() {
let post_id = Number(this.id);
if (this.action === 'update' && post_id > 0) {
this.load(post_id);
}
},
methods: {
load(id) {
this.form.title = '加载中...';
this.form.content = '加载中...';
let url = '/posts/' + id + '/data';
axios.get(url).then(resp => {
this.form.title = resp.data.title;
this.form.content = resp.data.content;
}).catch(error => {
alert('从服务端初始化表单数据失败');
});
},
store() {
if (this.action === 'create') {
this.form.post(this.url)
.then(data => {
// 发布成功后跳转到列表页
window.location.href = '/posts';
})
.catch(data => console.log(data)); // 自定义表单提交失败处理逻辑
} else {
this.form.put(this.url)
.then(data => {
// 更新成功后跳转到详情页
window.location.href = '/posts/' + this.id;
})
.catch(data => console.log(data)); // 自定义表单提交失败处理逻辑
}
},
clear(field) {
this.form.errors.clear(field);
}
}
}
</script>文章發佈和編輯頁面需要透過標題來區分，所以我們透過title 屬性從父級作用域傳遞該標題值。
id 屬性值在mounted 鉤子函數中呼叫新增的load 方法從後端介面/posts/{post}/data 載入對應文章資料填入表單。
现在后端接口可以自动获取当前认证用户的 ID，所以 author 字段就没有必要填写了，直接将其移除。
文章创建和编辑对应的请求方式是不一样的，操作成功后处理逻辑也是不一样的（前者重定向到列表页，后者重定向到详情页），所以根据 action 属性值分别进行了处理。
此外，由于后端对表单数据进行验证后，保存数据阶段依然可能失败，所以前端提交表单后返回的响应状态码为 200 并不表示表单提交处理成功，还需要借助响应实体（JSON 格式）中的 success 字段进一步判断，进而通过 ToastMsg 子组件渲染成功或失败的提示文本。
ToastMsg 是从之前的 SuccessMsg 组件升级而来，直接将 SuccessMsg 组件重命名为 ToastMsg 并改写组件代码如下：
<style>
.alert {
margin-top: 10px;
}
</style>
<template>
<p>
<slot></slot>
</p>
</template>
<script>
export default {
props: ['validated', 'success']
}
</script>
可以看到，如果表单提交处理成功（依然基于父级作用域传递的 form.success 属性）则显示成功提示样式及文案，否则显示失败提示样式和文案，而是否渲染该组件取决于表单验证是否成功，该字段基于父级作用域传递的 form.validated 属性，之前是没有这个属性的，所以我们需要额外添加，在 resources/js/form.js 中，调整相关代码实现如下：
class Form {
constructor(data) {
...
this.validated = false;
}
...
/**
* 表单提交处理
*
* @param {string} url
* @param {string} method
*/
submit(url, method) {
return new Promise((resolve, reject) => {
axios[method](url, this.data())
.then(response => {
this.onSuccess(response.data);
this.validated = true;
if (this.success === true) {
resolve(response.data);
} else {
reject(response.data);
}
})
.catch(error => {
this.onFail(error.response.data.errors);
reject(error.response.data);
});
});
}
/**
* 处理表单提交成功
*
* @param {object} data
*/
onSuccess(data) {
this.success = data.success;
this.message = data.message;
this.reset();
}
...
}
这样一来，文章发布和编辑共用的 Vue 表单组件就重构好了。
文章详情页视图和 Vue 组件实现
我们接着来实现文章详情页。
PostDetail 组件
在 component-practice/resources/js/components 目录下新建一个 PostDetail.vue 文件作为渲染文章详情的 Vue 单文件组件，并编写组件代码如下：
<style>
.post-detail {
width: 100%;
}
.post-title {
margin-bottom: .25rem;
font-size: 2.5rem;
}
.post-meta {
margin-bottom: 1.25rem;
color: #999;
}
.post-content {
font-size: 1.1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
}
</style>
<template>
<p>
<span>Loading...</span>
</p>
<p>
</p>
<h2>{{ title }}</h2>
<p>
Created at {{ created_at | diff_for_human }} by <a>{{ author_name }}</a>,
Status: {{ status | post_status_readable }},
Action: <a>编辑</a>
</p>
<p>
{{ content }}
</p>
</template>
<script>
export default {
props: ['post_id'],
data() {
return {
id: this.post_id,
title: '',
content: '',
status: '',
author_name: '',
created_at: '',
loaded: false
}
},
mounted() {
if (!this.loaded) {
this.load(Number(this.id));
}
},
methods: {
load(id) {
axios.get('/posts/' + this.id + '/data').then(resp => {
this.title = resp.data.title;
this.content = resp.data.content;
this.status = resp.data.status;
this.author_name = resp.data.author_name;
this.created_at = resp.data.created_at;
this.loaded = true;
}).catch(err => {
alert('加载文章数据失败');
});
}
}
}
</script>
这个组件功能比较简单，在 mounted 钩子函数中通过父级作用域传递的 id 属性值调用 load 函数加载后端接口返回的文章数据，并通过数据绑定将其渲染到模板代码中，在加载过程中，会有一个动态的加载状态提示用户文章数据正在加载。
这里我们还使用了过滤器对数据进行格式化，日期过滤器已经是全局的了，状态过滤器之前是本地的，这里我们将其从文章列表卡片组件 CardItem 中将其迁移到 app.js 中作为全局过滤器：
Vue.filter('post_status_readable', status => {
switch(status) {
case 0:
return '草稿';
case 1:
return '已发布';
default:
return '未知状态';
}
});
然后就可以在任何 Vue 组件中调用它了（CardItem 中过滤器调用代码做一下相应调整）。
在 app.js 中注册这个组件：
Vue.component('post-detail', require('./components/PostDetail.vue').default);
文章详情页视图文件
再到 component-practice/resources/views/posts 目录下新建 show.blade.php 视图文件引用 post-detail 组件即可：
@extends('layouts.app')
@section('content')
<p>
<post-detail></post-detail>
</p>
@endsection
优化文章列表组件
最后，我们到文章列表组件中新增一个发布文章入口。
打开子组件 ListSection，在视图模式切换按钮右侧新增一个插槽，用于从父级作用域传递更多额外操作按钮：
<style>
.card-header h5 {
margin-top: 0.5em;
display: inline-block;
}
.card-header .float-right {
float: right;
}
</style>
<template>
<p>
</p>
<p>
</p>
<h5><slot></slot></h5>
<p>
<button>
{{ view.switch_to }}
</button>
<slot></slot>
</p>
...</template>
然后在 PostList 中将发布文章按钮放到这个插槽中（样式代码也做了微调）：
<style>
.post-list {
width: 100%;
}
</style>
<template>
<p>
<listsection>
<template>文章列表</template>
<template>
<a>新文章</a>
</template>
<template>
<listitem>
{{ post.title }}
</listitem>
</template>
...</listsection></p></template>
顺便也为文章列表所有文章设置详情页链接，ListItem 链接是从 PostList 通过 props 属性传递的，CardItem 需要去子组件中设置：
<a><slot></slot></a>
至此，我们就完成了文章列表、发布、编辑和详情页的所有前后端功能代码编写。
整体测试
如果你已经在本地运行了 npm run watch 并且通过 php arstisan serve 启动 PHP 内置 Web 服务器的话，就可以在浏览器通过 http://127.0.0.1:3002/posts （启用了 BrowserSync 代理）访问新的文章列表页了：
点击任意文章链接，即可进入文章详情页，加载数据成功之前，会有如下动态加载效果：
你可以点击「编辑」链接对这篇文章进行编辑：
更新成功后，会跳转到文章详情页，对应字段均已更新，并且状态也从草稿变成了已发布：
當然，文章發佈和編輯功能需要使用者處於已登入狀態（目前未做權限驗證），如果未登入的話，點擊編輯和新文章按鈕會先跳到登入頁面（該功能由PostController 控制器建構函數中定義的中間件方法實作），我們在已登入情況下在文章列表頁點擊右上角的「新文章」按鈕進入文章發佈頁面：
發布成功後，頁面會跳到文章清單頁，並在清單中出現剛剛建立的文章：
增刪改查還剩下一個「刪」，下篇教程，就來給大家演示文章刪除功能實現，為什麼單獨介紹呢，因為我想結合刪除功能演示基於Vue 組件的模態框、對話框以及過渡效果的實現。
以上是教你基於Laravel+Vue元件實現文章發布、編輯和瀏覽功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！