Laravel学习笔记二-初识Laravel

2019年10月1日 183次阅读 来源: Corwien

本节将学习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 上看到我们推送的分支

《Laravel学习笔记二-初识Laravel》

推送完之后，我们可以切换到主分支下：

$ 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下载前端包资源

《Laravel学习笔记二-初识Laravel》

由于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学习笔记二-初识Laravel》

安装完成之后，让我们对 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

《Laravel学习笔记二-初识Laravel》

四、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>

显示效果如下：
《Laravel学习笔记二-初识Laravel》
.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文件。

《Laravel学习笔记二-初识Laravel》

相关文章：
Bootstrap栅格系统学习概括
Bootstrap导航条

    原文作者：Corwien
    原文地址: https://segmentfault.com/a/1190000008051947
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞