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

分享 / 0 / 0 / 创建于 6年前

由于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

laravel 学习笔记小结

日拱一卒

hustnzj

版主 2.2k 声望

OS: macOS Monterey

0 人点赞

你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程，JWT 概念及使用和 API 开发相关的进阶知识。

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

讨论数量: 0

(=￣ω￣=)··· 暂无内容！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

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

第二章. 舞台布置

2.1 开发环境

2.2 产品分解

2.3 创建应用

2.4 配置信息

2.5 辅助函数

2.6 基础布局

2.7. 浏览器缓存问题

2.8 字体图标

2.9 小结

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

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

第二章. 舞台布置

2.1 开发环境

2.2 产品分解

2.3 创建应用

2.4 配置信息

2.5 辅助函数

2.6 基础布局

2.7. 浏览器缓存问题

2.8 字体图标

2.9 小结

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录