从0-1搭建Markdown文档管理平台 本书未发布
3.7. 创建文档视图
我们需要创建视图来显示文档数据和表单。
步骤：
- 在
resources/views目录下创建一个documents文件夹。 - 创建以下视图文件：
index.blade.php：
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ __('Documents') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100">
<h1>Documents</h1>
<a href="{{ route('documents.create') }}" class="btn btn-primary">Create New Document</a>
@if (session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif
<ul>
@foreach ($documents as $document)
<li>
<a href="{{ route('documents.show', $document->id) }}">{{ $document->name }}</a>
<a href="{{ route('documents.edit', $document->id) }}" class="btn btn-secondary btn-sm">Edit</a>
<form action="{{ route('documents.destroy', $document->id) }}" method="POST" style="display:inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</x-app-layout>create.blade.php：
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ __('Create Document') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100">
<h1>Create Document</h1>
<form action="{{ route('documents.store') }}" method="POST">
@csrf
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="slug">Slug</label>
<input type="text" class="form-control" id="slug" name="slug" required>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" name="description"></textarea>
</div>
<div class="form-group">
<label for="cover_image">Cover Image</label>
<input type="text" class="form-control" id="cover_image" name="cover_image">
</div>
<div class="form-group">
<label for="is_chaptered">Is Chaptered</label>
<input type="checkbox" id="is_chaptered" name="is_chaptered">
</div>
<div class="form-group">
<label for="auto_numbering">Auto Numbering</label>
<input type="checkbox" id="auto_numbering" name="auto_numbering">
</div>
<div class="form-group">
<label for="auto_toc">Auto TOC</label>
<input type="checkbox" id="auto_toc" name="auto_toc">
</div>
<div class="form-group">
<label for="is_public">Is Public</label>
<input type="checkbox" id="is_public" name="is_public" checked>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" name="password">
</div>
<button type="submit" class="btn btn-primary">Create</button>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>show.blade.php：
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ $document->name }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100">
<p>{{ $document->description }}</p>
<a href="{{ route('documents.index') }}" class="btn btn-secondary">Back to Documents</a>
</div>
</div>
</div>
</div>
</x-app-layout>edit.blade.php：
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ __('Edit Document') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100">
<h1>Edit Document</h1>
<form action="{{ route('documents.update', $document->id) }}" method="POST">
@csrf
@method('PUT')
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" value="{{ $document->name }}" required>
</div>
<div class="form-group">
<label for="slug">Slug</label>
<input type="text" class="form-control" id="slug" name="slug" value="{{ $document->slug }}" required>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" name="description">{{ $document->description }}</textarea>
</div>
<div class="form-group">
<label for="cover_image">Cover Image</label>
<input type="text" class="form-control" id="cover_image" name="cover_image" value="{{ $document->cover_image }}">
</div>
<div class="form-group">
<label for="is_chaptered">Is Chaptered</label>
<input type="checkbox" id="is_chaptered" name="is_chaptered" {{ $document->is_chaptered ? 'checked' : '' }}>
</div>
<div class="form-group">
<label for="auto_numbering">Auto Numbering</label>
<input type="checkbox" id="auto_numbering" name="auto_numbering" {{ $document->auto_numbering ? 'checked' : '' }}>
</div>
<div class="form-group">
<label for="auto_toc">Auto TOC</label>
<input type="checkbox" id="auto_toc" name="auto_toc" {{ $document->auto_toc ? 'checked' : '' }}>
</div>
<div class="form-group">
<label for="is_public">Is Public</label>
<input type="checkbox" id="is_public" name="is_public" {{ $document->is_public ? 'checked' : '' }}>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" name="password" value="{{ $document->password }}">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>
解释：
- 视图：视图文件负责显示数据和表单，提供用户界面。
- Blade模板引擎：Laravel的Blade模板引擎允许我们使用简洁的语法编写视图，并支持模板继承和组件,因为前面使用Breeze所以这里使用模板组件的方式。
好处：
- 分离视图和逻辑：视图文件与控制器逻辑分离，符合MVC模式，便于维护。
- 简洁易读：Blade模板引擎的语法简洁易读，便于编写和维护视图。
关于 LearnKu
粤公网安备 44030502004330号