다음 튜토리얼 칼럼은 Laravel에서 Laravel+Vue 컴포넌트를 기반으로 기사 게시, 편집 및 탐색 기능을 구현하는 방법을 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!
Laravel, 프론트엔드 JavaScript 컴포넌트 개발 프레임워크인 Vue.js, CSS 프레임워크인 Bootstrap 기반의 백엔드 인터페이스를 제공할 예정입니다.
우선, 이전 튜토리얼에서 생성한 리소스 컨트롤러 PostController를 기반으로 백엔드 추가, 삭제, 수정, 확인 인터페이스 구현 코드를 빠르게 작성했습니다. 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 提供的 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 属性，用于在表单组件初始化待编辑的文章数据。
文章详情页视图后面单独介绍。
为了适配文章编辑表单，以及后端接口返回数据格式的调整，我们需要修改 Vue 表单组件实现代码：
<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
<style>
.alert {
margin-top: 10px;
}
</style>
<template>
<p>
<slot></slot>
</p>
</template>
<script>
export default {
props: ['validated', 'success']
}
</script>all 및 data라는 두 가지 추가 메소드를 제공합니다. Vue 구성 요소의 AJAX 요청을 통한 데이터. 따라서 라우팅 파일 routes/web.php에 리소스 경로를 등록하기 전에 이 두 가지 방법에 해당하는 경로를 추가해야 합니다. 🎜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();
}
...
}php artisan migration:refresh를 실행하면 됩니다. code > 데이터 테이블을 다시 작성하여 기존 데이터를 빠르게 지우고 다시 채우는 명령입니다. 🎜🎜반환된 인스턴스 데이터 형식의 세부 정보를 보고 싶지 않은 경우 내장 필러 <code>database/seeders/DatabaseSeeder.php에서 채우기 코드를 정의할 수 있습니다. 🎜<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>php artisan grad 실행: 새로 고침 --seed 명령은 데이터 테이블 재구성, 테스트 데이터 지우기 및 다시 채우기를 한 단계로 완료할 수 있습니다: 🎜🎜
🎜🎜
🎜laravel/에서 제공하는 Bootstrap을 사용하고 있으므로 ui 확장 패키지는 Laravel And Vue 프런트엔드 스캐폴딩 코드에서 제공되며, 이 확장 패키지는 사용자 인증 관련 스캐폴딩 코드 구현도 제공하고 뷰 템플릿 레이아웃 파일 resources/views/layouts/app.blade를 제공합니다. php에서는 Inherit 템플릿을 전달하고 이 레이아웃 파일을 기반으로 기사 목록, 양식, 세부정보 페이지와 관련된 보기 템플릿 파일을 재구성하여 전체 UI를 통합하겠습니다. 🎜PostController 코드>에서 GET 경로로 렌더링된 모든 보기 파일에 대해 pageTitle을 전달했습니다. 값은 다른 페이지의 제목 역할을 합니다. 이 기능을 구현하려면 <code>resources/views/layouts/app.blade.phptitle 라벨에 해당하는 라벨 텍스트를 수정해야 합니다. /code> 레이아웃 파일. 값: 🎜Vue.filter('post_status_readable', status => {
switch(status) {
case 0:
return '草稿';
case 1:
return '已发布';
default:
return '未知状态';
}
});resources/views/posts 디렉토리를 다음과 같이 기사 목록 보기 파일 템플릿 코드로 다시 작성합니다(원본 <code>posts.blade.php의 이름을 index.blade.php로 변경): 🎜Vue.component('post-detail', require('./components/PostDetail.vue').default);form.blade.php의 이름을 create.blade.php로 바꾸고 기사 게시를 작성하세요. 양식 페이지 보기 파일 템플릿 코드는 다음과 같습니다. 🎜@extends('layouts.app')
@section('content')
<p>
<post-detail></post-detail>
</p>
@endsectiontitle code>), 작업 유형(action), 양식 제출 URL(url), 양식 구성 요소에 대한 조정 사항이 곧 소개될 예정입니다. 🎜resources/views/posts에 새 edit.blade.php를 파일로 생성합니다. > 디렉토리 페이지 보기 파일을 편집하고 다음과 같이 템플릿 코드를 작성합니다. 🎜<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>post-form 템플릿을 사용하여 기사 편집 양식을 렌더링하지만 양식을 초기화하기 위해 추가 id 속성이 전달됩니다. 편집할 구성요소입니다. 🎜🎜기사 상세페이지 보기는 추후 별도로 소개하겠습니다. 🎜<style>
.post-list {
width: 100%;
}
</style>
<template>
<p>
<listsection>
<template>文章列表</template>
<template>
<a>新文章</a>
</template>
<template>
<listitem>
{{ post.title }}
</listitem>
</template>
...</listsection></p></template>title 속성을 통해 상위 범위의 제목 값을 전달합니다. 🎜🎜기사 편집 양식의 경우 먼저 상위 항목이 전달한 id 속성 값을 기반으로 mounted 후크 함수에서 새로운 load를 호출합니다. code> 메소드는 백엔드 인터페이스 <code>/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 表单组件就重构好了。
我们接着来实现文章详情页。
在 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
