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

沙滩星空的博客

相关推荐

评论抢沙发

相关推荐

评论 抢沙发

评论抢沙发