Laravel初识（二） - 视图 + 控制器

1 artisan命令

1. 新建控制器

// http/Controllers
php artisan make:controller Test1Controller
// 子目录
php artisan make:controller Test/TestController

2 laravel知识

2.1 目录结构

2.1.1 Public目录

public 包含 index.php
文件，它是进入应用程序的所有请求的入口，并配置自动加载。该目录还包含您的资源，如图像、JavaScript 脚本和 CSS 样式。

3 视图

1. 视图文件保存在resources\views目录中
2. 视图文件的名称以“.blade.php”或“.php”结尾
3. 当以“.blade.php”结尾，表示使用Blade模板引擎，在视图中可以使用模板语法和PHP原生语法
4. 当以“.php”结尾，表示不使用模板引擎，只能使用PHP原生语法

3.1 引用文件

.balde.php 如果要引用public的文件,URL::asset:path 在你项目的public 目录下

<!-- 要引入public/static/…………的文件 -->
<script type="text/javascript" src="{{URL::asset('static/jQuery/2.2.3/jquery.min.js')}}"></script>
<!-- css -->
<link rel="stylesheet" href="{{URL::asset('css/login/login.css')}}">

3.2 模板继承

1. 模板包含

用 @include('模板名') 引入 其他文件，不存在继承关系

@include('parent') 

3. 模板继承

• 将一个完整页面中的公共部分放在父页面中
• 将不同的部分放在不同的子页面中
• 子页面可以继承父页面来获得完整的页面

1. 父视图中：使用 @yield(“content”) ，留出子视图显示位置。
2. 子视图中：先使用 @extends(“父视图路径”) 先继承父视图，再使用 @section(“content”) 即子视图内容 … @endsection 继承父视图中的位置。

// 1. parent 
@yield('title', 'Laravel')
<div style='width:100%;height:200px;background:pink;'>
<center>Header</center>

</div>
@yield('content') 
<div style='width:100%;height:200px;background:skyblue;'>
<center>Footer</center>
</div>

// 2. child
//@extends('需要继承的父页面')
@extends('parent')
@section('title', '我是首页')
@section('content')
 区块内容
@endsection

3 控制器

3.1 路由 - 控制器

3.1.1 绑定控制器的方法

首先需要在Controller新建一个TestController

// Http/Controller/TestController.php
class TestController extends Controller
{
    public function index(){
        return "testController/index";
    }  

    public function creat(){
        return "testController/creat";
    }

    public function store(){
        return "testController/store";
    }
}
//  routes/web.php
Route::get('test/index','TestController@index'); // http://127.0.0.1:8000/test/index
Route::get('test/creat','TestController@creat'); // http://127.0.0.1:8000/test/creat
Route::get('test/store','TestController@store'); // http://127.0.0.1:8000/test/store

其他，路由在Test文件夹下（App\Http\Controllers\Test\TestController）：
Route::post('/test','Test\TestController@test');

不过以上你会发现 url 前缀 都是 test+方法，接下来引出路由组的概念简化上述用法。

3.1.2 路由组

上述路由等价

Route::prefix('test')->group(function () {
    Route::get('index', 'TestController@index');
    Route::get('creat', 'TestController@creat');
    Route::get('store', 'TestController@store');
});

3.1.3 路由嵌套

最外层和Controlle的目录有关，TestController在Controller/Admin下
输出url：http://127.0.0.1:8000/Admin/test/store

Route::prefix('Admin')->namespace('Admin')->group(function(){
    Route::prefix('test')->group(function () {
        Route::get('index', 'TestController@index');
        Route::get('creat', 'TestController@creat');
        Route::get('store', 'TestController@store');
    });
});

3.2 路由 - 控制器 - 页面

3.2.1 控制器向视图传值 - view()的使用

1. 返回视图：

    // 所传的参数是blade模板的路径
    //如 要返回 resources/views/test(自定义)/test.blade.php
    return view('test.test');
    return view('test/test');

2. 返回数据 - 单个值的传递

// 1. with
   $title = 'Hello Laravel';
   return view('test/test')->with('title',$title);
   
// 2. view 
   return view('test/test', ['title' => 'Hello Laravel']); 
   
// 3. compact
   return view('test/test', compact('title')); 

页面输出 : <h2>{{$title}}</h2>，输出结果如下

3. 返回数据 - 返回多个数据

// 1.with
    // 打印 hello, my name is {{$name}},I am {{$age}},I am a {{$sex}} 
    return view('test.test')->with(["name" => "jack", "sex" => "boy", "age" => "18"]);

// 2.compact
   // 打印 Hello,I am {{$name}}, I am {{$age}}
    $name = 'jack';
    $age = 18;
    return view('test/test',compact('name','age'));

compact 的特点是把数据提到外面。

3.2.2 扩展 - 模板赋值方法

1. with： with(key,value) — 键值对

// 单个变量赋值用with()方法
   return view('test/test')->with('title',$title); 
   
// 链式使用  html {{$hi." ".$world}} 输出
   return view('test.test')->with('hi','hi')->with('world','world');

2. compact ： 创建包含变量名和它们的值的数组,具体用法参考上面的例子。

3.3 Ajax传参

3.3.1 csrf_token处理

使用laravel的框架中,需要避免laravel自带反csrf攻击。可以采用以下处理方式：

1. 在页面添加

	<meta name="csrf-token" content="{{ csrf_token() }}">

3. 页面的token值，通过csrf_token()函数获取,可作为表单数据传递。

   data:{
            "_token" : "{{csrf_token()}}"
        }

4. 也可以写入请求头

   headers: {
             'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }

完整的js代码

        $.ajax({
            type: 'post',
            url: 'admin/store', 
            data:{
                "score" : score,
                "_token" : "{{csrf_token()}}"
            },
            headers: {
               'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            },
            beforeSend:function(){
                console.log(score);
            },
            success: function(data) {
                console.log(data);
            }
        });

控制器代码：

class TestController extends Controller
{
   public function store(){
       return "success";
   }
}

路由web.php

// 指向页面
Route::any('/admin', function () {
   return view('hello');
});
//ajax pos t传参 url
Route::post('/admin/store', 'TestController@store');

踩过的坑：我后来把ajax放在了.js文件里，没成功，还是建议写在前端页面里。

3.3.2 获取参数

use Illuminate\Http\Request;
// 1. Controller内的方法
    public function store(Request $request){
        $score = $request->score;
        return $score;
    }
// 2. Request其他获取参数的方法
$request->except('_token'); // 获取除_token的data
request->input(); // 获取 all 
request->input('email'); // 获取 key 为 email

参考文档

[1] Laravel模板继承