在本篇文章中,我们将尝试构建一个带后台的简单博客系统。我们将会使用到 路由、MVC、Eloquent ORM 和 blade 视图系统。
简单博客系统规划我们在教程一中已经新建了一个继承自 Eloquent Model 类的 Article 类,使用 migration 建立了数据表并使用 seeder 填入了测试数据。我们的博客系统暂时将只管理这一种资源:后台需要使用账号密码登录,进入后台之后,可以新增、修改、删除文章;前台显示文章列表,并在点击标题之后显示出文章全文。
下面我们正式开始。
搭建前台前台的搭建是最简单的,我先带大家找找感觉。
修改路由删掉
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
Route::get('/',<span style="color: #0000ff">function<span style="color: #000000"> () {<span style="color: #0000ff">return <span style="color: #008080">date("Y-m-d H:i:s"<span style="color: #000000">);});
将Route::get('/home','HomeController@index')->name('home');
改为 Route::get('/','HomeController@index')->name('home');
,现在我们系统的首页就落到了 App\http\Controllers\HomeController
类的 index
方法上了。
将 learnlaravel5/app/http/Controllers/HomeController.PHP
的 index 函数我们之前加的 Exception 那行代码删除,就只剩一行代码了:return vIEw('home');
,这个很好理解,返回名叫 home 的视图给用户。这个视图文件在哪里呢?在 learnlaravel5/resources/vIEws/home.blade.PHP
,blade 是 Laravel 视图引擎的名字,会对视图文件进行加工。
blade 引擎会对视图文件进行预处理,帮我们简化一些重复性很高的 echo、foreach 等 PHP 代码。blade 还提供了一个灵活强大的视图组织系统。打开 home.blade.PHP
:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
@<span style="color: #0000ff">extends('layouts.app'<span style="color: #000000">)@section('content'<span style="color: #000000">)<div <span style="color: #0000ff">class="container"><div <span style="color: #0000ff">class="row"><div <span style="color: #0000ff">class="col-md-8 col-md-offset-2"><div <span style="color: #0000ff">class="panel panel-default"><div <span style="color: #0000ff">class="panel-heading">Dashboard<div <span style="color: #0000ff">class="panel-body"><span style="color: #000000"> @<span style="color: #0000ff">if (session('status'<span style="color: #000000">))<div <span style="color: #0000ff">class="alert alert-success"><span style="color: #000000"> {{ session('status'<span style="color: #000000">) }}<span style="color: #000000"> @<span style="color: #0000ff">endif<span style="color: #000000"> You are logged in!<span style="color: #000000">@endsection<a class="user-mention" href="https://github.com/extends" data-hovercard-type="user" data-hovercard-url="/hovercards?user_ID=727802" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self">@extends('layouts.app')
这表示此视图的基视图是 learnlaravel5/resources/vIEws/layouts/app.blade.PHP
。这个函数还隐含了一个小知识:在使用名称查找视图的时候,可以使用 . 来代替 / 或 \。
这两个标识符之间的代码,会被放到基视图的 @yIEld('content')
中进行输出。
首先删除 learnlaravel5/vendor/laravel/framework/src/Illuminate/Routing/Controllerdispatcher.PHP
中 dispatch
函数里我们加的的 var_dump 代码,否则会出现奇怪的页面。访问 <a href="http://fuck.io:1024/" rel="nofollow">http://fuck.io:1024 ,不出意外的话,你会看到这个页面:
<a href="https://camo.githubusercontent.com/be32acb9dae82b79ab062b51f210ade43d5409d8/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130323334383632313836332e6a7067" rel="noopener noreferrer" target="_blank"><img src="https://camo.githubusercontent.com/be32acb9dae82b79ab062b51f210ade43d5409d8/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130323334383632313836332e6a7067" alt="" data-canonical-src="https://www.jb51.cc/res/2019/01-31/10/32aaada3bd392cfa1494b9af2142acee.jpg">
为什么需要登录呢?怎么去掉这个强制登录呢?删掉 HomeController 中的构造函数即可:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
<span style="color: #0000ff">public <span style="color: #0000ff">function<span style="color: #000000"> __construct(){<span style="color: #800080">$this->mIDdleware('auth'<span style="color: #000000">);}
这个函数会在控制器类生成对象后第一时间自动载入一个名为 auth 的中间件,正是这一步导致了首页需要登录。删除构造函数之后,重新访问 <a href="http://fuck.io:1024/" rel="nofollow">http://fuck.io:1024 ,页面应该就会直接出来了。这里要注意两点:① 一定要重新访问,不要刷新,因为此时页面的 url 其实是 <a href="http://fuck.io:1024/login" rel="nofollow">http://fuck.io:1024/login ② 这个页面跟之前的欢迎页虽然看起来一毛一样,但其实文字是不同的,注意仔细观察哦。
向视图文件输出数据既然 Controller - VIEw 的架构已经运行,下一步就是引入 Model 了。Laravel 中向视图传数据非常简单:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
<span style="color: #0000ff">public <span style="color: #0000ff">function<span style="color: #000000"> index(){
<span style="color: #0000ff"> return vIEw('home',$assign);
<span style="color: #000000"> }
或
<div class="cnblogs_code">
<span style="color: #0000ff">public <span style="color: #0000ff">function<span style="color: #000000"> index(){<span style="color: #0000ff">return vIEw('home')->withArticles(\App\Article::all());
<span style="color: #000000"> }
2016 版教程里很多人看到这段代码都十分不解,这里解释一下:
\App\Article::all() 是采用绝对命名空间
方式对 Article 类的调用。
withArticles 是我定义的方法,Laravel 并不提供,这也是 Laravel 优雅的一个表现:Laravel VIEw 采用 __call 来 handle 对未定义 function 的调用,其作用很简单:给视图系统注入一个名为 $articles
的变量,这段代码等价于 ->with('articles',\App\Article::all())
。
展开讲一下,->withFoobar(100)
等价于 ->with('foo_bar',100)
,即驼峰变量会被完全转换为蛇形变量。
修改视图文件 learnlaravel5/resources/vIEws/home.blade.PHP
的代码为:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
@<span style="color: #0000ff">extends('layouts.app'<span style="color: #000000">)@section('content'<span style="color: #000000">)<div ID="Title" style="text-align: center;">Learn Laravel 5<div style="padding: 5px; Font-size: 16px;">Learn Laravel 5<div ID="content"><span style="color: #000000"> @<span style="color: #0000ff">foreach (<span style="color: #800080">$articles <span style="color: #0000ff">as <span style="color: #800080">$article<span style="color: #000000">)<li style="margin: 50px 0;"><div <span style="color: #0000ff">class="Title"><a href="{{ url('article/'.<span style="color: #800080">$article->ID) }}">{{ <span style="color: #800080">$article->Title }}<div <span style="color: #0000ff">class="body">{{ <span style="color: #800080">$article->body }}<span style="color: #000000"> @<span style="color: #0000ff">endforeach<span style="color: #000000">@endsection
刷新,得到:
<a href="https://camo.githubusercontent.com/039277caa2cdae51920d400d9deb1c31ba43b37e/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333036303335383031362e6a7067" rel="noopener noreferrer" target="_blank"><img src="https://camo.githubusercontent.com/039277caa2cdae51920d400d9deb1c31ba43b37e/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333036303335383031362e6a7067" alt="" data-canonical-src="https://www.jb51.cc/res/2019/01-31/10/fb68a183e548a871cb597cdd0fbbe4c7.jpg">
如果看到以上页面,恭喜你,Laravel 初体验成功!
调整视图前台页面是不应该有顶部的菜单栏的,特别是还有注册、登录之类的按钮。接下来我们修改视图内容为:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
<HTML lang="en"><Meta charset="utf-8"><Meta http-equiv="X-UA-Compatible" content="IE=edge"><Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1">Learn Laravel 5<link href="//cdn.bootCSS.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS" rel="stylesheet"><script src="//cdn.bootCSS.com/jquery/2.2.4/jquery.min.Js"><script src="//cdn.bootCSS.com/bootstrap/3.3.7/Js/bootstrap.min.Js"><div ID="Title" style="text-align: center;">Learn Laravel 5<div style="padding: 5px; Font-size: 16px;">Learn Laravel 5<div ID="content"><span style="color: #000000"> @<span style="color: #0000ff">foreach (<span style="color: #800080">$articles <span style="color: #0000ff">as <span style="color: #800080">$article<span style="color: #000000">)<li style="margin: 50px 0;"><div <span style="color: #0000ff">class="Title"><a href="{{ url('article/'.<span style="color: #800080">$article->ID) }}">{{ <span style="color: #800080">$article->Title }}<div <span style="color: #0000ff">class="body">{{ <span style="color: #800080">$article->body }}<span style="color: #000000"> @<span style="color: #0000ff">endforeach
此视图文件变成了一个独立视图,不再有基视图,并且将 jquery 和 bootstrap 替换为了国内的 CDN,更快更稳定了。
同理我们修改 learnlaravel5/resources/vIEws/layouts/app.blade.PHP
:
① 删除 <script src="{{ asset('Js/app.Js') }}">
② 替换 <link href="{{ asset('CSS/app.CSS') }}" rel="stylesheet">
为
<div class="highlight highlight-text-HTML-basic"><div class="cnblogs_code">
<link href="//cdn.bootCSS.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS" rel="stylesheet"><script src="//cdn.bootCSS.com/jquery/2.2.4/jquery.min.Js"><script src="//cdn.bootCSS.com/bootstrap/3.3.7/Js/bootstrap.min.Js">
接下来我们来着手搭建后台。
搭建后台生成控制器我们使用 Artisan 工具来生成控制器文件及代码:
<div class="highlight highlight-source-shell"><div class="cnblogs_code">
PHP artisan make:controller admin/HomeController
成功之后,我们就可以看到 artisan 帮我们建立的文件夹及控制器文件了:
<a href="https://camo.githubusercontent.com/7810111fd8becaa97ace0c5cfc9bd8fa2bf3e5f6/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031362d30362d30332d31343633373636303031343230332e6a7067" rel="noopener noreferrer" target="_blank"><img src="https://camo.githubusercontent.com/7810111fd8becaa97ace0c5cfc9bd8fa2bf3e5f6/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031362d30362d30332d31343633373636303031343230332e6a7067" alt="" data-canonical-src="https://www.jb51.cc/res/2019/01-31/10/a34b338bc45ce5c0ec99705474f08448.jpg">
增加路由我们要使用路由组来将后台页面置于“需要登录才能访问”的中间件下,以保证安全。在 web.PHP 里增加下面三行:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
Route::group(['mIDdleware' => 'auth','namespace' => 'admin','prefix' => 'admin'],<span style="color: #0000ff">function<span style="color: #000000">() { Route::get('/','HomeController@index'<span style="color: #000000">);});
上一篇文章中我们已经接触到了路由组,这是 Laravel 的另一个伟大创造。路由组可以给组内路由一次性增加 命名空间、uri 前缀、域名限定、中间件 等属性,并且可以多级嵌套,异常强大。路由组中文文档在此:<a href="https://d.laravel-china.org/docs/5.5/routing#route-groups" rel="nofollow">https://d.laravel-china.org/docs/5.5/routing#route-groups
上面的三行代码的功能简单概括就是:访问这个页面必须先登录,若已经登录,则将 http://fuck.io:1024/admin
指向 App\http\Controllers\admin\HomeController
的 index 方法。其中需要登录由 mIDdleware
定义,/admin
由 prefix
定义,admin
由 namespace
定义,HomeController
是实际的类名。
在新生成的 learnlaravel5/app/http/Controllers/admin/HomeController.PHP
文件中增加一个 function:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
<span style="color: #0000ff">public <span style="color: #0000ff">function<span style="color: #000000"> index(){<span style="color: #0000ff">return vIEw('admin/home'<span style="color: #000000">);}新建后台首页视图文件
在 learnlaravel5/resources/vIEws/
目录下新建一个名为 admin 的文件夹,在 admin 内新建一个名为 home.blade.PHP
的文件,填入代码:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
@<span style="color: #0000ff">extends('layouts.app'<span style="color: #000000">)@section('content'<span style="color: #000000">)<div <span style="color: #0000ff">class="container"><div <span style="color: #0000ff">class="row"><div <span style="color: #0000ff">class="col-md-10 col-md-offset-1"><div <span style="color: #0000ff">class="panel panel-default"><div <span style="color: #0000ff">class="panel-heading">Learn Laravel 5 后台<div <span style="color: #0000ff">class="panel-body"><a href="{{ url('admin/article') }}" <span style="color: #0000ff">class="btn btn-lg btn-success col-xs-12">管理文章<span style="color: #000000">@endsection修改 Auth 系统登陆成功之后的跳转路径
修改 learnlaravel5/app/http/Controllers/Auth/LoginController.PHP
中相应的代码为:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
<span style="color: #0000ff">protected <span style="color: #800080">$redirectTo = '/admin';尝试登录
访问 <a href="http://fuck.io:1024/admin" rel="nofollow">http://fuck.io:1024/admin ,它会跳转到登陆界面,输入邮箱和密码之后,你应该会看到如下页面:
<a href="https://camo.githubusercontent.com/f56c11b3924ac8e0bbf2c4d3aefa20376821bfce/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333039303236373233352e6a70673f743d33" rel="noopener noreferrer" target="_blank"><img src="https://camo.githubusercontent.com/f56c11b3924ac8e0bbf2c4d3aefa20376821bfce/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333039303236373233352e6a70673f743d33" alt="" data-canonical-src="https://www.jb51.cc/res/2019/01-31/10/8cf57a4b3df7d6e16e2f22f44004ddc6.jpg">
恭喜你,后台首页搭建完成!下面我们开始构建 Article 的后台管理功能。
构建 Article 后台管理功能让我们先尝试点一下 “管理文章”按钮,不出意外你将得到一个报错:
<a href="https://camo.githubusercontent.com/1aa9f0b2d15610fdff06a5e73c902a53a980691d/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333039313137323634352e6a7067" rel="noopener noreferrer" target="_blank"><img src="https://camo.githubusercontent.com/1aa9f0b2d15610fdff06a5e73c902a53a980691d/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333039313137323634352e6a7067" alt="" data-canonical-src="https://www.jb51.cc/res/2019/01-31/10/07be635ebddf8cbf269c6ccea1a68a12.jpg">
这是 Laravel 5.5 刚刚引入的新策略:404 错误不再报告详细信息,而是展示一个友好的 404 页面。
添加路由404 错误是访问了系统没有监听的路由导致的。下面我们要添加针对 http://fuck.io:1024/admin/article
的路由:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
Route::group(['mIDdleware' => 'auth','HomeController@index'<span style="color: #000000">); Route::get('article','ArticleController@index'<span style="color: #000000">);});
刷新,出现详细报错信息了:
<a href="https://camo.githubusercontent.com/35814a132cd945a044f10f2bc73f35a11872da13/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135333335353032312e6a7067" rel="noopener noreferrer" target="_blank"><img src="https://camo.githubusercontent.com/35814a132cd945a044f10f2bc73f35a11872da13/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135333335353032312e6a7067" alt="" data-canonical-src="https://www.jb51.cc/res/2019/01-31/10/813022f5cd676851912a217c140f39fe.jpg">
进步之道很多新手看到这个报错直接就慌了:什么鬼?全是英文看不懂呀。然后在文章下面把完整的错误栈全部粘贴出来。老实说我第一次见到 Laravel 报这个错也是完全没耐心去读,不过我还是复制了最明显的那句话“Class App\http\Controllers\admin\ArticleController does not exist”去 Google 了一下,从此我就再也没搜索过它了。
如果你遇到了奇怪的报错,不要慌,稳住,Google 一下,我们能赢。
新建控制器上图中的报错是控制器不存在。我们使用 Artisan 来新建控制器:
<div class="highlight highlight-source-shell"><div class="cnblogs_code">
PHP artisan make:controller admin/ArticleController
刷新,错误又变了:
<a href="https://camo.githubusercontent.com/eef2a12383699c72b7923af6214fa7b1a8567032/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135343939313933332e6a70673f743d35" rel="noopener noreferrer" target="_blank"><img src="https://camo.githubusercontent.com/eef2a12383699c72b7923af6214fa7b1a8567032/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135343939313933332e6a70673f743d35" alt="" data-canonical-src="https://www.jb51.cc/res/2019/01-31/10/1bd80ff7ff3341d15ab80dcdecc81a4a.jpg">
index 方法不存在。让我们新增 index 方法:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
<span style="color: #0000ff">public <span style="color: #0000ff">function<span style="color: #000000"> index(){<span style="color: #0000ff">return vIEw('admin/article/index')->withArticles(Article::<span style="color: #000000">all());}新建视图
上面我们已经新建过视图,现在应该已经轻车熟路了。在 learnlaravel5/resources/vIEws/admin
下新建 article 文件夹,在文件夹内新建一个 index.blade.PHP 文件,内容如下:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
@<span style="color: #0000ff">extends('layouts.app'<span style="color: #000000">)@section('content'<span style="color: #000000">)<div <span style="color: #0000ff">class="container"><div <span style="color: #0000ff">class="row"><div <span style="color: #0000ff">class="col-md-10 col-md-offset-1"><div <span style="color: #0000ff">class="panel panel-default"><div <span style="color: #0000ff">class="panel-heading">文章管理<div <span style="color: #0000ff">class="panel-body"><span style="color: #000000"> @<span style="color: #0000ff">if (<span style="color: #008080">count(<span style="color: #800080">$errors) > 0<span style="color: #000000">)<div <span style="color: #0000ff">class="alert alert-danger"><span style="color: #000000"> {!! <span style="color: #008080">implode('',<span style="color: #800080">$errors->all()) !!<span style="color: #000000">}<span style="color: #000000"> @<span style="color: #0000ff">endif<a href="{{ url('admin/article/create') }}" <span style="color: #0000ff">class="btn btn-lg btn-primary">新增<span style="color: #000000"> @<span style="color: #0000ff">foreach (<span style="color: #800080">$articles <span style="color: #0000ff">as <span style="color: #800080">$article<span style="color: #000000">)[object Object]<div <span style="color: #0000ff">class="article"><div <span style="color: #0000ff">class="content"><a href="{{ url('admin/article/'.<span style="color: #800080">$article->ID.'/edit') }}" <span style="color: #0000ff">class="btn btn-success">编辑<form action="{{ url('admin/article/'.<span style="color: #800080">$article->ID) }}" method="POST" style="display: inline;"><span style="color: #000000"> {{ method_fIEld('DELETE'<span style="color: #000000">) }} {{ csrf_fIEld() }}<button type="submit" <span style="color: #0000ff">class="btn btn-danger">删除<span style="color: #000000"> @<span style="color: #0000ff">endforeach<span style="color: #000000">@endsection
刷新,错误又变
<a href="https://camo.githubusercontent.com/d610d8470d6f8babbc516537f25743217a792d30/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135363730353035302e6a70673f743d30" rel="noopener noreferrer" target="_blank"><img src="https://camo.githubusercontent.com/d610d8470d6f8babbc516537f25743217a792d30/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135363730353035302e6a70673f743d30" alt="" data-canonical-src="https://www.jb51.cc/res/2019/01-31/10/76f73dc0624e90e71a4a6f3a3c6275b0.jpg">
Article 类不存在?原因很简单:Article 类和当前控制器类不在一个命名空间路径下,不能直接调用。解决办法就是主动导入 \App\Article
类:
<div class="highlight highlight-text-HTML-PHP"><div class="cnblogs_code">
<?<span style="color: #000000">PHPnamespace App\http\Controllers\admin;<span style="color: #0000ff">use<span style="color: #000000"> Illuminate\http\Request;<span style="color: #0000ff">use<span style="color: #000000"> App\http\Controllers\Controller;<span style="color: #0000ff">use<span style="color: #000000"> App\Article;<span style="color: #0000ff">class ArticleController <span style="color: #0000ff">extends<span style="color: #000000"> Controller{....
如果你还不熟悉命名空间,请阅读<a href="https://lvwenhan.com/PHP/401.HTML" rel="nofollow">《PHP 命名空间 解惑》。
检查成果再次刷新,你应该能看到如下画面:
<a href="https://camo.githubusercontent.com/fc17f69a54a49b54bd5f64cc6de34f47c65e2248/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135383433363434312e6a7067" rel="noopener noreferrer" target="_blank"><img src="https://camo.githubusercontent.com/fc17f69a54a49b54bd5f64cc6de34f47c65e2248/687474703a2f2f716e2e6c7677656e68616e2e636f6d2f323031372d31312d31302d31353130333135383433363434312e6a7067" alt="" data-canonical-src="https://www.jb51.cc/res/2019/01-31/10/4d687a3c8ca2fbdd93f32f5250903138.jpg">
如果你没到这个画面也不用担心,根据错误提示去 Google 吧,一定能解决的。
新增、编辑、删除功能怎么办?这三个功能我将在下一篇教程与大家分享,这是 2015 版 Laravel 教程做的不够好的地方,其实这里才是最应该掰开揉碎仔细讲解的地方。
<p style="text-align: right"><span style="Font-size: 12px">转载他处,侵权联系删除
总结以上是内存溢出为你收集整理的Laravel 系列入门教程(三)【最适合中国人的 Laravel 教程】全部内容,希望文章能够帮你解决Laravel 系列入门教程(三)【最适合中国人的 Laravel 教程】所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)