实现简单blog展示_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

实现简单blog展示_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:48 AM

创建一个index主页列出所有文章

生成路由

app/Http/routes.php

Route::get('/articles','ArticlesController@index');

生成一个controller

php artisan make:controller ArticlesController

namespace App\Http\Controllers;use App\Articles;  //当你使用Articles这个model的时候，phpstorme会帮你默认导入这个类use Illuminate\Http\Request;use App\Http\Requests;class ArticlesController extends Controller{    //    public function index(){  //因为路由里面我们使用了ArticlesController@index，所以这里是index方法        $articles = Articles::all();         //这里需要注意的是这个Articles是我们创建的那个Articles的model，在phpstorme会有提示，这里的all方法是返回这个model查询到的所有数据，这些数据是提前输入好的        return $articles;    }}

访问localhost:8000/articles会出现以下内容，laravel会默认返回json格式的数据

本页JSON数据由FeHelper进行自动格式化，若有任何问题，点击这里提交 意见反馈[{"id": 1,"title": "title","content": "content","publish_at": "2016-05-14 18:04:44","created_at": "2016-05-14 18:04:48","updated_at": "2016-05-14 18:04:48"},{"id": 2,"title": "title2","content": "content2","publish_at": "2016-05-15 04:24:48","created_at": "2016-05-14 18:07:42","updated_at": "2016-05-14 18:07:42"},{"id": 3,"title": "second title","content": "second content","publish_at": "2016-05-14 18:15:38","created_at": "2016-05-14 18:15:38","updated_at": "2016-05-14 18:15:38"}]

运用已有的blade知识，配置一个layout

例如

resources/views/layout/app.blade.phplayout只是一个概念，这个文件主要是为了创造一个模板容器，用来处理那些可以复用的代码，例如一些html的head，body标签

< !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">        @yield('content')    </div>    @yield(('footer'))</body></html>

创建刚才控制器指定的那个blade文件

resources/views/articles/index.blade.php

@extends('layout.app')@section('content')    <h1 id="hello">hello</h1>    <hr />    @foreach($articles as $article)  //循环输出        <h2 id="article-title">{{$article->title}}</h2>        <article>            <div>                {{$article->content}}            </div>        </article>    @endforeach@stop

创建一个文章页，列出单个文章

单个文章，需要有文章id在url里面区分，所以特意建立了一个新的路由和一个新的controller方法show

Route::get('/articles/{id}','ArticlesController@show'); {id}传入变量参数，用大括号来标识，传入变量到controller的show方法

app/Http/Controllers/ArticlesController.php

class ArticlesController extends Controller{    //    public function index(){        $articles = Articles::all();//        return $articles;        return view('articles.index',compact('articles'));    }    public function show($id){    //获取从路由传入的$id变量        $article = Articles::find($id); //使用laravel提供的find方法查询数据库//        return $articles;        return view('articles.show',compact('article'));    }}

resources/views/articles/show.blade.php

@extends('layout.app')@section('content')    <h1 id="hello">hello</h1>    <hr />    @foreach($articles as $article)        {{--<h2 id="a-href-articles-article-id-article-title-a"><a href="/articles/{{$article->id}}">{{$article->title}}</a></h2>--}}{{--        <h2 id="a-href-url-articles-article-id-article-title-a"><a href="{{url('articles',$article->id)}}">{{$article->title}}</a></h2>--}}        <h2 id="a-href-action-ArticlesController-show-article-id-article-title-a"><a href="{{action('ArticlesController@show',[$article->id])}}">{{$article->title}}</a></h2>        //这里有三种方法来传递变url量到blade中，第一种是直接写的，第二种是通过url方法，使用的路由方法，第三种是通过action方法，使用的是controller方式        <article>            <div>                {{$article->content}}            </div>        </article>    @endforeach@stop

本文由 PeterYuan 创作，采用署名-非商业性使用 2.5 中国大陆进行许可。转载、引用前需联系作者，并署名作者且注明文章出处。神一样的少年 » 实现简单blog展示(主要使用到Eloquent和Controller的结合)

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越HTML：網絡開發的基本技術Apr 26, 2025 am 12:04 AM

要構建一個功能強大且用戶體驗良好的網站，僅靠HTML是不夠的，還需要以下技術：JavaScript賦予網頁動態和交互性，通過操作DOM實現實時變化。 CSS負責網頁的樣式和佈局，提升美觀度和用戶體驗。現代框架和庫如React、Vue.js和Angular，提高開發效率和代碼組織結構。

HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

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

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

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