经过了前面的开发环境搭建和数据库配置、git配置的准备工作以后,现在可以开始动作做点什么了。

先从简单的开始,那就先来个文章列表和详情页吧。

这期间可以学习到路由、建立model、controller还有view的写法。

建立model

php artisan make:model Article

model文件目录是(基于Laravel5.4)app。目前简单例子中并不会在model中写点什么,但是没它不行。

建立数据表

php artisan make:migration create_article_table

执行以上命令后,会在database/migrations下生成2*_create_article_table.php文件。修改它的up方法:

public function up()
{
Schema::create('articles', function(Blueprint $table)
{
$table->increments('id');
$table->string('title');
$table->text('body')->nullable();
$table->integer('user_id');
$table->timestamps();
});
}

然后执行以下命令

php artisan migrate

数据库中会出现article表了。


建立controller

php artisan make:controller ArticleController

controller目录是app/Http/ 。以上语句执行成功后,会在该目录建立ArticleControllser.php

暂时只需要列表和详情两个方法。所以只需在ArticleControllser里写两个方法就够了。

    public function index()
{
$articles = DB::table('articles')
->select('id', 'body', 'title')
->orderBy('id', 'desc')
->paginate(5);
return view('welcome', ['articles' => $articles]);
} public function show($id)
{
return view('article')->withArticle(Article::find($id));
}

还要添加两个引用:

use Illuminate\Support\Facades\DB;
use App\Article;

index方法是列表,这里通引用的db来查询数据库,指定了表、列和排序字段,最简单的是用gaginate(5)就可以实现翻页了。

当数据量大时可以用 simplePaginate 来实现 上一页/下一页的简单分页,这样速度会比较快。

show方法是显示文章详情,这里用article的model的find方法来实现,所以需要引用article的model。


建立view

Laravel的view就是自己手动创建的。文件目录是resources/views/ 。文件名一定是以.blade.php结尾的。

这里建立article.blade.php当做文章详情页,用自带的首页welcome.blade.php当文章列表页。

列表写法:

@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

分页写法:

{{ $articles->links() }}

以上就是列表的写法,虽然简陋,但是可以看出很简单就可以实现列表和翻页。

详情页写法:

<h1 style="text-align: center; margin-top: 50px;">{{ $article->title }}</h1>
<hr>
<div id="date" style="text-align: right;">
{{ $article->updated_at }}
</div>
<div id="content" style="margin: 20px;">
<p>
{{ $article->body }}
</p>
</div>

以上就是view中涉及到动态内容的写法。其他就把它当做html写就可以了。


配置路由

路由目录是routes/ 这里配置目录下的web.php,为其增加文章详情的路由。

Route::get('/', 'ArticleController@index');
Route::get('article/{id}', 'ArticleController@show');

注释掉默认的'/'的处理。这样首页就可以进入articlecontroller的index方法,而详情页就进入show方法。


至此,前台文章列表和详情的页面已经写完。个人理解重点的代码就是以上那么多。源代码可以在我的 GitHub 上找到。

欢迎交流。

Laravel建站03--建立前台文章列表和文章详情的更多相关文章

  1. 用weexplus从0到1写一个app(2)-页面跳转和文章列表及文章详情的编写

    说明 结束连续几天的加班,最近的项目终于告一段落,今天抽点时间开始继续写我这篇拖了很久的<用weexplus从0到1写一个app>系列文章.写这篇文章的时候,weexplus的作者已经把w ...

  2. Laravel建站04--建立后台文章管理

    路由配置 Route::group(['middleware' => 'auth', 'namespace' => 'Admin', 'prefix' => 'admin'], fu ...

  3. joomla多语言建站之默认前台语言设置

    joomla多语言建站后,如果想设置其中一种语言为默认前台语言,即: 从后台点击“Site Name”跳转时: 访问域名时: 页面自动切换至某一种语言,可以在后台通过“语言管理”模块来实现,将“网站前 ...

  4. Laravel建站01--开发环境部署

    内容导航 安装git 安装composer 安装Laravel 既然是开发环境,就需要源代码管理.这里使用git来管理. 一:部署开发环境之前安装git 在 Linux 上安装git 如果你想在 Li ...

  5. Laravel建站05--缓存、时间日期处理包

    缓存 Laravel 给多种缓存系统提供丰富而统一的 API,缓存配置信息位于 config/cache.php,在这个文件中你可以为你的应用程序指定默认的缓存驱动,Laravel 支持当前流行的缓存 ...

  6. Laravel建站02--配置Laravel

    Laravel项目的根目录下有.env文件,如果没有可以把.env.example改名为.env 这个文件是配置文件,可以把app_key.数据库.redis缓存等配置信息写在这个文件里. 目前5.4 ...

  7. 【建站03】WordPress网站如何去除RSS功能

    哈喽,大家好,我是帝哥,最近有小伙伴问我,如何去掉WordPress上的RSS功能,这个功能呢,说实话,我们很少会用到. 但是如果有点强迫症的话看着会很不舒服,所以,今天和大家分享一下如何去掉Word ...

  8. HHvm Apache 2.4 Nginx建站环境搭建方法安装运行WordPress博客

    HHvm Apache 2.4 Nginx建站环境搭建方法安装运行WordPress博客 VPS主机   2014年06月02日 17:20   评论»       文章目录 Debian上安装 Ce ...

  9. ASP.NET MVC5 网站开发实践(二) Member区域 - 全部文章列表

    显示文章列表分两块,管理员可以显示全部文章列表,一般用户只显示自己的文章列表.文章列表的显示采用easyui-datagrid.后台需要与之对应的action返回json类型数据   目录 ASP.N ...

随机推荐

  1. JS小游戏寻找房祖名

    提示:1:先把两个图片放到重命名并放到相应的路径内. 2:本小游戏只为闲事练手,如有小bug自行解决,解决不了的可以留言,我看到后解决. 代码如下: <!DOCTYPE html>< ...

  2. .net设置中GridView自适应列宽

    有一个项目只有30分钟开发时间,速成,使用了古老的.net gridview. 但需要列宽自适应好看些. 于是琢磨了,实现思路如下. 先看下大致效果(很粗暴没有优化) 代码如下: protected ...

  3. ATL7窗口类详细剖析

    前言: ATL是微软继MFC之后提供的一套C++模板类库,小巧.精妙.效率极高.它的主要作用是为我们编写COM/DOM/COM+程序提供了丰富的支持.但是ATL只能写COM么?我以前只是MFC程序员的 ...

  4. 黑莓10开发101:Native平台

    为黑莓10开发游戏或应用程序有多种方法.这是件好事,不过如果你不是在黑莓平台下进行开发,或者你仅熟悉基于旧的Java的开发平台,也许你会感到无所适从.你将作何选择?从哪里着手? 促成你做出决定的因素有 ...

  5. 使用Facebook的create-react-app脚手架快速构建React开发环境(ant.design,redux......)

    编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含compo ...

  6. React个人学习笔记

    元素渲染 通过 ReactDOM.render() 方法渲染页面, 可以使用 ES6 class 来定义一个组件: 如何解析HTMl里面的空格: 1. 使用空格的 unicod 编码 : \u0020 ...

  7. IOS开发博客学习

    M了个J :http://www.cnblogs.com/mjios/tag/objective-c/ http://www.cnblogs.com/tianjian/p/3358602.html  ...

  8. iOS:转载:同步、异步、并行、串行的详解

    理解 iOS 开发中 GCD 相关的同步(synchronization)\ 异步(asynchronization),串行(serial)\ 并行(concurrency)概念 2014年11月21 ...

  9. XSD-学习总结

    1.代码详细分析 <?xml version="1.0"?> <xs:schema xmlns:xs="http://www.w3.org/2001/X ...

  10. centos7 安装selenium和firefox

    之前有一篇文章介绍过在ubuntu下安装selenium和firefox 现在介绍下centos7 注意以下都是下载的linux64位的软件,32位的请自己找下链接, 现在使用的python的版本是3 ...