## Blade 模板引擎
### 1、简介
>[info]Blade是Laravel提供的一个非常简单、强大的模板引擎,不同于其他流行的PHP模板引擎,Blade在视图中并不约束你使用PHP原生代码。所有的Blade视图都会被编译成原生PHP代码并缓存起来直到被修改,这意味着对应用的性能而言Blade基本上是零开销。Blade视图文件使用.blade.php文件扩展并存放在resources/views目录下。
### 2、模板继承
#### 2.1 定义布局
使用Blade的两个最大优点是模板继承和切片,开始之前让我们先看一个例子。首先,我们检测一个“主”页面布局,由于大多数web应用在不同页面中使用同一个布局,可以很方便的将这个布局定义为一个单独的Blade页面:
~~~
<!-- 存放在 resources/views/layouts/master.blade.php -->
<html>
<head>
<title>App Name - @yield('title')</title>
</head>
<body>
@section('sidebar')
This is the master sidebar.
@show
<div class="container">
@yield('content')
</div>
</body>
</html>
~~~
>[info]正如你所看到的,该文件包含典型的HTML标记,然而,注意@section和@yield指令,前者正如其名字所暗示的,定义了一个内容的片段,而后者用于显示给定片段的内容。
现在我们已经为应用定义了一个布局,接下来让我们定义继承该布局的子页面吧。
2.2 扩展布局
>[info]定义子页面的时候,可以使用Blade的@extends指令来指定子页面所继承的布局,继承一个Blade布局的视图将会使用@section指令注入内容到布局的片段中,记住,如上面例子所示,这些片段的内容将会显示在布局中使用@yield的地方:
~~~
<!-- 存放在 resources/views/layouts/child.blade.php -->
@extends('layouts.master')
@section('title', 'Page Title')
@section('sidebar')
@parent
<p>This is appended to the master sidebar.</p>
@endsection
@section('content')
<p>This is my body content.</p>
@endsection
~~~
>[warning]在本例中,sidebar片段使用@parent指令来追加(而非覆盖)内容到布局中sidebar,@parent指令在视图渲染时将会被布局中的内容替换。
当然,和原生PHP视图一样,Blade视图可以通过view方法直接从路由中返回:
~~~
Route::get('blade', function () {
return view('child');
});
~~~
### 3、数据显示
>[warning]可以通过两个花括号包裹变量来显示传递到视图的数据,比如,如果给出如下路由:
~~~
Route::get('greeting', function () {
return view('welcome', ['name' => 'Samantha']);
});
~~~
那么可以通过如下方式显示name变量的内容:
`Hello, {{ $name }}.`
当然,不限制显示到视图中的变量内容,你还可以输出任何PHP函数,实际上,可以将任何PHP代码放到Blade模板语句中:
`The current UNIX timestamp is {{ time() }}.`
注意:Blade的{{}}语句已经经过PHP的htmlentities函数处理以避免XSS攻击。
Blade & JavaScript框架
>[warning]由于很多JavaScript框架也是用花括号来表示要显示在浏览器中的表达式,可以使用@符号来告诉Blade渲染引擎该表达式应该保持原生格式不作改动。比如:
~~~
<h1>Laravel</h1>
Hello, @{{ name }}.
~~~
在本例中,@符将会被Blade移除,然而,{{ name }}表达式将会保持不变,避免被JavaScript框架渲染。
输出存在的数据
有时候你想要输出一个变量,但是不确定该变量是否被设置,我们可以通过如下PHP代码:
`{{ isset($name) ? $name : 'Default' }}`
除了使用三元运算符,Blade还提供了更简单的方式:
`{{ $name or 'Default' }}`
在本例中,如果$name变量存在,其值将会显示,否则将会显示“Default”。
显示原生数据
默认情况下,Blade的{{ }}语句已经通过PHP的htmlentities函数处理以避免XSS攻击,如果你不想要数据被处理,可以使用如下语法:
`Hello, {!! $name !!}.`
>[danger] 注意:输出用户提供的内容时要当心,对用户提供的内容总是要使用双花括号包裹以避免直接输出HTML代码。
### 4、流程控制
>[warning] 除了模板继承和数据显示之外,Blade还为常用的PHP流程控制提供了便利操作,比如条件语句和循环,这些快捷操作提供了一个干净、简单的方式来处理PHP的流程控制,同时保持和PHP相应语句的相似。
#### 4.1 If语句
可以使用@if, @elseif, @else, 和 @endif来构造if语句,这些指令函数和PHP的相同:
~~~
@if (count($records) === 1)
I have one record!
@elseif (count($records) > 1)
I have multiple records!
@else
I don't have any records!
@endif
~~~
为方便起见,Blade还提供了@unless指令:
~~~
@unless (Auth::check())
You are not signed in.
@endunless
~~~
#### 4.2 循环
除了条件语句,Blade还提供了简单指令处理PHP支持的循环结构,同样,这些指令函数和PHP的一样:
~~~
@for ($i = 0; $i < 10; $i++)
The current value is {{ $i }}
@endfor
@foreach ($users as $user)
<p>This is user {{ $user->id }}</p>
@endforeach
@forelse ($users as $user)
<li>{{ $user->name }}</li>
@empty
<p>No users</p>
@endforelse
@while (true)
<p>I'm looping forever.</p>
@endwhile
~~~
#### 4.3 包含子视图
>[info]Blade的@include指令允许你很简单的在一个视图中包含另一个Blade视图,所有父级视图中变量在被包含的子视图中依然有效:
~~~
<div>
@include('shared.errors')
<form>
<!-- Form Contents -->
</form>
</div>
~~~
尽管被包含的视图继承所有父视图中的数据,你还可以传递额外参数到被包含的视图:
`@include('view.name', ['some' => 'data'])`
#### 4.4 注释
>[info]Blade还允许你在视图中定义注释,然而,不同于HTML注释,Blade注释并不会包含到HTML中被返回:
`{{-- This comment will not be present in the rendered HTML --}}`
### 5、服务注入
>[info]@inject指令可以用于从服务容器中获取服务,传递给@inject的第一个参数是服务将要被放置到的变量名,第二个参数是要解析的服务类名或接口名:
~~~
@inject('metrics', 'App\Services\MetricsService')
<div>
Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>
~~~
### 6、扩展Blade
>[info]Blade甚至还允许你自定义指令,可以使用directive方法来注册一个指令。当Blade编译器遇到该指令,将会传入参数并调用提供的回调。
下面的例子创建了一个@datetime($var)指令:
~~~
<?php
namespace App\Providers;
use Blade;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/**
* Perform post-registration booting of services.
*
* @return void
*/
public function boot()
{
Blade::directive('datetime', function($expression) {
return "<?php echo with{$expression}->format('m/d/Y H:i'); ?>";
});
}
/**
* 在容器中注册绑定.
*
* @return void
*/
public function register()
{
//
}
}
~~~
正如你所看到的,Laravel的帮助函数with被用在该指令中,with方法简单返回给定的对象/值,允许方法链。最终该指令生成的PHP代码如下:
`<?php echo with($var)->format('m/d/Y H:i'); ?>`
### **前端文件夹**
#### 1、路由及控制器文件位置

* * * * *
#### 2、前端页面位置

* * * * *
#### 3、前端页面头部尾部的引用

* * * * *
#### **前端文件引用**
>[info] 1、前端文件除了在layouts中引用的公共文件外,一些单独需要使用的插件以及样式可以在页面文件中引用,如下图所示:

* * * * *
#### 前端样式修改
>[info] 1、首先在浏览器中找到需要修改样式的模块,打开浏览器开发者模式;

>[info] 2、找到对应的css文件;


>[info] 3、然后在代码中找到相对应的css文件 ,在css文件中找到对应的第几行,修改保存即可。
* * * * *
- 序言
- Web
- 基础
- (1)安装及配置
- (2)路由
- (3)中间件
- (4)控制器
- (5)请求
- (6)响应
- (7)视图
- (8)Blade模板引擎
- 数据库
- (1)起步
- (2)查询构建器
- (3)迁移
- (4)填充数据
- 模型和关联
- (1)起步
- (2)关联关系
- (3)集合
- (4)序列化
- 调试和日志
- API开发
- Artisan控制台
- Module模块
- (1)介绍
- (2)安装
- (3)使用
- 扩展
- (1)composer扩展
- (2)数据库字典安装
- 其他
- (1)Session
- (2)Redis
- (3)发送邮件
- (4)任务调度
- (5)文件上传
- 二次开发教程
- (1)项目结构简介
- (2)公共函数介绍
- (3)常用composer包
- (4)前台添加页面教程
- (5)后台添加页面教程
- (6)linux下项目的安装和升级
- (7)windows下安装和升级
- (8)数据库字典示例
- (9)前端模板教程
- 第三方账号申请
- 支付接口
- 微信支付
- 支付宝支付
- 第三方登录
- QQ登录
- 微信登录
- 新浪微博登录
- APP
- 项目简介
- API
- 雇佣
- 获取雇佣订单详情评价信息
- 获取雇佣订单作品详情信息
- 获取雇佣订单服务详情信息
- 获取雇佣订单另一方用户详情信息
- 雇主或威客维权
- 雇主或威客评论雇佣
- 雇主验收稿件
- 威客投稿
- 处理雇佣
- 获取雇佣订单详情信息
- 第三方支付雇佣赏金托管
- 余额支付雇佣赏金托管
- 创建雇佣信息
- 订单
- 我卖出的作品或服务雇佣的数量统计
- 我购买的作品或服务雇佣数量统计
- 雇主获取购买作品的评价信息
- 维权购买的作品
- 评价购买的作品
- 验收购买的作品
- 第三方支付购买作品
- 余额支付购买作品
- 购买作品
- 我卖出作品的订单详情
- 我购买作品的订单详情
- 我卖出的作品或服务的订单列表
- 我购买的作品或服务的订单列表
- 店铺
- 获取威客用户信息详情(没有店铺时)
- 用户任务评价列表(没有店铺时)
- 店铺评价列表
- 开启或关闭我的店铺
- 修改店铺背景图片
- 保存企业认证信息
- 威客店铺信息详情
- 我的店铺详情
- 保存店铺设置信息
- 获取店铺设置信息
- 获取店铺标签和可以选择的标签
- 获取雇佣服务信息
- 获取某个店铺下的全部服务信息
- 威客商城作品或服务列表或作品服务筛选列表
- 威客商城店铺列表或店铺筛选列表
- 热门分类信息
- 获取个人标签某个一级分类下的子分类信息
- 获取个人标签的一级分类信息
- 获取作品或服务的详情信息
- 查看作品或服务的评价信息
- 获取作品或服务的内容
- 获取某个店铺下的成功案例
- 获取某个店铺下的全部作品信息
- 获取威客店铺信息
- 查看是否可以进入雇佣页面
- 查看我发布的服务或我发布的服务筛选
- 查看我发布的作品或我发布的作品筛选
- 查看店铺被收藏状态
- 取消收藏店铺
- 收藏店铺
- 查询是否开启推荐服务增值工具
- 获取服务平台抽佣提成比例
- 查询是否开启推荐作品增值工具
- 获取作品平台抽佣提成比例
- 我收藏的店铺列表或对我收藏的店铺进行筛选
- 版本
- 获取im聊天appkey
- 获取App_ios当前的版本号
- 获取App安卓当前的版本号
- 财务
- 获取订单信息
- 赏金托管之余额支付(悬赏任务赏金托管,招标任务增值服务或赏金托管)
- 检测第三方支付配置信息
- 财务流水
- 提现
- 已认证的支付宝信息列表
- 已认证的银行卡信息列表
- 钱包余额
- 用户信息
- 技能标签(一级和二级)带选中状态
- 获取热门店铺信息
- 将系统消息和交易动态状态由未读变为已读
- 系统消息和交易动态未读消息数
- 关于我们
- 支付处理接口
- 获取用户充值信息
- 查询用户账户余额和每日提现金额
- 检验是否要跳转到修改支付密码页面
- 威客详情
- 帮助
- 意见反馈
- 获取威客的我的信息
- 获取雇主的我的信息
- 获取服务商列表信息
- 获取热门服务商信息
- 我是雇主首页的获取热门服务
- 获取首页顶部幻灯片信息
- 修改用户信息
- 修改个人案例信息
- 查询个人案例信息
- 添加个人案例信息
- 用户个人案例信息
- 添加、修改、取消个人标签
- 收藏任务
- 删除我收藏的某个任务
- 用户信息详情(雇主/威客)
- 我收藏的任务
- 任务
- 草稿箱任务删除
- 雇主未发布的任务编辑获取详情
- 稿件的维权详情
- 招标任务威客同意或拒绝付款方式
- 招标任务保存付款方式
- 招标任务查看付款方式
- 招标任务雇主托管赏金数据
- 任务详情评论列表
- 任务详情维权内容列表
- 任务详情交付稿件列表
- 威客承接任务统计
- 雇主发布的任务数量统计
- 创建任务获取任务增值服务列表
- 创建任务获取任务类型
- 威客查询交付稿件详情
- 雇主查询交付稿件详情
- 查看我同意协议信息
- 查看一级分类下的任务信息
- 我是威客首页热门任务
- 任务草稿箱
- 附件上传
- 获取省市区信息
- 任务大厅
- 威客的任务列表
- 查看评价信息
- 稿件回复
- 交易评论
- 交付稿件维权
- 交付稿件验收(成功或失败)
- 创建任务
- 稿件中标
- 稿件详情
- 创建交付稿件
- 创建稿件(投稿或报价)
- 稿件对应用户的好评率
- 根据任务id查询任务详情
- 雇主的任务列表
- 用户中心
- 登录
- 注册
- 注册手机验证码验证
- 退出登录
- 创建第三方登录信息
- 找回支付密码
- 修改支付密码
- 修改登录密码
- 找回登录密码
- 找回登录密码验证
- 发送手机验证码
- 认证
- 获取支付宝列表
- 获取银行卡列表
- 银行卡认证验证金额
- 验证支付宝认证金额
- 获取支付宝认证信息
- 支付宝认证
- 获取实名认证信息
- 获取认证的银行卡信息
- 获取银行认证可绑定的银行卡名称
- 银行卡认证
- 实名认证或企业认证接口
- Android
- Android打包用户须知
- 使用指南
- 基本配置
- 目录结构
- 第三方应用配置
- 自定义控件
- 下拉刷新,加载更多
- 图片上传
- 幻灯片控件
- 可分页的GridView
- Fragment懒加载
- 扫一扫
- 第三方jar包
- 常见问题
- iOS
- iOS打包用户须知
- 项目介绍
- 项目设计
- 目录结构
- 更改配置
- 常见问题
- App上架教程
- 苹果开发者账号如何申请?
- 第三方账号申请
- 微信
- 微博
- 支付宝
- ShareSDK
- OpenIM