laravel 5.5 《电商实战》基础布局

Posted 2021-02-15 hqr0597

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了laravel 5.5 《电商实战》基础布局相关的知识，希望对你有一定的参考价值。

我们需要为我们的项目构建一个基础的页面布局，布局文件统一存放在 resources/views/layouts 文件夹中，布局涉及的文件如下：

app.blade.php —— 主要布局文件，项目的所有页面都将继承于此页面；
_header.blade.php —— 布局的头部区域文件，负责顶部导航栏区块；
_footer.blade.php —— 布局的尾部区域文件，负责底部导航区

我们先创建主要布局文件：resources/views/layouts/app.blade.php：

$ mkdir -p resources/views/layouts/
$ touch resources/views/layouts/app.blade.php

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<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‘, ‘Laravel Shop‘) - Laravel 电商教程</title>
    <!-- 样式 -->
    <link href="{{ mix(‘css/app.css‘) }}" rel="stylesheet">
</head>
<body>
    <div id="app" class="{{ route_class() }}-page">
        @include(‘layouts._header‘)
        <div class="container">
            @yield(‘content‘)
        </div>
        @include(‘layouts._footer‘)
    </div>
    <!-- JS 脚本 -->
    <script src="{{ mix(‘js/app.js‘) }}"></script>
</body>
</html>

route_class() 是我们自定义的辅助方法，我们还需要在 helpers.php 文件中添加此方法：

bootstrap/helpers.php

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

此方法会将当前请求的路由名称转换为 CSS 类名称，作用是允许我们针对某个页面做页面样式定制。在后面的章节中会用到。

顶部导航

下面创建顶部导航模板：

$ touch resources/views/layouts/_header.blade.php

resources/views/layouts/_header.blade.php

<nav class="navbar navbar-default navbar-static-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{ url(‘/‘) }}">
                Laravel Shop
            </a>
        </div>
        <div class="collapse navbar-collapse" id="app-navbar-collapse">
            <ul class="nav navbar-nav">
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
            </ul>
        </div>
    </div>
</nav>

注册登录链接我们将在后面章节中修改。

底部导航

创建文件：

$ touch resources/views/layouts/_footer.blade.php

resources/views/layouts/_footer.blade.php

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

        <p class="pull-right"><a href="mailto:[email protected]">联系我们</a></p>
    </div>
</footer>

首页展示

1. 创建控制器

我们将使用控制器 PagesController 来处理所有自定义页面的逻辑，并使用 root() 方法来处理首页的展示。

执行以下命令新建控制器：

$ php artisan make:controller PagesController

将会生成 app/Http/Controllers/PagesController.php 这个文件，我们里面新增 root() 方法：

app/Http/Controllers/PagesController.php

.
.
.
    public function root()
    {
        return view(‘pages.root‘);
    }

2. 视图

控制器 root() 方法中加载了视图 pages.root，目前我们还没有此视图文件，前往创建：

$ mkdir -p resources/views/pages/
$ touch resources/views/pages/root.blade.php

resources/views/pages/root.blade.php

@extends(‘layouts.app‘)
@section(‘title‘, ‘首页‘)

@section(‘content‘)
  <h1>这里是首页</h1>
@stop

Laravel 自带了一个主页视图 welcome.blade.php，既然我们已经自定义了主页视图，即可将废弃的主页视图删除：

$ rm resources/views/welcome.blade.php

3. 绑定路由

接下来绑定下路由，将 web.php 里的内容替换掉：

routes/web.php

<?php

Route::get(‘/‘, ‘[email protected]‘)->name(‘root‘);

4. 运行 Laravel Mix

Laravel Mix 一款前端任务自动化管理工具，使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API，让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 javascript 预处理器，通过简单的调用，你可以轻松地管理前端资源。

使用 Mix 很简单，首先你需要使用以下命令安装 npm 依赖即可。我们将使用 Yarn 来安装依赖，在这之前，因为国内的网络原因，我们还需为 Yarn 配置安装加速：

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

使用 Yarn 安装依赖：

$ SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn

在 yarn 命令前添加 SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass 的目的是告诉 yarn 到淘宝的镜像去下载 node-sass 二进制文件。

然后我们还需要修改一下 Mix 的配置文件：

webpack.mix.js

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

在末尾加了一个 version()，使 Mix 每次生成的静态文件后面加上一个类似版本号的参数，避免浏览器缓存。

然后，运行以下命令即可：

$ npm run watch-poll

watch-poll 会在你的终端里持续运行，监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll 命令运行的情况下，一旦资源文件发生变化，Webpack 会自动重新编译。

注意：在后面的课程中，我们需要保证 npm run watch-poll 一直处在执行状态中。
Windows 用户如果遇到报错请参考 https://learnku.com/laravel/t/13277/in-learning-lessons-there-are-always-craters-recording-solutions

优化页首与页脚

接下来我们来调整一下样式，样式代码在 resources/assets/sass/app.scss，是用 SASS 编写的，最终会由 Mix 来编译成 CSS。

resources/assets/sass/app.scss

@import "variables";

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

// 通用样式
body {
    font-family: Hiragino Sans GB, "Hiragino Sans GB", Helvetica, "Microsoft YaHei", Arial,sans-serif;
}

/* 顶部导航 */

.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;
    margin-bottom: 40px;
    margin-top: 0px;
}

/* 底部样式 */
html {
    position: relative;
    min-height: 100% ;
}
body {
    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;
            }
        }
    }
}

再到浏览器中刷新页面看看效果：

至此，我们完成了基础页面结构的构建。

Git 代码版本控制

在加入版本库之前我们先执行 git status 看看新增了哪些文件：

可以看到 Mix 还生成了 public/fonts 和 public/mix-manifest.json，这也是不需要加入版本库的，在 .gitignore 中添加这两项：

.gitignore

.
.
.
/public/fonts
/public/mix-manifest.json

再次执行 git status 看看我们的变更是否生效：

确认没有问题，现在让我们将这些文件加入到版本控制中：

$ git add -A
$ git commit -m "基础布局"

上面是一系列操作，主要就是将前端的页面框架布局出来。也没有什么特别难的，按着操作就好，不懂的先记下来，

以上是关于laravel 5.5 《电商实战》基础布局的主要内容，如果未能解决你的问题，请参考以下文章

laravel 5.5 《电商实战》安装应用

Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接

Vue.js+Koa2移动电商实战4

laravel从5.2到5.5从入门到精通视频教程共16套

Vue.js+Koa2移动电商实战3

Python 数据分析实战案例：基于电商销售数据的 RFM 模型构建

laravel 5.5 《电商实战 》基础布局