學習 Laravel - Web 開發實戰入門筆記(1)

時間 2019-12-13

標籤學習 laravel web 開發實戰入門筆記欄目 HTML 简体版

原文原文鏈接

本筆記根據 LearnKu 教程邊學邊記而成。該教程以搭建出一個相似微博的Web 應用爲最終成果，在過程當中學習 Laravel 的相關知識。php

準備開發環境

原教程使用官方推薦的 Homestead 開發環境。因爲最近 Docker 開始流行，而且也有相應的 Laravel 對應的容器。因此本文以 Laradock 做爲開發環境。css

安裝 Laradock

克隆 Laradock 倉庫到本地。html
```
git clone https://github.com/laradock/laradock.git
```
最終文件夾結構應該像這樣：nginx
```
+ laradock
+ project-z
```
配置 Laradocklaravel

複製配置文件
bash cd laradock cp env-example .env #複製配置文件git

進入 Workspace
bash #運行 Laradock docker-compose up -d nginx #進入 Laradock Workspace docker-compose exec --user=laradock workspace bash #For Git Bash winpty docker-compose exec --user=laradock workspace bashgithub

配置國內加速鏡像web
```
# Workspace
composer config -gl    #查看composer設置
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/    #設置國內加速鏡像
```

構建頁面

建立應用

# Workspace
composer create-project laravel/laravel weibo --prefer-dist "5.8.*"

配置 Nginx 域名sql

cp nginx/sites/laravel.conf.example nginx/sites/weibo.conf

修改新複製出的配置文件裏的路徑爲將要建立的項目路徑。docker

修改 Host

編輯 C:/Windows/System32/Drivers/etc/hosts
增長一條 127.0.0.1 weibo.test

.env 文件
.env 文件包含了項目的一些設置，咱們進行一些修改。

APP_NAME=Weibo
APP_ENV=local
APP_KEY=base64:nsvnM5l0N5cOzT/dFqfUoYlkYffhDPnKPuYU4AWMdPc=
APP_DEBUG=true
APP_URL=http://weibo.test

爲了方便，咱們在本地使用 sqlite 數據庫。
註釋掉原有 DB 相關設置，添加下面內容

DB_CONNECTION=sqlite
DB_DATABASE=/database/database.sqlite

而且建立相應數據庫文件

touch database/database.sqlite

使用 Git 管理代碼

cd weibo
git init
git add -A
git commit -m "Initial commit"

上傳到 Gitee

git remote add origin git@gitee.com:codingbit/weibo.git
git push -u origin master

使用 Heroku 部署應用

須要先安裝 heroku-cli 工具。

建立 Heroku App
```
heroku create
```

配置 Procfile 文件：

echo web: vendor/bin/heroku-php-apache2 public/ > Procfile
git add -A
git commit -m "Procfile for Heroku"
git push
heroku buildpacks:set heroku/php

生成 App Key

#Workspace
$ php artisan key:generate --show
base64:ta1aE+E8kuyDFlURbUrHEtL4HY71WtoffyNgUKldMWw=

#Host
heroku config:set APP_KEY=base64:ta1aE+E8kuyDFlURbUrHEtL4HY71WtoffyNgUKldMWw=

推送到 Heroku 上
```
git push heroku master
```

上傳成功，訪問地址 https://cbit-weibo.herokuapp.com/ 便可看到效果。

統一代碼風格

經過編輯器的 EditorConfig 插件，統一代碼風格。

.editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

[*.yml]
indent_size = 2

[*.{js,html,blade.php,css,scss}]
indent_style = space
indent_size = 2

靜態頁面

架子搭好了，開始學習建立基礎靜態頁面。

新建分支

git checkout master
git checkout -b static-pages

移除無用視圖

默認的 welcome.blade.php 視圖文件，沒有用，刪掉。

rm resources/views/welcome.blade.php

配置路由

routes/web.php

<?php

Route::get('/', 'StaticPagesController@home');
Route::get('/help', 'StaticPagesController@help');
Route::get('/about', 'StaticPagesController@about');

get 方法有兩個參數：1. 訪問的URL；2. 操做的控制器及對應的方法

在 Laravel 中咱們較爲經常使用的幾個基本的 HTTP 操做分別爲 GET、POST、PATCH、DELETE。

GET 經常使用於頁面讀取
POST 經常使用於數據提交
PATCH 經常使用於數據更新
DELETE 經常使用於數據刪除

其中，PATCH 和 DELETE 是不被瀏覽器所支持的，咱們能夠經過在提交表單中作一些手腳，讓服務器覺得這兩個動做是從瀏覽器中發出的同樣。

生成靜態頁面控制器

生成靜態頁面控制器：

php artisan make:controller StaticPagesController

添加三個方法

class StaticPagesController extends Controller
{
    public function home()
    {
        return '主頁';
    }

    public function help()
    {
        return '幫助頁';
    }

    public function about()
    {
        return '關於頁';
    }
}

添加靜態頁面視圖

控制器中渲染視圖，須要用到 view 方法，view 方法接收兩個參數，第一個參數是視圖的路徑名稱，第二個參數是與視圖綁定的數據，第二個參數爲可選參數。

app/Http/Controllers/StaticPagesController.php

class StaticPagesController extends Controller
{
    public function home()
    {
        return view('static_pages/home');
    }

    public function help()
    {
        return view('static_pages/help');
    }

    public function about()
    {
        return view('static_pages/about');
    }
}

默認狀況下，全部的視圖文件都存放在 resources/views 文件夾下。

下面建立三個視圖。

resources/views/static_pages/home.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Weibo App</title>
</head>
<body>
  <h1>主頁</h1>
</body>
</html>

resources/views/static_pages/help.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Weibo App</title>
</head>
<body>
  <h1>幫助頁</h1>
</body>
</html>

resources/views/static_pages/about.blade.php

<!DOCTYPE html>
<html>
<head>
  <title>Weibo App</title>
</head>
<body>
  <h1>關於頁</h1>
</body>
</html>

使用通用視圖

使用通用視圖避免代碼重複的問題。

resources/views/layouts/default.blade.php

<!DOCTYPE html>
<html>
  <head>
    <title>@yield('title', 'Weibo App') - Laravel 新手入門教程</title>
  </head>
  <body>
    @yield('content')
  </body>
</html>

Laravel 的 Blade 模板支持繼承，這意味多個子視圖能夠共用父視圖提供的視圖模板。

修改視圖模板。

resources/views/static_pages/home.blade.php

@extends('layouts.default')
@section('content')
  <h1>主頁</h1>
@stop

resources/views/static_pages/help.blade.php

@extends('layouts.default')
@section('title', '幫助')

@section('content')
  <h1>幫助頁</h1>
@stop

resources/views/static_pages/about.blade.php

@extends('layouts.default')
@section('title', '關於')

@section('content')
  <h1>關於頁</h1>
@stop

Git 代碼版本控制

接着讓咱們將本次更改歸入版本控制中：

git add -A
git commit -m "基礎頁面"

提交代碼

將 Git 切換到 master 分支，併合並 static-pages 分支上的修改：

git checkout master
git merge static-pages

最後將代碼推送到 GitHub 和 Heroku 上：

git push                     # 推送到 Gitee
git push heroku master       # 上線到 Heorku

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。