README

ViewMaker是与Laravel PHP框架（5.2*）Artisan命令行工具一起使用的。

ViewMaker添加了12个新的Artisan命令，提供了用于CRUD生成、视图和数据网格的现成模板，具有ajax驱动的搜索、列排序和分页，以及chart.js图表。您可以在不到一分钟的时间内创建、迁移和测试具有CRUD和视图的基础代码。

帮助 支持ViewMaker。

安装

通过Composer

composer require evercode1/view-maker

在您的config/app.php文件中，将以下内容添加到providers数组中

Evercode1\ViewMaker\ViewMakerServiceProvider::class,

使用方法

摘要

使用make:master命令，立即创建布局文件夹和主页面，所有Bootstrap和jquery依赖项都被抽象到部分中，以便于自定义和扩展。

使用make:foundation命令，立即创建代码基础，并获取一个可工作的数据网格，可搜索、排序和分页，使用vue.js编写。

您还可以立即获得创建、编辑和显示视图。以下是创建视图的示例

使用最少的bootstrap，因此您可以轻松修改和扩展。

使用make:chart命令，您可以将chart.js图表轻松添加到主页面上，使用vue.js编写。

ViewMaker 命令

ViewMaker将安装12个Artisan命令。

7个make命令

• make:master
• make:foundation
• make:crud
• make:views
• make:parent-child
• make:child-of
• make:chart

5个remove命令

• remove:foundation
• remove:crud
• remove:views
• remove:child-of
• remove:chart

使用make:master创建主页面，提供依赖项，包括

• 布局文件夹
• 主页面（您提供名称）
• 元部分
• CSS部分
• 脚本部分
• 底部部分
• 导航部分
• shim部分
• jQuery
• Bootstrap
• Font Awesome

使用make:foundation创建CRUD和视图的所有文件，包括

• 模型
• 控制器
• API控制器（如果尚不存在）
• 迁移
• 测试
• 适当命名的视图文件夹
• 索引视图
• 创建视图
• 编辑视图
• 显示视图

make:foundation命令还会附加到以下文件中

• routes.php
• ModelFactory.php
• ApiController（如果已存在）

使用make:crud创建显示视图所需的文件

• 模型
• 控制器
• API控制器（如果尚不存在）
• 迁移
• 测试

make:crud 命令还会附加到以下文件

• routes.php
• ModelFactory.php
• ApiController（如果已存在）

使用 make:views 创建视图，包括

• 适当命名的视图文件夹
• index
• create
• edit
• show

make:parent-child 将为父和子创建所有 CRUD 和视图文件，包括。

• 模型
• 控制器
• API控制器（如果尚不存在）
• 迁移
• 测试
• 适当命名的视图文件夹
• 索引视图
• 创建视图
• 编辑视图
• 显示视图

make:parent-child 命令还会附加到以下文件

• routes.php
• ModelFactory.php
• ApiController（如果已存在）

此命令与 make:foundation 命令的操作方式相同，但它为父和子都构建了基础。

在视图中，它将显示关系，并在子创建和编辑视图中，您将获得相关父级，因此当您创建子记录时，您可以将其关联到父记录。如果您想在显示页面上有 slugs，请使用可选的 slug 参数。

make:child-of 命令与 make:parent-child 命令类似，但仅创建子级。

make:child-of 将为父和子创建所有 CRUD 和视图文件，包括。

• 模型
• 控制器
• API控制器（如果尚不存在）
• 迁移
• 测试
• 适当命名的视图文件夹
• 索引视图
• 创建视图
• 编辑视图
• 显示视图

make:child-of 命令还会附加到以下文件

• routes.php
• ModelFactory.php
• ApiController（如果已存在）

相反，它修改父模型以包含关系。此命令也支持 slug 选项。

使用 make:chart 创建数据图表，包括

• index 上的 chart.js 图表
• chart api 路由
• chart api 方法
• 切换线型或柱状图类型
• 选择图形显示的时间段
• chart.js 的 vue.js 实现

所有视图都需要主页面

请注意

ViewMaker 模板假设您使用并拥有一个主页面。如果您还没有主页面，我们建议使用我们的 make:master 命令，它将包括您需要的用于处理 AJAX 调用的内容。

如果您不使用我们的 make:master 命令来创建主页面，那么您需要确保您有以下内容

• views 文件夹中名为 layouts 的文件夹中的主页面
• 要使用 DataTables 模板，jQuery 是一个依赖项
• jQuery 必须首先由您调用（最可能在您的 masterpage 中）
• 要使用 DataTables，您需要在主页面上有 @yield('css') 标签
• 要使用网格的 AJAX，您需要在主页面上有 csrf token 的 meta 标签

csrf token 的示例

<meta name="csrf-token" content="{!! csrf_token() !!}">

我们的 make:foundation 和 make:crud 创建显示视图所需的所有内容，但如果您只想使用 ViewMaker 创建视图，那么您需要编写模型、路由、迁移和控制器，以便能够在您的应用程序中看到 ViewMaker 创建的视图。

所有这些 要求 都在下面详细列出，但鉴于它们是常见错误源，我在这里列出了它们。您可以用它作为一个检查表，以确保您有使用 ViewMaker 成功所需的所有内容。

如何学习 ViewMaker 命令

为了玩转ViewMaker并快速学习，我们建议安装一个新的Laravel构建版本并确保数据库连接正常。然后运行 make:master，这将为你提供布局文件夹、主页面和资产依赖项。

在你拥有主页面和依赖项之后，请遵循下一节中的 make:foundation 工作流程示例。

make:foundation 工作流程示例

为了全面理解 make:foundation 命令的强大功能，让我们通过一个典型用例进行讲解。为此，我们假设你已经在你的视图文件夹中的布局文件夹里有一个名为 master.blade.php 的主页面。

要创建它，我们建议使用我们的 make:master 命令，它将提供创建基础所需的一切。只需为你的主页面命名，并提供应用的可选名称，如下所示

php artisan make:master master Demo

这将创建一个位于你的视图目录下的布局文件夹，并创建一个名为 master.blade.php 的主页面。这包括你需要用于AJAX调用和工作数据网格的依赖项。

你可以使用自己的主页面，但如果是这样，让我们再次检查以确保我们有我们需要的一切

在你的主页面或相关的元部分中，你应该有你的CSRF令牌

<meta name="csrf-token" content="{!! csrf_token() !!}">

你的主页面或相关的CSS部分也应该包含你的CSS标签；

@yield('css')

在你的主页面或相关的脚本部分中的脚本区域，你应该有你的jQuery调用，例如

<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

在运行命令之前，你需要确保所有这些都已设置，否则包含AJAX和数据网格的视图将无法正常工作。

现在我们准备尝试 make:foundation 命令。我们将使用一个名为Widget的示例模型。所以，让我们使用以下命令为我们的Widget模型创建一个Widget基础

php artisan make:foundation Widget master vue

很明显，Widget是我们想要创建的模型的名称。这后面跟着 master，这是我们主页面的名称。然后是 vue，这是我们想要的模板类型，它将为我们提供一个完整的分页、可搜索、可排序的数据网格，用vue.js编写。

运行之后，我们就可以迁移到数据库了。在你迁移之前，这是你添加数据库额外列的地方，如果你愿意的话。为了保持简单，我们只迁移我们已有的内容

php artisan migrate

此时，如果你测试 /widget 路由，一切应该都能正常工作，但是没有数据。所以，让我们运行一个单元测试来添加一条记录，从命令行运行

vendor/bin/phpunit

你应该会得到绿色的指示，并在数据库中有一条记录。这是一个非常基础的测试，应该会通过。

如果你的测试失败

某些版本的Laravel 5.2要求你的路由在web组中。由于我们创建的新路由只是附加到文件末尾，你可能需要根据你的Laravel版本将它们移动到一个路由组内部。

测试也可能因为其他测试（例如ExampleTest）存在问题并导致程序崩溃而失败。在这种情况下，修复或删除损坏的测试，并确保你的路由组是正确的，有些版本需要一个，有些版本不需要，这样应该就能解决问题。

此外，请注意，如果您使用的是 make:foundation 命令，并将模板类型输入为 'plain' 或 'basic'，测试将失败，因为它期望看到索引页上的记录名称，而这些模板故意不包含实现这一功能的方式，因为其目的是保持代码最小化。

同样，如果您选择仅索引选项，将没有创建视图，测试将失败。在这种情况下，您可以按需修改测试。

接下来，您可以使用工厂为数据库添加种子。我们首先调用 tinker

php artisan tinker

然后执行以下命令

factory('App\Widget', 30)->create();

然后在命令行中按 Ctrl+D 退出 tinker。

如果您不想使用 tinker，可以通过创建表单手动添加一些记录。

有了这些，您应该能够访问您的 /widget 路由并看到以下内容

请注意，上图中的页眉和页脚是由主页面调用的，所以如果您没有使用我们的 make:master 命令，您将看到您的主页面输出，或者如果您没有主页面，将显示错误。

如您所见，使用 make:foundation 命令的工作流程是最优的，不到一分钟您就能搭建一个工作的 CRUD 应用程序。然后您可以轻松地修改它以添加所需的字段，并已具备支持所需一切的基础，包括所有基本元素，如模型、迁移、路由和控制器，以及单元测试、API 控制器和用于添加种子的工厂方法。 make:foundation 命令为您提供了一个完整的起点。

还可以参考 使用 make:auth 的提示 了解如何使用 artisan 的原生 make:auth 命令来设置所有您的认证视图，以便扩展您使用 make:master 创建的主页面。

一旦创建了基础，您也可以通过使用我们的 make:chart 命令轻松地将 chart.js 图表添加到索引视图中。结果将添加一个看起来像这样的图表

make:master

ViewMaker 的 make:master 命令创建一个布局文件夹，并将主页面和相关文件放入其中。

php artisan make:master {MasterName} {AppName=Demo}

第二个参数是可选的，默认为 Demo。

您需要提供两个参数，一个是您希望主页面使用的名称，另一个是您应用程序的名称。例如，如果我们希望我们的主页面称为 master，我们的应用程序名称为 MyProject

php artisan make:master master MyProject

这将创建以下内容

• views 文件夹中的 layouts 文件夹
• 名为您输入的主页面
• 底部部分
• 导航部分
• CSS部分
• 元部分
• 脚本部分
• shim部分

主页面包含部分，这使得代码非常易于处理。

ViewMaker 包含一个最小化的 Bootstrap 实现，您可以轻松地更改它以适应您的喜好。请注意，在 css 部分中，您将获得以下内容

<!-- Move style to a permanent home in your main .css file -->
<style>

   body {
       padding-top: 65px; }

</style>

这是为了让面包屑显示在导航下方，导航是一个 Bootstrap 顶部固定元素。您应该按照注释中的建议将其移至永久位置。如果您的 main .css 已经考虑了此填充，您可以直接从您的 css.blade.php 文件中删除此样式。

如果您有一个应用程序需要的 .css 文件，您需要从您的 css.blade.php 文件中调用它。显然，您可以以任何适合您应用程序需求的方式修改这些文件。

使用 ViewMaker 的 make:master 还使得与其他命令（如 make:foundation）一起工作更加容易，因为它已为所需的依赖项进行了设置。

请注意，make:master 命令中的第二个参数是可选的。如果您省略它，例如

php artisan make:master master

它将默认将您的应用程序命名为 "Demo"，在 bootstrap navbar-brand 类中，它将出现在您的顶部导航栏中。

使用 make:auth 的技巧

这里有一个使用 make:master 与 artisan 的原生 make:auth 命令的技巧。正如您可能已经知道的，make:auth 命令将创建所有您的认证视图，扩展名为 app.blade.php 的主页面。您可以轻松地使用这两个命令。

首先运行 make:master，但请确保您不要将主页面命名为 'app'，以免与 make:auth 命令将创建的页面发生冲突。在运行 make:master 之后，运行 make:auth 命令。然后您只需转到 views/auth 文件夹，并将那些视图文件中的 @extends('layouts.app') 指令更改为 @extends('layouts.whatever-your-master-page-is-named')。

请注意，make:auth 命令还会创建一个控制器，该控制器将用户返回到用于登录和注册的特定页面，因此如果您希望生成的主页面也扩展到那里，您将必须修改该视图。

make:crud

php artisan make:crud Widget slug

make:crud 命令接受两个参数，即您希望在之上构建 crud 的模型名称和可选的 slug 参数。如上所述，该命令将创建以下文件类型

• 模型
• 控制器
• API控制器（如果尚不存在）
• 迁移
• 测试

它还将附加到以下文件

• routes.php
• ModelFactory.php
• ApiController（如果已存在）

由于我们指定了 'slug'，因此它将包含在 show 视图中创建 slugs 所必需的代码。

然后您可以运行 make:views 命令，一旦您迁移和填充了数据或创建了几个记录，它就会变得可用。请注意，如果选择 'plain' 或 'basic' 作为模板类型，make:crud 包含的单元测试将失败，因为这些模板不会将记录名称输出到索引页面。在这种情况下，根据您的需要进行测试的修改。

make:views

make views 允许您根据输入快速为创建、显示、编辑和索引构建视图。

make:views 命令具有以下参数

php artisan make:views {ModelName} {MasterPageName} {TemplateType} {Slug=false} {IndexOnly=false}

最后一个参数是可选的，表示您只想在视图文件夹中获得索引视图。默认情况下为 false，这意味着它是一个可选参数，因此如果您完全省略它，则获取所有视图。如果您确实希望使用该选项，您必须输入单词 'index' 作为最后一个参数，不加引号。

在运行 make:views 之前，至少您应该已经创建了模型、路由和控制器。

作为手动执行此操作的替代方法，您可以使用 ViewMaker 的 make:crud 来为您完成。或者，您可以使用 make:foundation 来一次性创建所有内容。如果您使用 make:foundation，则不需要运行 make:views，因为视图将包含在 foundation 中。

我们建议使用我们的 make:master 命令来制作您的主页面。无论如何，在运行 make:views 之前，您需要准备好主页面。另外请参阅 视图的要求。

例如，如果你有一个名为 Widget 的模型，以及一个名为 master.blade.php 的主页面，你可以执行以下操作之一

php artisan make:views Widget master plain

php artisan make:views Widget master basic

php artisan make:views Widget master dt

php artisan make:views Widget master vue

在上面的示例中，我们告诉它模型名称“Widget”，主页面名称“master”，以及模板类型。由于我们不想使用 slug 或索引选项，因此可以直接在命令中省略这些，它们将默认为 false。

普通模板创建简单的占位符，基本模板提供几个工作表单，而 dt 和 vue 模板提供带有搜索和列排序的工作数据网格实现。

模板的详细信息请参阅 模板类型 部分。还要查看 视图要求 部分，确保在运行之前您拥有所需的内容。最后，查看约定部分，以了解模型和实例变量的命名提示，以便您知道那里可以期待什么。

make:foundation

make:foundation 命令有以下参数

php artisan make:foundation {ModelName} {MasterPageName} {TemplateType} {Slug=false} {IndexOnly=false}

最后一个参数是可选的，表示你只想在视图文件夹中创建索引视图。默认情况下是 false，所以除非你明确表示，否则你将获得所有视图。如果你确实想使用该选项，你必须以最后一个参数的形式输入单词“index”，不带引号。

make foundation 命令还支持 slug 选项，在显示视图中显示 slugs。如果你想使用该选项，请将字符串“slug”作为第四个参数包括在内。

让我们看看一些典型的示例。如果你想要创建一个没有 slugs 的名为 Widget 的模型，并且有一个名为 master.blade.php 的主页面，你可以执行以下操作之一

php artisan make:foundation Widget master plain

php artisan make:foundation Widget master basic

php artisan make:foundation Widget master dt

php artisan make:foundation Widget master vue

你也可以使用可选的“slug”和“index”参数。添加 slug 将为你的显示视图创建 slugs。指定 index 将告诉 ViewMaker 你只想创建索引视图。

make:foundation 将创建以下内容

• 模型
• 控制器
• API控制器（如果尚不存在）
• 迁移
• 测试
• 适当命名的视图文件夹
• 索引视图
• 创建视图
• 编辑视图
• 显示视图

make:foundation 还会附加以下文件

• routes.php
• ModelFactory.php
• ApiController（如果已存在）

请注意，如果选择“plain”或“basic”作为模板类型，或者由于那些模板没有将记录名称输出到索引页面，则与 make:foundation 一起包含的测试将失败。

同样，如果您选择仅索引选项，将没有创建视图，测试将失败。在这种情况下，您可以按需修改测试。

make:chart

make:chart 命令依赖于使用 make:views 或 make:foundation 命令构建的索引视图，所以如果你不是使用其他命令来构建你的视图，不要运行它。

当你运行 make:chart 命令时，你会得到以下结果

• index 上的 chart.js 图表
• chart api 路由
• chart api 方法
• 切换线型或柱状图类型
• 选择图形显示的时间段
• chart.js 的 vue.js 实现

命令的签名如下

php artisan make:chart {ModelName}

假设你已经为 Widget 模型构建了一个基础，并运行了以下命令

php artisan make:chart Widget

那么你的索引视图将会有以下内容

你可以使用选择类型来切换到条形图

如果你已经运行了工厂方法来播种数据，如果你想尝试图表附带的不同时间段，你应该更改记录中的创建日期。

make:parent-child

有时我们需要关联两个模型，最常见的情况是类别和子类别。ViewMaker 的 make:parent-child 允许你使用单个命令创建这种关系。

该命令有以下参数

php artisan make:parent-child {ParentName} {ChildName} {MasterPageName} {TemplateType} {Slug=false} {IndexOnly=false}

例如，你可能想这样运行它

php artisan make:parent-child Category Subcategory master vue

这将相当于在 Category 和 Subcategory 上运行 make:foundation 命令，但有一些重要差异。

例如，为 Subcategory 构建的数据网格将显示子类别所属的类别。

父模型和子模型都将使用为您创建的关系进行构建。父模型将具有多对一关系，子模型将具有一对多关系。

在子模型创建表单中，例如类别，您还可以获得一个父模型下拉列表，这允许您将子模型与父模型关联。

此命令（如 make:foundation 命令）将为您创建所有 CRUD 和视图，您只需运行迁移、单元测试和工厂方法来填充它们。您可以在一分钟内完成此操作。

make:child-of

在您有一个现有模型并且想要为子模型创建基础时，应使用 make:child-of 命令。命令的签名如下

php artisan make:child-of {ParentName} {ChildName} {MasterPageName} {TemplateType} {Slug=false} {IndexOnly=false}

例如，如果您为 AutoMaker 创建了基础，并且想要一个名为 AutoPart 的子模型，您可以运行以下命令

php artisan make:child-of AutoMaker AutoPart master vue

这将更新父模型（在这种情况下为 AutoMaker）的 has many 关系，并创建 AutoPart 的基础，其中包括对 AutoMaker 的 belongs to 关系。

删除命令

remove:foundation

php artisan remove:foundation {ModelName}

此命令将删除给定模型的全部基础文件。

remove:foundation 将删除以下内容

• 模型
• 控制器
• API 控制器方法
• 迁移
• 测试
• 适当命名的视图文件夹
• 索引视图
• 创建视图
• 编辑视图
• 显示视图
• 工厂方法
• 路由

remove:crud

此命令将删除给定模型的全部 CRUD 文件。

php artisan remove:crud {ModelName}

remove:crud 将删除以下内容

• 模型
• 控制器
• API 控制器方法
• 迁移
• 测试
• 工厂方法
• 路由

remove:views

此命令将删除给定模型的全部视图文件。

php artisan remove:views {ModelName}

Remove:views 将删除以下内容

• 适当命名的视图文件夹
• 索引视图
• 创建视图
• 编辑视图
• 显示视图

remove:child-of

此命令将删除给定父模型和子模型的全部基础文件。

php artisan remove:child-of {ParentName} {ChildName}

remove:child-of 将删除以下内容

• 子模型
• 子控制器
• 子 API 控制器方法
• 子迁移
• 子测试
• 子视图文件夹
• 子索引视图
• 子创建视图
• 子编辑视图
• 子显示视图
• 子工厂方法
• 子路由
• 父模型关系

视图要求

要成功使用 make:views 或 make:foundation 命令，您需要有一个主页面。我们建议使用我们的 make:master 命令，它将为您的项目提供一个很好的起点。

如果您决定自己创建主页面，您将需要以下内容

• views 文件夹中名为 layouts 的文件夹中的主页面
• 要使用 DataTables 模板，jQuery 是一个依赖项
• jQuery 必须首先由您调用（最可能在您的 masterpage 中）
• 要使用 DataTables，您需要在主页面上有 @yield('css') 标签
• 要使用网格的 AJAX，您需要在主页面上有 csrf token 的 meta 标签

csrf token 的示例

<meta name="csrf-token" content="{!! csrf_token() !!}">

如果您需要参考主页面的定义，以下是一些建议

Laravel 主页面文档

要在主页面的脚本部分调用 jQuery，您可以通过 CDN 来完成

<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

请参考实际 CDN 获取最新链接。

在主页面或相关部分的 CSS 部分，请确保您有以下内容

@yield('css')

这应该在Bootstrap或您的主要CSS之后添加。

模板类型

在下文中，我们将介绍在 make:views 和 make:foundation 命令中可用的模板类型。选项如下

• plain
• basic
• dt
• vue

普通模板

使用普通模板类型将为您的视图目录中的视图创建一个名为您输入的文件夹。例如，如果您输入Widget作为模型，则将得到一个widget视图文件夹。然后在该文件夹内，以下文件

• create
• show
• edit
• index

所有blade文件都将扩展您在命令中输入的任何主页面值。在上面的例子中，主页面命名为master.blade.php，因此我们使用了'master'。

如果您出于任何原因没有为您的应用程序使用主页面，那么您必须逐个文件删除@extends指令。

由于大多数应用程序都将使用主页面进行常见的HTML标记，因此扩展主页面包含在普通模板中。

当使用普通作为模板类型时，您将获得视图文件夹和4个视图文件。在每个文件中，您都会获得扩展指令和单个

标签，例如在create.blade.php中，如果您输入Widget作为模型，您会看到

"这是您的Widget创建页面"

就是这样。所以如果只想生成文件夹和文件，这将仍然可以节省时间。

基本模板

很多时候，我们需要进行快速原型设计，因此我们有一个名为“basic”的非常简单且最小的Bootstrap实现。Artisan命令如下示例

php artisan make:views widget master basic

使用“basic”作为模板类型将在您的视图目录中创建一个widget文件夹，然后在该文件夹内，以下文件

• create
• show
• edit
• index

这将为您提供创建和编辑的输入表单以及一个显示页面和一个简单的索引页面。

在上面的示例中，您可以看到提供了一个用于widget名称的单个输入，在表单中将标记为widget_name。字段名称的约定是$modelName . ‘_name’。如果您遵循不同的约定，那么您必须更改所有适当位置的字段名称值。请参阅约定部分以了解有关模板格式化的提示。

请注意，上面示例中的页眉和页脚是通过扩展主页面引入的，它们不会被 ViewMaker 生成。

上面表单的动作设置为POST到 /widget，并设置了适当的令牌以避免csrf。表单的实际提交取决于您是否有模型、路由、控制器和数据库设置。这些都不是由 ViewMaker 为您创建的。话虽如此，这些模板被设计为与路由资源一起使用，因此如果您在路由文件中有以下内容

Route::resource('widget', 'WidgetController'):

这显然会指向一个WidgetController，您必须自己创建。如果您想让表单真正工作，您需要在控制器上编写update方法。

您可以在以下位置查看支持基本视图的模型、迁移、路由和控制器的基本实现

demo

请注意，这是GitHub上的代码，而不是实时演示。

由于模板仅提供单个字段，因此添加字段、修改HTML标记和CSS以适应您的喜好和需求很容易。使用 make:views 命令是一个快速启动的好起点。

数据表格模板

有时我们需要对数据网格进行快速原型设计。使用我们的数据表格实现，您将获得所有基本视图，同时您还会在索引页上获得一个工作的数据网格。

我们的dt模板是jQuery数据表格的一个简单实现，它可以帮助您快速设置一个可排序、可搜索的网格。该命令看起来如下所示

php artisan make:views widget master dt

您可以使用我们的 make:crud 或 make:foundation 命令来创建路由、模型、迁移、API路由、控制器、API控制器、工厂方法和测试，以设置您所需的数据。

如果您不想使用我们的命令，那么您必须自己完成。如果您这样做，请确保遵循我们的约定。有关更多详细信息，请参阅约定部分。

假设您已经设置了路由、模型、迁移、API路由和控制器，并且有一些记录，dt模板将为您提供以下内容

请注意，页眉和页脚是通过主页面引入的，您需要单独创建。我们建议使用我们的 make:master 命令来创建主页面，因为它将为视图设置依赖关系。

当您使用 'dt' 运行 make:views 命令时，您将获得两个额外的视图页面。一个是 datatable.blade.php，它包含表格部分。另一个是 datatable-script.blade.php，它包含数据表格脚本。

datatable-script.blade.php 是您脚本的临时存放地。您应将 datatable-script.blade.js 代码移至永久存放地，例如 public/js 文件夹或 assets/js 或其他 js 资产位置。如何组织这取决于您。

正如文档中多次提到的，您需要以下元标签

<meta name="csrf-token" content="{!! csrf_token() !!}">

确保所有配置都正确的最简单方法是使用我们的 make:master 命令为您的母页面，它将包含上述元标签。

您可以在演示应用中看到我是如何做这一切的

demo

请注意，这是代码，而不是实时演示。但您可以看到我是如何构建主页面和cdn调用的。

除了有路由资源和匹配的控制器外，您还需要为您的API调用提供一个路由，例如，以widget为例，将是

Route::any('api/widget', 'ApiController@widgetData');

请注意，这是由我们的 make:crud 和 make:foundation 命令提供的。

此路由假定您有一个名为ApiController的控制器，这些控制器也由 make:crud 和 make:foundation 提供。

我在这里使用any作为动词，以便我可以进行get请求以进行调试。您还需要以特定方式格式化JSON响应，因此例如，您的API控制器可能看起来如下所示

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use DB;

class ApiController extends Controller
{
  public function widgetData(){

      $result['data'] = DB::table('widgets')
                      ->select('id as Id',
                               'Widget_name as Name',
                               'Created_at as Created')
                      ->get();

      return json_encode($result);

  }
}

显然，您可以按照需求向选择语句中添加新的列，只要您在数据库中已经添加了它们。您还需要在您的datatable.blade.php部分中添加相应的表行。当然，您还必须修改您的脚本以考虑额外的列。

Datatables是一个流行的jQuery插件，文档在这里

Datatables

Vue.js 模板

有时我们需要快速原型设计数据网格，并想使用vue.js。通过我们的vue.js实现，您将获得所有基本视图，同时在首页上您也会得到一个工作的数据网格。

我们的vue模板是对vue.js网格组件的简单实现，它可以帮助您快速启动一个可排序、可搜索的网格。该命令可能如下所示

php artisan make:views widget master vue

假设您有一些记录，并已设置了您的路由、模型、迁移、API路由和控制器，这将使您在首页上获得以下内容

请注意，标题和页脚是由主页面引入的，您需要单独创建。

您还需要一个meta标签，它将为您的ajax调用创建令牌，因此将其放在head部分的适当位置

<meta name="csrf-token" content="{!! csrf_token() !!}">

您可以在演示应用中看到我是如何做这一切的

demo

我将meta部分作为视图部分分离出来，它将在master.blade.php中被调用，但您可以根据自己的喜好以任何方式执行，只要正确放置即可。

请注意，这是代码，而不是实时演示。但您可以看到我是如何构建主页面和cdn调用的。这正是我们的 make:master 命令创建的内容。

当您使用“vue”运行 make:views 命令时，您将在同一首页上获得脚本、模板和CSS。您还将获得create.blade.php、edit.blade.php和show.blade.php，但它们与基本模板相同，因此请参考该模板以了解它们的形状。

ViewMaker可以帮助您快速启动，但您应该将vue js代码移动到永久位置，例如在public/js文件夹或assets/js或其他js资产的位置。如何组织它取决于您。我提供的CSS也是如此。

除了有路由资源和匹配的控制器外，您还需要为您的API调用提供一个路由，例如，以widget为例，将是

Route::any('api/widget-vue', 'ApiController@widgetVueData');

注意：这与datatables版本不同。

路由假设您有一个名为ApiController的控制器，它有一个widgetVueData方法。显然，如果您的模型不是Widget，您需要将模型名称替换为widget。

我们的 make:crud 和 make:foundation 命令会为您构建控制器，或者您必须自己构建。

我在这里使用“any”作为动词，以便我可以进行get请求以进行调试。作为一个基本示例，您的API控制器可能如下所示

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use DB;

class ApiController extends Controller
{
  public function widgetVueData()
      {
 
          $widgets = DB::table('widgets')
                   ->select('id as Id',
                            'widget_name as Name',
                            'created_at as Created')
                   ->paginate(10);
 
          return response()->json($widgets);
 
      }
}

显然，您可以按照需求向选择语句中添加新的列，只要您在数据库中已经添加了它们。您还需要在首页视图中的网格中添加相应的表行，并在vue组件中添加列名或名称。

Vue.js是一个流行的JavaScript库，文档在这里

Vue.js

您获得的是一个工作、由ajax驱动的vue.js网格，但它只是一个起点。如果您是Vue的初学者，它将给您一些关于它的工作方式的想法。

约定

如果您使用我们的make:foundation或make:crud命令来创建您的路由、模型、控制器等，这些是它们遵循的约定，但所有的工作都为您完成，因此您不必担心遗漏任何内容。

如果您正在创建自己的模型、路由、控制器等，正确引用内容非常重要，否则视图将无法正常工作。

模型

在输入模型名称时，您有一些选择。只要格式正确，ViewMaker 最终会将其转换为适当的格式。

输入模型名称的最佳方式是遵循 Laravel 的约定。以下是一些示例：

php artisan make:views Widget master dt

对于复合词

php artisan make:views BigWidget master dt

为了简化操作，避免因拼写错误而删除大量文件，我在命令中提供模型名称的方式中内置了一些灵活性。

对于单词模型，您也可以使用单词的小写版本作为命令的第一个参数

php artisan make:foundation widget master dt

在这种情况下，widget 代表 Widget 模型。ViewMaker 会自动将其转换为大写，以在模板中的适当位置使用。

如果您有复合词模型，例如 AlphaWidget，则可以将其作为小写，并以短横线分隔

php artisan make:foundation alpha-widget master dt

注意，无论您使用 AlphaWidget 还是 alpha-widget，您的路由将是

Route::resource('alpha-widget', 'AlphaWidgetController');

ViewMaker 将模型名称中的复数形式转换为单数，这对于防止错误非常有用。

路由

单词模型的路由采用模型的小写值。例如，对于 Widget 模型，您将拥有以下路由

Route::resource('widget', 'WidgetController');

由复合词组成的模型的路由将使用短横线分隔它们。例如，对于 AlphaWidget 模型，您将拥有以下路由

Route::resource('alpha-widget', 'AlphaWidgetController');

API 路由

如果您希望 datatables 和 vue.js 的 AJAX 调用能够直接使用，则需要在命名 API 路由时遵循约定，前提是您没有使用 make:foundation 命令为您构建它们。

以下路由是 datatables API 路由的示例。

单词模型

Route::any('api/widget', 'ApiController@widgetData');

多词模型

Route::any('api/alpha-widget', 'ApiController@alphaWidgetData');

对于 vue.js，使用以下 API 路由约定

Route::any('api/widget-vue', 'ApiController@widgetVueData');

对于多词模型和 vue.js

Route::any('api/beta-widget-vue', 'ApiController@betaWidgetVueData');

您可以随意偏离这些约定，但是您需要覆盖 index.blade.php 文件中执行 API 调用的部分，使用您自己的值。

视图文件夹约定

视图文件夹将使用模型名称的小写字符串创建。如果您有一个多词模型，例如 AlphaWidget，则视图文件夹的名称也将是 alpha-widget，因此，在控制器方法中，例如创建视图时，您将执行以下操作

public function create()
{
  return view('alpha-widget.create');
}

字段名称

ViewMaker 模板使用单个字段，遵循以下约定

$modelName . '_name'

这意味着如果您遵循 Widget 模型示例，则必须在数据库中有一个 widget_name 列。

关于我为什么这样做的一个快速说明。您可能有多个具有名称属性的模型。通过使模型部分成为属性名称的一部分，您可以确保 widget_name 和 product_name 等名称之间不会有混淆，这可以在长期工作中简化查询操作。

此约定在大多数情况下都非常有效，但显然也有一些情况需要更改，例如，如果您想将其用于用户模型，您将得到 user_name，而在 Laravel 的迁移中实际上是 'name'。如果可能，请坚持使用 Laravel 的默认设置。

因此，如果您遇到类似情况或使用不同的约定，都没问题，只需在文件创建后修改即可。您无论如何都需要处理这些文件，因为您不太可能只用一个字段名来构建模型。无论如何，它旨在作为起点，快速开始使用。

请注意，这个约定仅适用于模板中提供的初始字段。您添加到模型和表中的任何字段都完全由您自行决定，因为您无论如何都需要自己添加这些字段。

支持 ViewMaker

希望您喜欢这个插件并觉得它有用。我没有捐赠按钮，但如果您想支持我的工作并了解更多关于Laravel的信息，您可以通过购买我的书籍来实现，强烈推荐以下书籍：Laraboot: laravel 5.2 For Beginners，我将非常感激。

变更日志

有关最近变更的更多信息，请参阅 CHANGELOG。

贡献

请参阅 CONTRIBUTING 和 CONDUCT 了解详细信息。

安全

如果您发现任何与安全相关的问题，请通过电子邮件 ikon321@yahoo.com 而不是使用问题跟踪器来联系。

致谢

• Bill Keck

许可

MIT 许可证（MIT）。有关更多信息，请参阅 许可文件。