Route::resource和Form-Model-Binding_html/css_WEB-ITnose
关于Route::resource
app/Http/routes.phpRoute::group(['middleware' => ['web']], function () { Route::get('/articles','ArticlesController@index'); Route::get('/articles/create','ArticlesController@create'); Route::get('/articles/{id}','ArticlesController@show'); Route::post('/articles','ArticlesController@store'); Route::get('/articles/{id}/edit','ArticlesController@edit');});
一般我们的一个普通网站的文章有这些url,这些url分别是文章编辑,创建,查看列表,查看文章内容等,laravel框架对于这些有规律的url做了一个叫RESTful Resource Controllers的可重用的资源控制器
php artisan route:list //用这个命令可以查看当前laravel项目的路由情况+--------+----------+--------------------+------+------------------------------------------------+------------+| Domain | Method | URI | Name | Action | Middleware |+--------+----------+--------------------+------+------------------------------------------------+------------+| | POST | articles | | App\Http\Controllers\ArticlesController@store | web || | GET|HEAD | articles | | App\Http\Controllers\ArticlesController@index | web || | GET|HEAD | articles/create | | App\Http\Controllers\ArticlesController@create | web || | GET|HEAD | articles/{id} | | App\Http\Controllers\ArticlesController@show | web || | GET|HEAD | articles/{id}/edit | | App\Http\Controllers\ArticlesController@edit | web |+--------+----------+--------------------+------+------------------------------------------------+------------+
改为使用resource
app/Http/routes.phpRoute::group(['middleware' => ['web']], function () { Route::resource('/articles','ArticlesController'); //将之前的一批路由改为这个。}); php artisan route:list+--------+-----------+--------------------------+------------------+-------------------------------------------------+------------+| Domain | Method | URI | Name | Action | Middleware |+--------+-----------+--------------------------+------------------+-------------------------------------------------+------------+| | GET|HEAD | articles | articles.index | App\Http\Controllers\ArticlesController@index | web || | POST | articles | articles.store | App\Http\Controllers\ArticlesController@store | web || | GET|HEAD | articles/create | articles.create | App\Http\Controllers\ArticlesController@create | web || | DELETE | articles/{articles} | articles.destroy | App\Http\Controllers\ArticlesController@destroy | web || | PUT|PATCH | articles/{articles} | articles.update | App\Http\Controllers\ArticlesController@update | web || | GET|HEAD | articles/{articles} | articles.show | App\Http\Controllers\ArticlesController@show | web || | GET|HEAD | articles/{articles}/edit | articles.edit | App\Http\Controllers\ArticlesController@edit | web |+--------+-----------+--------------------------+------------------+-------------------------------------------------+------------+//再次查看路由,依旧会生成这些有规律的常用的路由list,不过需要注意一些路由,有些是用了PATCH方法,这个是因为浏览器本身只支持get和post,对于其他的方法是无法处理的,所以laravel会在表单的里面提供支持这些其他的方法的语法,当然,在这里我们只需要知道有这些路由,这些路由有这些方法
详情参考:https://laravel.com/docs/5.2/controllers#restful-resource-controllers
在controller里面编写edit方法,
app/Http/Controllers/ArticlesController.php public function edit($id){ $article = Articles::findOrFail($id); //findOrFail方法是laravel的model的提供的可以处理model数据的方法,而model是直接关联数据库的,所以可以理解为直接操作数据库的方法 //这里是查找主键为$id的项,然后返回一个model return view('articles.edit',compact('article')); }
以下是findOrFail的介绍
Model|Collection findOrFail(mixed $id, array $columns = array('*'))Find a model by its primary key or throw an exception.Parametersmixed $id array $columns Return ValueModel|Collection
创建edit的blade模板
resources/views/articles/edit.blade.php@extends('layout.app')@section('content') <h1 id="article-title">{{$article->title}}</h1> //用这里来验证是否能够查找到$article的title信息 @if($errors->any()) <ul class="list-group"> @foreach($errors->all() as $error) <li class="list-group-item list-group-item-danger">{{$error}}</li> @endforeach </ul> @endif@stop
查看数据库
id title content publish_at created_at updated_at5 我是一篇新文章 你好 2016-05-21 00:00:00 2016-05-21 07:32:48 2016-05-21 07:32:48
在浏览器访问http://localhost:8000/articles/5/edit出来的是正确的title
编辑PATCH method
确认edit模板和edit方法是正常之后,再次修改edit模板
resources/views/articles/edit.blade.php@extends('layout.app')@section('content') <h1 id="article-title">{{$article->title}}</h1> {!! Form::open(['method'=>'PATCH','url'=>'/articles'.$article->id]) !!} //因为之前的提到的用resource路由,其中有一个路由是用PATCH方法的,所以在这里写 <!--- Title Field ---> <div class="form-group"> {!! Form::label('title', 'Title:') !!} {!! Form::text('title', null, ['class' => 'form-control']) !!} </div> <!--- Content Field ---> <div class="form-group"> {!! Form::label('content', 'Content:') !!} {!! Form::textarea('content', null, ['class' => 'form-control']) !!} </div> <!--- Field ---> <div class="form-group"> {!! Form::label('publish_at', 'publish_at:') !!} {!! Form::date('publish_at', date('Y-m-d'), ['class' => 'form-control']) !!} </div> {!! Form::submit('发表文章',['class'=>'btn btn-primary form-control']) !!} {!! Form::close() !!} @if($errors->any()) <ul class="list-group"> @foreach($errors->all() as $error) <li class="list-group-item list-group-item-danger">{{$error}}</li> @endforeach </ul> @endif@stop
检查网页源代码
< !DOCTYPE html><html><head> <title>Laravel</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/></head><body> <div class="container"> <h1 id="我是一篇新文章">我是一篇新文章</h1> <form method="POST" action="http://localhost:8000/articles5" accept-charset="UTF-8"><input name="_method" type="hidden" value="PATCH"/><input name="_token" type="hidden" value="3maFAh6SfF8A7BfQ3CCtUsdCz8wjF9F5AAi99tb1"/> //可以发现会自动生成一个input,里面是方法PATCH,通过这种hacker的方式来将一些自定义的method来使用,很方便 <!--- Title Field ---> <div class="form-group"> <label for="title">Title:</label> <input class="form-control" name="title" type="text" id="title"/> </div> <!--- Content Field ---> <div class="form-group"> <label for="content">Content:</label> <textarea class="form-control" name="content" cols="50" rows="10" id="content"></textarea> </div> <!--- Field ---> <div class="form-group"> <label for="publish_at">publish_at:</label> <input class="form-control" name="publish_at" type="date" value="2016-05-24" id="publish_at"/> </div> <input class="btn btn-primary form-control" type="submit" value="发表文章"/> </form> </div> </body></html>
关于Form-Model-Binding
将
{!! Form::open(['method'=>'PATCH','url'=>'/articles'.$article->id]) !!}
改为
//这里需要注意的是这个就是改为Form-Model-Binding{!! Form::model($article,['method'=>'PATCH','url'=>'/articles'.$article->id]) !!}
Form-Model-Binding是将model和from进行绑定,这样可以实现自动将model的数据写入form表单,对于编辑页面,要出现编辑之前的数据的话,很有用。
再次检查网页源码
< !DOCTYPE html><html><head> <title>Laravel</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"/></head><body> <div class="container"> <h1 id="我是一篇新文章">我是一篇新文章</h1> <form method="POST" action="http://localhost:8000/articles5" accept-charset="UTF-8"><input name="_method" type="hidden" value="PATCH"/><input name="_token" type="hidden" value="3maFAh6SfF8A7BfQ3CCtUsdCz8wjF9F5AAi99tb1"/> <!--- Title Field ---> <div class="form-group"> <label for="title">Title:</label> <input class="form-control" name="title" type="text" value="我是一篇新文章" id="title"/> //title自动输入了 </div> <!--- Content Field ---> <div class="form-group"> <label for="content">Content:</label> <textarea class="form-control" name="content" cols="50" rows="10" id="content">你好</textarea> //内容也是 </div> <!--- Field ---> <div class="form-group"> <label for="publish_at">publish_at:</label> <input class="form-control" name="publish_at" type="date" value="2016-05-24" id="publish_at"/> </div> <input class="btn btn-primary form-control" type="submit" value="发表文章"/> </form> </div> </body></html>

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

本文討論了HTML標籤,和和關注其語義與表現用途及其對SEO和可訪問性的影響之間的差異。
