README

新项目起点。使用 Laravel 和 Vue 构建 👌

一些酷炫功能

授权使用 Laravel Auth 实现
用户及其权限的安全架构
一些可复用的 Vue 组件，例如 DataGrid 和 Action（按钮和锚点）
每个用户的自定义菜单
控制器以显示/隐藏按钮和锚点（使用 Action 组件）

构建

要开始，您只需要执行以下操作

$ composer install
$ cp .env.example .env
$ php artisan key:generate
$ php artisan migrate && php artisan db:seed
$ npm install
$ npm run dev
$ ./vendor/bin/phpunit
$ php artisan serve

用法

种子

您所有的路由（资源/权限）必须在数据库中映射，以便权限控制可以正常工作。要创建新的资源及其权限，您必须在 ResourcesPermissionsSeeder 类中注册它们。这很简单，如下所示

$this->createNewResource(['users' => 'User management'], [
            'index'   => 'Users list', 
            'create'  => 'Creates new user', 
            'edit'    => 'Update user info', 
            'delete'  => 'Delete a user', 
            'details' => 'Manage user profiles'
]);

注意：Tatooine 只接受 resource/permission/{参数} 格式的路由。

注意：您可以更改方法描述，Tatooine 将更新其信息。您还可以删除权限，只需从权限 数组 中删除即可。

要运行种子，可以使用以下命令： $ php artisan resource:run

自定义配置

Tatooine 提供了一种灵活的方式来设计您的路由。您可以在 .env 中轻松设置，如下所示

BASE_ROUTE='tatooine' //Used as the first part of your route. Ex.: yoursystem.com/tatooine/home
MIX_BASE_ROUTE='security' //This one is used by JS to append on AJAX calls
CUSTOM_HOME='home' //Where the application goes when is accessed and after login

现在 Tatooine 知道如何映射您的路由。

辅助函数

在 Helper 类（在 app/Helper.php 中）中有两个有用的全局方法

baseUrl：获取您的应用程序完整的 URL，包括您的 base_route（例如：yoursystem.com/tatooine）。此函数有一个可选参数 $complement，可以用来补充您的基路由（例如：yoursystem.com/tatooine/users/create）
home：简单的函数，用于返回自定义主页的完整路径

Tatooine 超类

Tatooine 附带了三个超类：Model、Repository 和 Request。应用程序使用它们而不是 Laravel 的原生类，以提供附加功能。它们位于 Core 命名空间中（例如：Core\Model）

Model：只有一个方法，getFilterColumns()，它返回包含“可筛选”列及其对应过滤运算符的 $filterColumns 数组。此数组必须在您的模型类中定义，如下所示
```
$filterColumns = [
    'usr_name' => 'like',
    'usr_enabled' => '='
]
```
Request：简单扩展它并定义 rules() 方法，更多详细信息请参阅 Laravel 文档：https://laravel.net.cn/docs/5.5/validation#form-request-validation
Repository：接受一个 Model 实例。有一个公开方法，listModel([])。您可以使用它来检索分页和筛选数据。您可以调用任何其他 Eloquent\Model 方法，Repository 类将调用传递给其 Model 实例的调用（除非在它中定义了具有相同名称的方法）
- 提示：使用 listModel 方法与 DataGrid 组件（下面将描述）结合使用。

可用的 Vue 组件

Tatooine 随带两个可重用组件，Action 和 DataGrid。

Action

<action></action>

此组件可以根据用户权限动态渲染按钮/锚点。用法如下所示

<action
  action="users/create"
  aclass="btn btn-primary"
  icon="fa fa-plus"
  type="button"
  @btn-clicked="doSomethingWithThis"
>
  Criar novo usuário
</action>

Action props

action：操作的 URL。在锚点中它将是 href。操作将使用它来检查权限
aclass：将 class 应用到锚点/按钮上
图标（可选）：将设置按钮的图标
类型：动作组件将使用此属性来决定是渲染锚点还是按钮。可能的值是：'anchor' 和 'button'

动作事件

btn-clicked：当动作类型为 'button' 时，动作组件会将 btn-clicked 事件附加到 click 本地事件上，以便您可以控制它将执行的操作。然后您可以通过以下方式监听该事件

doSomethingWithThis (url) {
 //Whatever you want
}

注意：组件在 anchor/button 标签内部有一个 slot。因此，您可以在组件内部传递更多信息

数据网格

<data-grid></data-grid>

此组件渲染一个分页网格，具有过滤选项。您还可以为每行定义操作。用法

<data-grid 
  url="{{baseUrl('/users/list')}}"
  primary-key="usr_id"
  :user-fields="{usr_name: 'User', usr_email: 'E-mail', usr_username: 'Username', usr_enabled: 'Status'}"
  :user-filters="{
    usr_name: {type: 'text', size: 4}, 
    usr_enabled: {type: 'select', size: 3, options: {1: 'Enabled', 0: 'Disabled'}}
  }"
  :actions="[
    {method: 'edit', url: 'users/edit'}, 
    {method: 'delete', url: 'users/delete'}, 
    {method: 'details', url: 'users/details'}
  ]"
  :mutators="{usr_enabled: {0: 'Disabled', 1: 'Enabled'}}"
></data-grid>

数据网格属性

url：您用于从数据网格获取数据的 API。
主键：这将用于网格操作作为参数，必须是服务器检索到的数据中的一个现有字段。
用户字段：数据网格将显示的字段。格式为 {field_name: 'fieldTitle'}。
操作：您可以定义三种类型的操作：编辑、删除和详情。数据网格将渲染删除操作为按钮，其他两个将作为锚点。在每个操作中，您必须传递操作 URL。数据网格将传递 primaryKey 作为每个 URL 的参数。
用户过滤：要设置过滤条件，您必须传递一个对象，其中包含每个字段的详细信息。您必须传递过滤器的类型及其大小（仅介于 1 和 12 之间的数字，数据网格将自动将其转换为 bootstrap 网格类）。类型可以是 'text'、'number' 或 'select'。对于 'select' 类型，您还必须定义其选项，如下所示
```
  options: {1: 'Option one', 2: 'Option 2'}
```
注意 1：对象键用作过滤值

注意 2：此过滤功能将得到改进，以允许其他输入类型（如 'checkbox' 和 'radio'）
转换器：要更改数据将如何可视化，您可以应用转换器，这是一种简单的键值机制，您传递值和相应的显示信息。例如，模式：{usr_enabled: {0: '禁用', 1: '启用'}}

flaviojr / tatooine

维护者

详细信息