学习 Laravel - Web 开发实战入门笔记(1)

本笔记根据 LearnKu 教程边学边记而成。该教程以搭建出一个类似微博的Web 应用为最终成果,在过程中学习 Laravel 的相关知识。

准备开发环境

原教程使用官方推荐的 Homestead 开发环境。由于最近 Docker 开始流行,并且也有相应的 Laravel 对应的容器。所以本文以 Laradock 作为开发环境。

安装 Laradock

  1. 克隆 Laradock 仓库到本地。

    git clone https://github.com/laradock/laradock.git

    最终文件夹结构应该像这样:

    + laradock
    + project-z
  2. 配置 Laradock

    复制配置文件
    bash cd laradock cp env-example .env #复制配置文件

    进入 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 bash

    配置国内加速镜像

    # 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 域名

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

修改新复制出的配置文件里的路径为将要创建的项目路径。

修改 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 工具。

  1. 创建 Heroku App

    heroku create
  2. 配置 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
  3. 生成 App Key

    #Workspace
    $ php artisan key:generate --show
    base64:ta1aE+E8kuyDFlURbUrHEtL4HY71WtoffyNgUKldMWw=
    #Host
    heroku config:set APP_KEY=base64:ta1aE+E8kuyDFlURbUrHEtL4HY71WtoffyNgUKldMWw=
  4. 推送到 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

转载于:https://www.cnblogs.com/codingbit/p/11188250.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值