laravel-shop个人笔记

Composer 加速

composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/

创建 Laravel 项目

composer create-project laravel/laravel laravel-shop --prefer-dist "6.*"

配置 .env

APP_NAME="Laravel Shop"
APP_URL=http://shop.test
DB_DATABASE=laravel-shop
DB_USERNAME=homestead
DB_PASSWORD=secret

Git 代码版本控制

$ cd laravel-shop
$ git init
$ git add -A
$ git commit -m "初始化应用"

辅助函数

touch bootstrap/helpers.php
<?php
function test_helper() {
    return 'OK';
}
php artisan tinker
>>> test_helper()

打开 composer.json 文件，修改 autoload 段

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

项目根目录执行：

composer dumpautoload
php artisan tinker
>>> test_helper()

Git 代码版本控制

$ git add -A
$ git commit -m "辅助函数"

主要布局文件

$ mkdir -p resources/views/layouts/
$ touch 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());
}

顶部导航

touch 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('/') }}">
      Laravel Shop
    </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>

底部导航

touch resources/views/layouts/_footer.blade.php
<footer class="footer">
  <div class="container">
    <p class="float-left">
      由 <a href="https://leo108.com" target="_blank">Leo</a> 设计和编码 <span style="color: #e27575;font-size: 14px;">❤</span>
    </p>

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

创建控制器

    php artisan make:controller PagesController
    vim app/Http/Controllers/PagesController.php
    public function root()
    {
        return view('pages.root');
    }

视图

    $ mkdir -p resources/views/pages/
    $ touch resources/views/pages/root.blade.php
    @extends('layouts.app')
    @section('title', '首页')
    
    @section('content')
      <h1>这里是首页</h1>
    @stop

删除原首页视图文件

$ rm resources/views/welcome.blade.php

绑定路由

    vim routes/web.php
    Route::get('/', 'PagesController@root')->name('root');

集成 Bootstrap

    composer require laravel/ui --dev
    php artisan ui vue

运行 Laravel Mix
将package.json文件中的cross-env删掉.

     yarn config set registry https://registry.npm.taobao.org
     SASS_BINARY_SITE=http://npm.taobao.org/mirrors/node-sass yarn
     vim webpack.mix.js
     mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css')
       .version();
     npm run watch-poll

优化页首与页脚

vim resources/sass/app.scss
// Variables
@import 'variables';

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

/* universal */

body {
  font-family: Hiragino Sans GB, "Hiragino Sans GB", 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;
      }
    }
  }
}

Git 代码版本控制

git status
vim .gitignore
/public/mix-manifest.json
/public/js
/public/css
git status
git add -A
git commit -m "基础布局"

L05 Laravel 教程-电商实战 https://learnku.com/courses/laravel-shop/6.x

沙滩星空的博客

相关推荐

评论抢沙发

相关推荐

评论 抢沙发

评论抢沙发