本节将学习Laravel的基本用法,包括路由,控制器,视图,布局,artisan命令及版本Git的分支管理。
一、创建Git分支
项目启动命令:
// 使用下面命令来启动和登录 Homestead:
> cd ~/Homestead && vagrant up
> vagrant ssh
// 在虚拟机中进入 Code/sample文件夹:
$ cd ~/Code/sample
上一节中,我们将代码通过Git版本控制,是在主分支master上,这一节将通过创建分支来添加新功能,然后再将分支合并到主分支上,这样做的好处是如果有什么差错,我们可以将分支删掉,这样就不会影响我们的主程序。
首先让我们使用 Git 来新建一个 static-pages 分支。
$ git checkout master
$ git checkout -b static-pages
上面的第一条命令 git checkout master
代表将当前分支切换到 master
分支上,master 分支是我们初始化 Git 时默认创建的主分支,其它分支都是基于主分支衍生出来的。
第二条命令 git checkout -b static-pages
将会为你创建一个名为 static-pages 的新分支。-b
选项表示创建指定名称的新分支。
你可以将新建的 static-pages 理解为是对 master 分支的克隆,在上面做的所有修改都不会影响到 master 分支。本节后面会将 static-pages 分支合并到 master 分支上,合并成功之后,在 static-pages 分支上做的所有改动都会并入到 master 分支。另外,你也可以选择对一个分支进行删除操作,当一个分支被删除之后,在该分支之上的所有改动也都将被销毁,删除分支的操作不会影响到 master 分支。这便是 Git 工作流的强大之处。
添加分支后,在子分支static-pages
下进行代码开发,功能完成后进行本地提交,最后切换到主分支进行合并。
1.将代码进行版本管理
$ git add -A
$ git commit -m "Finish static pages"
2.将 Git 切换到 master分支,并合并 static-pages 分支上的修改:
$ git checkout master
$ git merge static-pages
3.最后将代码推送到 GitHub 和 Heroku上
$ git push
$ git push heroku master
4.将代码推送到github分支
或者,我们也可以
将代码推送到分支
上去,这样做的好处可以认为的划分版本,方便以后我们可以查看项目的开发过程
$ git checkout master
$ git checkout -b first-version
本地建立分支,然后使用推送分支命令即可:
git push origin first-version
这样,即可在GitHub 上看到我们推送的分支
推送完之后,我们可以切换到主分支下:
$ git checkout master
二、路由及视图布局
1、路由格式
// app/Http/routes.php
// Route::get('/', 'StaticPagesController@home');
get('/', 'StaticPagesController@home');
2、使用artisan命令创建控制器
$ php artisan make:controller StaticPagesController
// 创建简洁控制器,控制器里边不带任何方法
$ php artisan make:controller StaticPagesController --plain
3、视图布局
我们可以将视图中重复的代码抽出来,遵循 DRY(Don't repeat yourself)原则,可以使页面够灵活、简洁。因此我们需要对页面进行重构,把多余的代码从视图中抽离出来,单独创建一个主视图来进行存放通用代码。
resources/views/layouts/master.blade.php
<!DOCTYPE html>
<html>
<head>
<title>@yield('title', 'Laravel-Learnning') - Laravel学习</title>
</head>
<body>
@yield('content')
</body>
</html>
我们给应用创建了一个 master 视图,并将其放在 layouts 文件夹中,master 视图将作为整个应用的基础视图
。实际上你只要保证视图文件被放置在 resources/views 目录下即可,Laravel 对视图的文件夹和文件命名并没有限制,我将 master 文件放在 layouts 文件下,只是为了让应用的目录结构让人更好理解。
下面的这行代码表示该占位区域将用于显示 content 区块的内容,而 content 区块的内容将由继承自 master 视图的子视图定义。
主页继承基本视图master
resources/views/static_pages/home.blade.php
@extends('layouts.master')
@section('content')
<h1>主页</h1>
@stop
三、前端资源安装
Laravel 默认为框架集成了三个扩展包,它们分别是:
gulp
- 基于 Node.js 实现 Web 前端自动化开发工具;laravel-elixir
- 由 Laraevl 官方提供的静态资源管理工具;bootstrap-sass
- Bootstrap NPM 扩展包;
这三个扩展包将在 Laravel 上为我们构建一套完整的前端工作流。
npm下载前端包资源
由于GFW的原因npm下载的速度很慢,常常出错,所以这里npm使用国内淘宝镜像
vagrant@homestead:~/Code/sample$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
/usr/bin/cnpm -> /usr/lib/node_modules/cnpm/bin/cnpm
/usr/lib
安装完成之后,让我们对 Laravel 默认生成的 app.scss 文件进行编辑,导入 Bootstrap。
resources/assets/sass/app.scss
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
细心的你可能会发现上面新建的样式文件后缀名(.scss)有别我们之前经常看到的样式文件后缀名(.css),这是因为 .scss 是 Sass(一种 CSS 开发工具)专属的文件格式,我们后面会再对 Sass 相关的知识进行补充讲解。
将 Bootstrap 导入成功之后,我们还需要使用 Gulp 来将 .scss 文件编译为 .css 才能正常使用,编译命令如下:
$ gulp
我们也可以通过下面的命令,在每次检测到 .scss 文件发生更改时,自动将其编译为 .css 文件:
$ gulp watch
四、bootstrap学习
1、网格系统
Bootstrap 的网格系统(Grid System)。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)
Bootstrap把一个页面分为12列,通过指定数字就能够设置宽度。简单的示例:
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-6">6</div>
<div class="col-xs-3">3</div>
</div>
偏移列
偏移列的意思是隔开多少个列。
示例:
<div class="col-xs-12 col-sm-6 col-md-3">3</div> //向右偏移2列了
<div class="col-md-offset-2 col-xs-12 col-sm-6 col-md-3">3</div>
显示效果如下:.col-xs=*
类不支持偏移,它们可以简单地通过使用一个空的单元格来实现该效果。
如果我们需要在首页resources/views/static_pages/home.blade.php
添加CSS样式,则可以在assets/sass/app.scss
中添加,然后通过执行gulp
,就会在app.css
中追加相关的CSS信息,这样做的好处是,只需要在页面引入一个css文件即可,易于管理。
resources/assets/sass/app.scss
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
$navbar-color: #3c3e42;
/* universal */
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.jumbotron {
text-align: center;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #777;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
.navbar-inverse {
background-color: $navbar-color;
}
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: #fff;
text-decoration: none;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
&:hover {
color: #fff;
}
}
然后执行gulp,生成app.css文件。