laravel 5.5 《電商實戰 》基礎佈局
咱們須要爲咱們的項目構建一個基礎的頁面佈局，佈局文件統一存放在 resources/views/layouts 文件夾中，佈局涉及的文件以下：php
- app.blade.php —— 主要佈局文件，項目的全部頁面都將繼承於此頁面；
- _header.blade.php —— 佈局的頭部區域文件，負責頂部導航欄區塊；
- _footer.blade.php —— 佈局的尾部區域文件，負責底部導航區
咱們先建立主要佈局文件：resources/views/layouts/app.blade.php：css
$ mkdir -p resources/views/layouts/ $ touch resources/views/layouts/app.blade.php
resources/views/layouts/app.blade.phphtml
<!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.phpnode
function route_class() { return str_replace('.', '-', Route::currentRouteName()); }
此方法會將當前請求的路由名稱轉換爲 CSS 類名稱，做用是容許咱們針對某個頁面作頁面樣式定製。在後面的章節中會用到。webpack
頂部導航
下面建立頂部導航模板：laravel
$ touch resources/views/layouts/_header.blade.php
resources/views/layouts/_header.blade.phpgit
<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>
註冊登陸連接咱們將在後面章節中修改。web
底部導航
建立文件：shell
$ 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:root@leo108.com">聯繫咱們</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('/', 'PagesController@root')->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 "基礎佈局"
上面是一系列操做，主要就是將前端的頁面框架佈局出來。也沒有什麼特別難的，按着操做就好，不懂的先記下來，
- 1. laravel 5.5 《電商實戰 》輔助函數
- 2. laravel 5.5 《電商實戰 》安裝應用
- 3. Laravel 教程 - 實戰 果醬社區 開源電商 API 系統
- 4. flutter移動電商實戰
- 5. 實戰電商頁面1：靜態佈局
- 6. 3.1 Web前端：實戰電商頁面1：靜態佈局
- 7. Laravel 5.5 Middleware
- 8. ****-ElasticSearch電商實戰-Java
- 9. laravel+react實戰打造企業級高併發分佈式電商小程序（一）-- 基礎建設
- 10. Laravel 教程 - 實戰 iBrand 開源電商 API 系統
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • ☆基於Java Instrument的Agent實現
- • Docker容器實戰(一) - 封神Server端技術
-
每一个你不满意的现在，都有一个你没有努力的曾经。