zoukankan      html  css  js  c++  java
  • 学习 Laravel

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

    准备开发环境

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

    安装 Laradock

    1. 克隆 Laradock 仓库到本地。

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

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

      + laradock
      + project-z
      
    2. 配置 Laradock

      复制配置文件

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

      进入 Workspace

      #运行 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
    ```

    **配置国内加速镜像**
    
    ```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
    
  • 相关阅读:
    团队项目冲刺七
    团队项目冲刺六
    团队项目冲刺5
    团队项目冲刺4
    团队项目测试计划
    团队项目冲刺第三天进度和遇到问题
    团队项目冲刺第二天进度和问题
    博客园用户体验
    团队项目冲刺第一天进度和问题
    团队项目风险
  • 原文地址:https://www.cnblogs.com/codingbit/p/11188250.html
Copyright © 2011-2022 走看看