2016 版 Laravel 系列入门教程(三)【最适合中国人的 Laravel 教程】
本教程示例代码见: https://github.com/johnlui/Learn-Laravel-5
在任何地方卡住,最快的办法就是去看示例代码。
在本篇文章中,我们将尝试构建一个带后台的简单博客系统。我们将会使用到 路由、MVC、Eloquent ORM 和 blade 视图系统。
简单博客系统规划
我们在教程一中已经新建了一个 Eloquent 的 Model 类 Article,使用 migration 建立了数据表并使用 seeder 填入了测试数据。我们的博客系统暂时将只管理这一种资源:后台需要使用账号密码登录,进入后台之后,可以新增、修改、删除文章;前台显示文章列表,并在点击标题之后显示出文章全文。
下面我们正式开始。
搭建前台
前台的搭建是最简单的,我先带领大家找找感觉。
修改路由
删掉
Route::get('/', function () { return view('welcome'); });
将 /home 那一行修改为 Route::get('/', 'HomeController@index');
,现在我们系统的首页就落到了 App\Http\Controllers\HomeController 类的 index 方法上了。
查看 HomeController 的 index 函数
learnlaravel5/app/Http/Controllers/HomeController.php
的 index 函数只有一行代码: return view('home');
,这个很好理解,返回名字叫 home 的视图给用户。这个视图文件在哪里呢?在learnlaravel5/resources/views/home.blade.php
,blade 是 Laravel 视图系统的名字。
blade 浅析
blade 会对视图文件进行预处理,帮我们简化一些重复性很高的 echo、foreach 等 PHP 代码。blade 还提供了一个灵活强大的视图组织系统。打开 home.blade.php :
@extends('layouts.app')@section('content') <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="panel panel-default"> <div class="panel-heading">Dashboard</div> <div class="panel-body"> You are logged in! </div> </div> </div> </div> </div> @endsection
@extends('layouts.app')
这表示此视图的基视图是learnlaravel5/resources/views/layouts/app.blade.php
。这个函数还隐含了一个小知识:在使用名称查找视图的时候,可以使用 . 来代替 / 或 \。
@section('content') ... @endsection
这两个标识符之前的代码,会被放到基视图的 @yield('content')
中进行输出。
访问首页
访问 http://fuck.io:1024 ,不出意外的话,你会看到这个页面:
为什么需要登录呢?怎么去掉这个强制登录呢?删掉 HomeController 中的构造函数即可:
public function __construct() { $this->middleware('auth'); }
这个函数会在控制器类初始化的时候自动载入一个名为 auth 的中间件,正式这一步导致了首页需要登录。删除构造函数之后,重新访问 http://fuck.io:1024 ,页面应该就会直接出来了。这里要注意两点:① 一定要重新访问,不要刷新,因为此时页面的 url 其实是 http://fuck.io:1024/login ② 这个页面跟之前的欢迎页虽然看起来一毛一样,但其实文字是不同的,注意仔细观察哦。
向视图文件输出数据
既然 Controller - View 的架构已经运行,下一步就是引入 Model 了。Laravel 中向视图传数据非常简单:
public function index() { return view('home')->withArticles(\App\Article::all()); }
修改视图文件
修改视图文件 learnlaravel5/resources/views/home.blade.php
的代码为:
@extends('layouts.app')@section('content')<div id="title" style="text-align: center;"> <h1>Learn Laravel 5</h1> <div style="padding: 5px; font-size: 16px;">Learn Laravel 5</div> </div> <hr> <div id="content"> <ul> @foreach ($articles as $article) <li style="margin: 50px 0;"> <div class="title"> <a href="{{ url('article/'.$article->id) }}"> <h4>{{ $article->title }}</h4> </a> </div> <div class="body"> <p>{{ $article->body }}</p> </div> </li> @endforeach </ul> </div> @endsection
刷新
如果你得到以上页面,恭喜你,Laravel 初体验成功!
调整视图
前台页面是不应该有顶部的菜单栏的,特别是还有注册、登录之类的按钮。修改视图文件为:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Learn Laravel 5</title> <link href="//cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <div id="title" style="text-align: center;"> <h1>Learn Laravel 5</h1> <div style="padding: 5px; font-size: 16px;">Learn Laravel 5</div> </div> <hr> <div id="content"> <ul> @foreach ($articles as $article) <li style="margin: 50px 0;"> <div class="title"> <a href="{{ url('article/'.$article->id) }}"> <h4>{{ $article->title }}</h4> </a> </div> <div class="body"> <p>{{ $article->body }}</p> </div> </li> @endforeach </ul> </div> </body> </html>
此视图文件变成了一个独立视图,不再有基视图,并且将 jQuery 和 BootStrap 替换为了国内的 CDN,更快更稳定了。
同理我们修改 learnlaravel5/resources/views/layouts/app.blade.php
为如下代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel</title> <link href="//cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="//cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </head> <body id="app-layout"> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <!-- Collapsed Hamburger --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Branding Image --> <a class="navbar-brand" href="{{ url('/') }}"> Laravel </a> </div> <div class="collapse navbar-collapse" id="app-navbar-collapse"> <!-- Left Side Of Navbar --> <ul class="nav navbar-nav"> <li><a href="{{ url('/home') }}">Home</a></li> </ul> <!-- Right Side Of Navbar --> <ul class="nav navbar-nav navbar-right"> <!-- Authentication Links --> @if (Auth::guest()) <li><a href="{{ url('/login') }}">Login</a></li> <li><a href="{{ url('/register') }}">Register</a>
2016 版 Laravel 系列入门教程(三)【最适合中国人的 Laravel 教程】相关推荐
- 2016 版 Laravel 系列入门教程(一)
https://www.golaravel.com/post/2016-ban-laravel-xi-lie-ru-men-jiao-cheng-yi/ 2016 版 Laravel 系列入门教程(一 ...
- php laravel 入门教程,Laravel 5 系列入门教程(一)【最适合中国人的 Laravel 教程】...
Laravel 5 系列入门教程(一)[最适合中国人的 Laravel 教程] 2015-3-7 / 阅读数:314392 / 分类: Laravel 十分建议学习 5.5,跟 5.0 比变化非常大. ...
- 2016 版 Laravel 系列入门教程(一)【最适合中国人的 Laravel 教程】
本教程示例代码见: https://github.com/johnlui/Learn-Laravel-5 在任何地方卡住,最快的办法就是去看示例代码. 本文基于 Laravel 5.2 版本,无奈 5 ...
- 2016 版 Laravel 系列入门教程(二)【最适合中国人的 Laravel 教程】
本教程示例代码见: https://github.com/johnlui/Learn-Laravel-5 在任何地方卡住,最快的办法就是去看示例代码. 本篇文章中,我将跟宝宝们一起学习 Laravel ...
- 2016 版 Laravel 系列入门教程(四)【最适合中国人的 Laravel 教程】
本教程示例代码见: https://github.com/johnlui/Learn-Laravel-5 在任何地方卡住,最快的办法就是去看示例代码. 本篇文章中,我将跟大家一起实现 Article ...
- Laravel 系列入门教程(一)【最适合中国人的 Laravel 教程】
热烈庆祝 Laravel 5.5 LTS 发布! 实际上 Laravel 上一个 LTS 选择 5.1 是非常不明智的,因为 5.2 增加了许许多多优秀的特性.现在好了,大家都用最新的长期支持版本 5 ...
- Swift中文教程(三)--流程控制
Swift中文教程(三)--流程控制 原文:Swift中文教程(三)--流程控制 Swift用if和switch编写条件控制语句,用for-in,for,while和do-while编写循环.条件控制 ...
- Linux Shell脚本入门教程系列之(三)Shell变量
本文是Linux Shell脚本系列教程的第(三)篇,更多shell教程请看:Linux Shell脚本系列教程 Shell作为一种高级的脚本类语言,也是支持自定义变量的.继上一篇之后,今天就为大家介 ...
- 数据科学教程:R语言与DataFrame[2016版]
数据科学教程:R语言与DataFrame[2016版] r HarryZhu 2016年03月16日发布 保存 标签:至少1个,最多5个 r× 开发语言 平台框架 服务器 数据库和缓存 开发工具 系统 ...
最新文章
- iOS 线程之GCD的高级使用方法
- c语言表达式和表达式语句的区别,C语言中表达式和表达式语句的区别(什么又叫做表达式)?...
- Win64 驱动内核编程-2.基本框架(安装.通讯.HelloWorld)
- 如何调试Android Framework?
- Flume-NG一些注意事项(转)
- 【android】窗口管理
- 柴静《认识的人 了解的事》
- SpringBoot入门到精通_第6篇 _必知必会
- [转]一千行MySQL学习笔记
- 手动安装pytorch gpu版本 (cpu版本同理)
- 微信们正在成为“被模仿者”!中国互联网现状及趋势报告
- POJ3614 Sunscreen【贪心】
- 分享一个vue项目“脚手架”项目的实现步骤
- 技术分享|Javascript高级教程学习指南
- 一本教你如何编写高质量代码的图书:《设计模式之美》
- 百度开发者大会高层讲稿
- 魔兽世界服务器同时在线人数,魔兽世界服务器人数,魔兽世界服务器人数查询...
- 列举1990年到2000年间的闰年
- java图片的在线预览_【Java】web实现图片在线预览
- Windows高效桌面壁纸