Laravel 5.1 + Layui 2.1.7 定制管理端

Contents

1. 前言
2. Laravel
3. layui
1. 3.1. 槛
4. 总结
5. 注释
6. Reference

前言

公司的AC接到一个项目，需要为一个现有的视频页面添加评论系统。由于甲方想把用户的评论控制在自己手里，所以不能使用第三方评论系统。
一个评论系统必须配备一个评论审核管理后台，而这次的甲方和其他的甲方有些说不清道不明的关系，所以还不能使用以前用过的管理后台。正好前几天看到一个推文提到过layui，去官网看了下，demo和文档都挺全，于是准备使用laravel+layui开发一个管理端。

Laravel

由于生产环境的PHP版本是5.5，所以选择了Laravel 5.1作为开发框架。

版本	PHP版本	PHP扩展要求
5.0	[5.4, 7.0.0)	Mcrypt, OpenSSL, Mbstring, Tokenizer
5.1	[5.5.9,)	PDO, OpenSSL, Mbstring, Tokenizer
5.2	[5.5.9,)	PDO, OpenSSL, Mbstring, Tokenizer
5.3	[5.6.4,)	PDO, OpenSSL, Mbstring, Tokenizer, XML
5.4	[5.6.4,)	PDO, OpenSSL, Mbstring, Tokenizer, XML
5.5	[7.0.0, )	PDO, OpenSSL, Mbstring, Tokenizer, XML

数据来源： Laravel官方文档

安装

从github上拉下压缩包后，需要先composer install一下，因为框架基础文件和依赖的其他包都在vendor里。

规范目录

参照baijunyao的博文，先将app目录规范为和文中一样的结构。

laravel-layui 项目根目录
├┬ app
│├┬ Http
││├─ Controllers   控制器
││├─ Middleware	   中间件
││├─ Requests
││├─ Kernel.php
││└─ routes.php    路由
│├┬ Library        [+]公共库
││├─ Function      [+]公共方法
││└─ Org           [+]公共类
│├┬	Models         [+]模型
││├─ Admin.php
││└─ User.php
│└─ Providers
├─ bootstrap
├─ config          配置文件夹
├┬ public          网站根目录
│├┬ public         [+]网站资源文件夹
││└─ layui         [+]layui目录
│└─ index.php      网站入口
├─ vendor          第三方插件文件夹
├─ artisan
└─ composer.json

由于Library是新建的目录，所以需要添加到autoload里。
在根目录的composer.json的file里加入需要载入的路径

...
"autoload": {
        "classmap": [
            "database",
            "app/Libraries/Org"
        ],
        "files": [
            "app/Library/Org/Dictionary.php",
            "app/Library/Function/Helper.php"
        ]
		...
	}
},
...

再运行composer dump-autoload就加载好了。
laravel中的自定义函数的放置规范

全局变量

laravel的全局变量位于根目录下的.env文件，任何自定义的全局变量名都可以写在这个文件内。

DB_HOST=localhost
DB_DATABASE=数据库名
DB_USERNAME=DB账号
DB_PASSWORD=DB密码
DB_PREFIX=表前缀
ROUTE_BASE=路径名

当程序中需要调用此变量值时，可以使用env('ROUTE_BASE')来获取该值。

配置路由

可自由配置的路由是laravel的一大亮点，而且经过指定GET变量的方式，在使用url传值的时候可以不用带上键名，大大缩短了url长度。
路由配置文件app/Http/routes.php
常用的三个静态方法是get、post和group，其中：

get主要用于url可直接访问的路径
eg. Route::get(env('ROUTE_BASE').'/admin/login', 'AdminController@login');
post用于表单post提交或ajax的post提交访问的路径
eg. Route::post(env('ROUTE_BASE').'/admin/user_save', 'AdminController@user_save');

group属于一个组，可统一配置中间件
eg.

//表示dashboard、unauthorized、user_management三个函数都在auth和access两个中间件运行通过之后执行
//中间件的运行顺序是先auth后access
Route::group(['middleware' => ['auth','access']], function() {
    Route::get(env('ROUTE_BASE') . '/admin/dashboard', 'AdminController@dashboard');
	//采用unauthorized这样的写法可以不用创建控制器及对应的函数，路由控制直接返回视图
    Route::get(env('ROUTE_BASE') . '/admin/unauthorized', function(){
        return view('admin.unauthorized');
    });
    Route::get(env('ROUTE_BASE') . '/admin/user_management', 'AdminController@user_management');
});

路由配置文件中用到的Route的方法在\Illuminate\Routing\Router中，可以查看其他可用的方法。

配置Auth关联的模型

Laravel中默认的管理员表模型是User，而在这个项目中user表有其他用处，管理员表需要改为Admin。
修改Auth配置文件config/auth.php

return [
	...
	'model' => App\Models\Admin::class,
    'table' => 'admin',
	...
];

之后便能通过读写Admin模型正常使用Auth::check()，Auth::attempt()等函数了。

关闭指定url的csrf验证

laravel中默认是全局开启csrf验证的，但是使用ajax通信时会造成失败，导致程序无法继续。
在app/Http/Middleware/VerifyCsrfToken.php中将需要排除的routes名称加入$except内，
这样解决了一部分问题，但是所有的表单均是采用通过ajax来提交，这样总是会报出
TokenMismatchException in VerifyCsrfToken.php line 53:这样总是添加$except会很麻烦，索性把csrf改为cookie模式。

class VerifyCsrfToken extends BaseVerifier
{
	...
	public function handle($request, Closure $next)
	{
		return parent::addCookieToResponse($request, $next($request));
	}
}

验证码插件mews

在制作登录界面的时候，由于要使用验证码，搜索到一个配置起来很方便的图形验证码插件mews。
这个插件的文档很全，按照文档里一步步走下来没有遇到什么问题。

模型

Eloquent[ˈeləkwənt] ORM是学习Laravel的一大难点，解说Eloquent的文章网上一大堆，这里不赘述。
除了可以使用Eloquent外，还可以使用queryDB::table('')的形式直接进行查询。
Eloquent模型的可用函数在
/vendor/laravel/framework/src/Illuminate/Database/Connection.php
和
/vendor/laravel/framework/src/Illuminate/Database/Query/JoinClause.php
内进行选择。

模型作用域

设置作用域可以为模型快速附加一些通用的条件。

class Comment extends Model
{
    //只查询未被删除(软删除)的留言
    public function scopeValid($query)
    {
        return $query->where('status', '<>', 9);
    }
    //只查询已发布的留言
    public function scopePublished($query)
    {
        return $query->where('status', 1);
    }
}
//===============
Comment::valid()->get();
Comment::published()->get();

关联模型

分享个项目中用到例子，参照了stackoverflow里的解法。
项目有一个管理员表Admin和一个用户组（角色）表Group，他们之间有一个关系表AdminGroup，关系是一对多，一个管理员可以有多个用户组。

//表关系
admin
	id
	...
admin_group
	admin_id
	group_id
	...
group
	id
	...
//===============
//模型写法
class Admin extends Model
{
	...
    public function groups()
    {
        return $this->belongsToMany('App\Models\Group');
    }
}
class Group extends Model
{
	...
    public function groups()
    {
        return $this->belongsToMany('App\Models\Admin');
    }
}
//==============
//可以非常方便的取出id为2的管理员所对应的状态(status)为启用(1)的用户组
$groups=Admin::find(2)->groups()->whereStatus(1)->get();
$group_data=[];
foreach($groups as $group){
	$group_data[$group->id]=$group->group_name;
}

layui

layui是从github上直接拿下来的当时最新版2.1.7。
layui官方文档
 layui官方demo

槛

demo的示例代码会出现layui-btn-xs的class，但是样式显示怎么都不对。去2.1.7的layui.css里查发现没有，只有layui-btn-mini，文档里有标注关于升级改名的注释^[1]。
table的tool工具条设置了监听事件，但是怎么点都没反应。在网上找到了解决办法，table.on(tool(NAME))中的NAME对应的是table的lay-filter值而不是id。

绊了这么多槛，总结经验，demo和doc之间还是要以doc为主。
比如tool监听的问题，代码是从demo里直接拉下来的，但是怎么调都不对。之后仔细看了doc#ontool才发现的确有提到要设置lay-filter。

总结

Laravel里还有很多优雅的功能，比如Provider等。在做这个项目里，只用到了最基本的。而在管理端开发完成后，由于种种原因，项目搁置了。但是手里不仅有了一个随时可用的不一样的管理器，还学会了Laravel和Layui的基本用法。

注释

1. 关于按钮组css的class名称修改

注意：从 layui 2.2.0 开始，为了统一规范，定义按钮尺寸的 CSS 类做出如下调整，升级版本时务必注意：

layui-btn-mini 改为 layui-btn-xs

layui-btn-small 改为 layui-btn-sm

layui-btn-big 改为 layui-btn-lg

Reference

Laravel官方文档
 Laravel目录介绍 - baijunyao
Laravel的验证码插件mews
Laravel查询作用域 - laravelacademy
Laravel中Session的使用 - chenyudong
Layui官方文档
 Layui数据表格渲染模式

Walter's Garden

I love $