快速开发!几行代码搞定页面生成

  • 2018-06-17
  • 0
  • 1

Laravel - lego 介绍

姓名:黄志成(小黄)

博客:地址

懒!是一种美德.

在开发小型API系统的时候,尤其是全栈开发的时候,是不是一直重复着改DOM 画表单 做筛选 导出数据.这些工作.

以前弄过的一些项目中.经常重复着这些工作.如何复用起来呢?有幸看了2017年PHPCON 张卫大佬分享的PPT后.总结了这篇文章。

感谢这些巨人,让我能站在巨人的肩膀上开发.

下面一起来感受一下这个扩展的牛X.

1.首先安装Laravel

composer create-project --prefer-dist laravel/laravel demo

我的是Laravel5.5

2.安装好Laravel后,我们去安装Laravel-lego的扩展包

# composer 安装
composer require wutongwan/lego

3.添加这些到config/app.php文件中的providres数组下.

    // Lego require LaravelCollective/html ,So need to add it's ServiceProvider.
    Collective\Html\HtmlServiceProvider::class,
    // Lego require mewebstudio/Purifier ,So need to add it's ServiceProvider.
    Mews\Purifier\PurifierServiceProvider::class,
    Lego\LegoServiceProvider::class,

3.我们去创建一个控制器和一个模型试试

创建一个控制器

php artisan make:controller ContentController

创建模型及迁移文件

php artisan make:model Content -m

生成id name phone 还有增加和修改的时间 字段.

public function up()
    {
        Schema::create('contents', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name',20);
            $table->string('phone',11);
            $table->timestamps();
        });
    }

执行迁移

php artisan migrate

迁移成功后生成了如下几张表.

image

我们现在生成一个插入数据的页面.

那插入代码该如何去写? 我们可以去 Demo 中,了解基本的用法.

根据demo中的代码.我们改成我们的.

<?php

namespace App\Http\Controllers;

use App\Content;
use Lego\Lego;

class ContentController extends Controller
{
    public function index(){
        $form = Lego::form(new Content());
        $form->addText('name', '城市名称')
            ->required() // 必填项目
            ->placeholder('请输入名称');

        $form->addText('phone', '手机号')
            ->required() // 必填项目
            ->placeholder('请输入手机号')
            ->note('手机号');
        $form->success('');
        return $form->view ('index',['grid'=>$form]);
    }

}

我们定义一条路由去查看效果.Laravel框架在route/web.php下定义路由

use Illuminate\Support\Facades\Route;

Route::any('/', 'ContentController@index');

通过 php -S localhost:8080 起一个服务去查看效果.

image

没有加载出样式文件.我们通过浏览器抓下包.

http://localhost:8080/packages/wutongwan/lego/components/bootstrap/dist/css/bootstrap.min.css

静态文件的路径不对.应该是有一个地方可以配置静态文件的地址.

正确的文件地址在 public/components中.

我们可以使用PHPstorm中的全局搜索

image

我们将

    const PATH_PREFIX = 'packages/wutongwan/lego';

改为

    const PATH_PREFIX = '';

刷新页面看一下效果.

image

样式出来了.很显眼有点丑.不过这是一个demo,将就着看吧~

试一试效果.

image

我们在来看看数据表中是否有了这条数据:

image

很不错~插入的功能就实现了.

下面再来实现列表筛选功能~

先定义一条路由

Route::any ('/lists','ContentController@lists');

定义的lists方法

<?php

namespace App\Http\Controllers;

use App\Content;
use Lego\Lego;
use Lego\Widget\Grid\Grid;


class ContentController extends Controller
{
    public function lists(){
        $filter = Lego::filter(new Content());
        $filter->addText('name');
        $filter->addDateRange('created_at', '创建时间');
        $filter->addDateRange('updated_at', '最后一次更新时间');

        $grid = Lego::grid($filter);
        $grid->add('id', 'ID');
        $grid->add('name', '名称');
        $grid->add('phone', '手机号码');

        $grid->add('created_at', '创建日期');
        $grid->after('phone')->add('updated_at', '更新时间');

        $grid->export('导出列表', function (Grid $grid) {
            $grid->remove('id');
        });
        return $grid->view ('index',['grid'=>$grid]);
    }

}

查看一下效果

image

几行代码一个页面就出来了!开发效率大大提升哇.而且不容易出现BUG了.

试试导出列表功能

image

很完美~

上面只是介绍了简单的使用。更多使用请查看PPT 下面我附上PPT地址: PDF格式

端午假期第一天结束了.明天开始研究新的东西了.

完结于 2018年06月17日01:08:03

评论

  • 匿名

    很不错