LC02 第 3 遍学习小结 -- 操作记录 1

由于LC02教程和实际需要开发的项目之间存在差异,所以第3遍学习只关注自己实际项目必须会用到的技能点。

第二章. 舞台布置

2.1 开发环境

mac宿主机下采用homestead,具体配置搭建

2.2 产品分解

与实际差异较大,了解即可。

2.3 创建应用

本节非常有用。详见

1) Composer 加速

$ composer config -g repo.packagist composer https://packagist.laravel-china.org

此命令在一个homestead中只需要执行一次。

2) 创建应用

$ cd ~/Code
$ laravel new projectName

3) 修改host

> sudo vi /etc/hosts

在 hosts 文件最后面新增下面一行以完成设置:

192.168.10.10 oxxx.test

4) 新增站点
修改yaml

> vi ~/Homestead/Homestead.yaml

在 Homestead.yaml 文件中新增 oxxx 应用的 sites 和 databases 的相关设置:

sites:
    - map: homestead.test
      to: /home/vagrant/Code/Laravel/public
    - map: oxxx.test # <--- 这里
      to: /home/vagrant/Code/oxxx/public # <--- 这里

databases:
    - homestead
    - oxxx # <--- 这里

5) 重启虚拟机

homestead reload --provision

6) 修改.env 文件

APP_NAME=oxxx
APP_URL=http://oxxx.test
DB_DATABASE=oxxx

7) 测试首页:

http://oxxx.test

8) Git代码版本控制

$ cd ~/Code/oxxx
$ git init
$ git add -A
$ git commit -m "初始化"

9) 托管代码到GitHub

在GitHub上创建新项目
推送代码:

git remote add origin git@github.com:<username>/oxxx.git
git push -u origin master

2.4 配置信息

本节是配置文件的存放位置,配置文件的简单说明,如何访问和设置配置值。
需要修改如下:

config/app.php

'timezone' => 'Asia/Shanghai',
'locale' => 'zh-CN',

版本控制

$ git add -A
$ git commit -m "修改配置信息"

2.5 辅助函数

本节讲述了如何配置自己的「自定义辅助函数」。非常有用。

$ touch app/helpers.php
$ vi composer.json

修改 composer.json

{
    ...

    "autoload": {
        "psr-4": {
            "App\\": "app/"
        },
        "classmap": [
            "database/seeds",
            "database/factories"
        ],
        "files": [
            "app/helpers.php"
        ]
    }
    ...
}

让新的composer配置生效

$ composer dump-autoload

版本控制

$ git add -A
$ git commit -m "新增自定义辅助函数文件"

2.6 基础布局

本节应该比较有用,虽然最后还没有定下来要不要使用blade模板。

1) 基础布局

mkdir -p resources/views/layouts
vi resources/views/layouts/app.blade.php

resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- CSRF Token -->
  <meta name="csrf-token" content="{{ csrf_token() }}">

  <title>@yield('title', 'oxxx') - 我的小项目</title>

  <!-- Styles -->
  <link href="{{ mix('css/app.css') }}" rel="stylesheet">

</head>

<body>
  <div id="app" class="{{ route_class() }}-page">

    @include('layouts._header')

    <div class="container">

      @include('shared._messages')

      @yield('content')

    </div>

    @include('layouts._footer')
  </div>

  <!-- Scripts -->
  <script src="{{ mix('js/app.js') }}"></script>
</body>

</html>

app/helpers.php添加route_class()辅助方法

function route_class()
{
    return str_replace('.', '-', Route::currentRouteName());
}

2) 顶部导航
resources/views/layouts/_header.blade.php

<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-static-top">
  <div class="container">
    <!-- Branding Image -->
    <a class="navbar-brand " href="{{ url('/') }}">
      LaraBBS
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <!-- Left Side Of Navbar -->
      <ul class="navbar-nav mr-auto">

      </ul>

      <!-- Right Side Of Navbar -->
      <ul class="navbar-nav navbar-right">
        <!-- Authentication Links -->
        <li class="nav-item"><a class="nav-link" href="#">登录</a></li>
        <li class="nav-item"><a class="nav-link" href="#">注册</a></li>
      </ul>
    </div>
  </div>
</nav>

3) resources/views/layouts/_footer.blade.php

<footer class="footer">
  <div class="container">
    <p class="float-left">
      由 <a href="http://weibo.com/u/1837553744?is_hot=1" target="_blank">hustnzj</a> 设计和编码 <span style="color: #e27575;font-size: 14px;">❤</span>
    </p>

    <p class="float-right"><a href="mailto:name@email.com">联系我们</a></p>
  </div>
</footer>

4) 消息提醒
resources/views/shared/_messages.blade.php

@foreach (['danger', 'warning', 'success', 'info'] as $msg)
  @if(session()->has($msg))
    <div class="flash-message">
      <p class="alert alert-{{ $msg }}">
        {{ session()->get($msg) }}
      </p>
    </div>
  @endif
@endforeach

5) 首页展示
这只是一个测试界面,后面都不会用,pass

6) 样式调整

运行 Laravel Mix

$ yarn config set registry https://registry.npm.taobao.org

使用 Yarn 安装依赖:

$ yarn install

安装成功后,运行以下命令即可:

$ npm run watch

教程中用的是npm run watch-poll, 但我用的是browserSync,效果相同,而且速度更快。

7) 优化页首,页脚固定
实际开发可能这个步骤不会用到,应该会使用UI框架。
修改resources/sass/app.scss

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

/* universal */

body {
  font-family: Helvetica, "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
}

/* header */

.navbar-static-top {
  border-color: #e7e7e7;
  background-color: #fff;
  box-shadow: 0px 1px 11px 2px rgba(42, 42, 42, 0.1);
  border-top: 4px solid #00b5ad;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 40px;
  margin-top: 0px;
}

/* Sticky footer styles */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #000;

  .container {
    padding-right: 15px;
    padding-left: 15px;

    p {
      margin: 19px 0;
      color: #c1c1c1;

      a {
        color: inherit;
      }
    }
  }
}

8) 版本控制

$ git add -A
$ git commit -m "基础页面结构"

2.7. 浏览器缓存问题

本节非常有用。可以不用每次修改js,css文件后,都在引用链接后再加上t=datetimestamps之类的东西了。

修改webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css').version();

版本控制

$ git add -A
$ git commit -m "静态文件浏览器缓存问题"

2.8 字体图标

本节非常有用,我之前自己也进行了下类似的研究。

$ yarn add @fortawesome/fontawesome-free

修改 resources/sass/app.scss

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

/* universal */
.
.
.

编译:npm run watch

版本控制

$ git add -A
$ git commit -m "增加字体图标"

2.9 小结

  • 如何快速搭建一个本地开发环境
  • 如何创建laravel应用
  • 如何composer加速
  • 如何托管代码到github
  • 如何查看和设置laravel的配置。
  • 如何配置自己的helpers functions.
  • 通用的blade布局是怎么构建的。
  • 如何在blade布局中使用通用的「消息提醒」
  • 如何yarn安装加速(使用淘宝镜像)
  • 如何实现代码页面同步刷新(npm run watch + browserSync)
  • 如何使用Laravel Mix 解决浏览器的静态文件缓存问题
  • 如何引入fortawesome图标。

推送到github

git push
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!

社区文档:

将托管在 packagist.org 和 github.com 的扩展包使用国内 CDN 加速
GitHub Laravel 扩展包 TOP 250
速查表方便快速查询框架功能,支持手机访问,支持中英文版本
Laravel 中文文档,由社区用户翻译和维护,将会保持一直更新
此文档的目的,就是为了提高技术团队的凝聚力、一致性和生产效率。
开发环境的部署,开发者工具的选择,适用于 Mac 和 Windows。
浓缩过后的精华
Laravel Nova 后台管理面板文档的中文翻译
Lumen 中文文档,由社区用户翻译和维护,将会保持一直更新
Laravel 下知名扩展包 Dingo API 的中文文档,Laravel API 开发必知必会