laravel程序员我爱编程

Laravel 基础学习 第一天

2018-05-13  本文已影响47人  那就远走

1. 路由

/**
 * 默认的第一条路由如下
 * 
 * Route::动作('uri', 闭包() {
 *  return view('视图');
 * });
 * 
 * 路由的功能：
 * 1、如下调用一个闭包函数返回一张视图
 * 2、映射与 控制器@方法 的关系 => 该 'uri' 访问 'XxController@Xx方法'
 */
Route::get('/', function () {
    return view('welcome');
});

2. 使用命令行创建一个控制器

<?php

// 1命名空间
namespace App\Http\Controllers;

// 2引用空间类元素
use Illuminate\Http\Request;

// 3定义控制器类
class TestController extends Controller
{
    // 4这里面我们就可以构建我们需要的方法实现应用逻辑
}


# 控制器层 TestController
// 4
...
public function home() {
    return 'home';
}

public function lists() {
    return 'lists';
}

public function show() {
    return 'show';
}
...

# 路由定义文件 web.php
// 路由定义
Route::get('/', 'TestController@home'); // Route::action('uri', 'Controller@function');
Route::get('home', 'TestController@home');
Route::get('lists', 'TestController@lists');
Route::get('show', 'TestController@show');

3.很熟悉的package.json

4. 视图学习： 引用 app.css & app.js

# TestController
...
public function home() {
    /**
        * 视图都在 /resources/views/ 下，比如laravel的欢迎页 welcome.blade.php
        * 视图都默认用 blade 模板引擎渲染，所以他们都叫 xxx.blade.php 
        * view('这里可以创建个文件夹/这里再写具体的视图')
        * 比如下面，我们就是去找 /resources/views/test/ 下 home.blade.php
        */
    return view('test/home');
}
...

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 编译好的css -->
    <link rel="stylesheet" href="/css/app.css">

    <!-- 编译好的js -->
    <script src="/js/app.js"></script>

    <title>Test控制器专用视图</title>
</head>
<body>
    <!-- 这里主要是看看bootstrap.css有没有真的放进来 -->
    <h1 class="bg-primary">测试_Home</h1>

    <!-- 这里主要是看看jquery.js有没有真的放进来 -->
    <script>
        $(function() {
            console.log('Laravel真厉害， 他帮我打包好了css和js文件！ 我们来学习视图吧');
        })
    </script>
</body>
</html>

# app.js
require('./bootstrap'); //引入了bootstrap.js

# app.scss
// 字体
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// 变量
@import "variables";

// 引入了 /node_modules 下的 bootstrap
@import '~bootstrap/scss/bootstrap';

5. 视图学习： 布局模板, @extends, @yield, @section, @include

vsCode 有叫 laravel 5 Snippets & laravel blade Snippets 的插件

// 完善 lists() 和 show() 方法，让他们载入相应的视图
public function lists() {
    return view('test/lists');
}

public function show() {
    return view('test/show');
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 编译好的css -->
    <link rel="stylesheet" href="/css/app.css">

    <!-- 编译好的js -->
    <script src="/js/app.js"></script>

    <title>
        {{--  @yield 占位同时给定默认值  --}}
        @yield('title', '布局模板默认标题')
    </title>
</head>
<body>
    
    {{--  不同部分我们用 @yield 占位  --}}
    @yield('content')
</body>
</html>

你打开浏览器控制台可能会出现错误提示说找不到 "#App"元素 那是vue.js 的锅，现在不用在意这些细节。

{{--  继承布局模板  --}}
@extends('layouts.master')

{{--  填补站位符， @section(参数) 参数对应 @yeild(参数)  --}}
@section('title', '主页')

@section('content')
    {{--  对于不只一行的内容，我们用 @section + @endsection 包起来  --}}
    <h1 class="bg-primary">这是主页</h1>
@endsection

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">主页 <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">列表</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">详情</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="">不可选</a>
            </li>
        </ul>
    </div>
</nav>

以上代码 copy 自 bootstrap4中文网提供的bootstrap文档

{{--  引用导航组件  --}}
@include('components.navbar')

路由真正投入使用

...

// ->name(路由别名)
Route::get('home', 'TestController@home')->name('test.home');
Route::get('lists', 'TestController@lists')->name('test.lists');
Route::get('show', 'TestController@show')->name('test.show');

<!-- {{}} 这是 blade 模板的插值语法， 相当于 <?php ?>  -->
<a href="{{ route('test.lists') }}">列表</a>
<!-- route('路由别名') -->

第一天总结

Laravel 虽然不强制你使用哪个 JavaScript 或 CSS 预处理器，但还是提供了适用多数应用的 Bootstrap 和 Vue 来作为起点。默认情况下，Laravel 使用 NPM 安装这些前端依赖包。

上一篇 下一篇

猜你喜欢

热点阅读