这篇文章主要给大家介绍了关于利用laravel搭建一个迷你博客的相关资料,文中将一步步的实现步骤通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着来一起学习学习吧。

本文主要给大家介绍的是关于利用laravel搭建一个迷你博客的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:

一、设计与思路

在开始写第一行代码之前,一定要尽量从头到尾将我们要做的产品设计好,避免写完又改,多写不必要的代码。

  • 需求分析:我们的迷你博客应该至少包含:新增/编辑/查看/删除文章,以及文章列表展示功能。
  • 数据库分析:基于这个功能,我们只需要一张 Articles 数据表来存放文章即可。
  • 页面结构分析:应该使用模板继承建立一张基础模板包含:头部/文章列表/底部信息

二、创建路由

完成这个博客大概需要以下几条路由:

| 路由 | 功能 | | -------- | ---------------- | | 文章列表页面路由 | 返回文章列表页面 | | 新增文章页面路由 | 返回新增文章页面 | | 文章保存功能路由 | 将文章保存到数据库 | | 查看文章页面路由 | 返回文章详情页面 | | 编辑文章页面路由 | 返回编辑文章页面 | | 编辑文章功能路由 | 将文章取出更新后重新保存到数据库 | | 删除文章功能路由 | 将文章从数据库删除 |

可以看到几乎全部是对文章的数据操作路由,针对这种情况,Laravel 提供了非常方便的办法:RESTful 资源控制器和路由。

打开routes.php加入如下代码:

  1. Route::resource('articles', 'ArticlesController');

只需要上面这样一行代码,就相当于创建了如下7条路由,且都是命名路由,我们可以使用类似route('articles.show') 这样的用法。

  1. Route::get('/articles', 'ArticlesController@index')->name('articles.index');
  2.  
  3. Route::get('/articles/{id}', 'ArticlesController@show')->name('articles.show');
  4.  
  5. Route::get('/articles/create', 'ArticlesController@create')->name('articles.create');
  6.  
  7. Route::post('/articles', 'ArticlesController@store')->name('articles.store');
  8.  
  9. Route::get('/articles/{id}/edit', 'ArticlesController@edit')->name('articles.edit');
  10.  
  11. Route::patch('/articles/{id}', 'ArticlesController@update')->name('articles.update');
  12.  
  13. Route::delete('/articles/{id}', 'ArticlesController@destroy')->name('articles.destroy');

三、创建控制器

利用 artisan 创建一个文章控制器:

  1. php artisan make:controller ArticlesController

四、创建基础视图

  1. resources/views/layouts/art.blade.php

见模板index.html

五、新建文章表单

  1. @extends('layouts.art')
  2.  
  3. @section('content')
  4.  
  5. <form class="form-horizontal" method="post" action="{{route('blog.store')}}">
  6.  
  7. {{ csrf_field() }}
  8.  
  9. <p class="form-group">
  10.  
  11. <label for="inputEmail3" class="col-sm-2 control-label">标题</label>
  12.  
  13. <p class="col-sm-8">
  14.  
  15. <input type="title" class="form-control" id="title" name="title">
  16.  
  17. </p>
  18.  
  19. </p>
  20.  
  21. <p class="form-group">
  22.  
  23. <label for="inputEmail3" class="col-sm-2 control-label">内容</label>
  24.  
  25. <p class="col-sm-8">
  26.  
  27. <textarea class="form-control" rows="" id="content" name="content"></textarea>
  28.  
  29. </p>
  30.  
  31. </p>
  32.  
  33. <p class="form-group">
  34.  
  35. <p class="col-sm-offset-2 col-sm-10">
  36.  
  37. <button type="submit" class="btn btn-default">创建</button>
  38.  
  39. </p>
  40.  
  41. </p>
  42.  
  43. </form>
  44.  
  45. @endsection

六、文章存储

此时如果你填写新建文章表单点击提交也会跳到一个空白页面,同样的道理,因为我们后续的控制器代码还没写。

要实现文章存储,首先要配置数据库,创建数据表,创建模型,然后再完成存储逻辑代码。

1、配置数据库

修改.env文件

2、创建数据表

利用 artisan 命令生成迁移:

  1. php artisan make:migration create_articles_talbe --create=articles

修改迁移文件

  1. public function up()
  2.  
  3. {
  4.  
  5. Schema::create('articles', function (Blueprint $table) {
  6.  
  7. $table->increments('id');
  8.  
  9. $table->string('title');
  10.  
  11. $table->longText('content');
  12.  
  13. $table->timestamps();
  14.  
  15. });
  16.  
  17. }
  18.  
  19. public function down()
  20.  
  21. {
  22.  
  23. Schema::dropIfExists('articles');
  24.  
  25. }

我们创建了一张 articles 表,包含递增的 id 字段,字符串title字段,长文本content字段,和时间戳。

执行数据库迁移:

  1. php artisan migrate

登录mysql,查看数据表。

3、创建模型

利用 artisan 命令创建模型:

  1. php artisan make:model Article

打开模型文件,输入以下代码:

app/Article.php

  1. namespace App;
  2.  
  3. use Illuminate\Database\Eloquent\Model;
  4.  
  5. class Article extends Model
  6.  
  7. {
  8.  
  9. //对应的表
  10.  
  11. protected $table = 'articles';
  12.  
  13. //通过model可以写入的字段
  14.  
  15. protected $fillable = [
  16.  
  17. 'title', 'content',
  18.  
  19. ];
  20.  
  21. }

4、存储逻辑代码

打开 ArticlesController.php 控制器,找到 store() 方法。

app/Http/Controllers/ArticlesController.php

  1. public function store(Request $request)
  2.  
  3. {
  4.  
  5. //数据验证 错误处理
  6.  
  7. $this->validate($request,[
  8.  
  9. 'title'=>'required|max:50',
  10.  
  11. 'content'=>'required|max:500',
  12.  
  13. ]);
  14.  
  15. // 1 orm方式写入
  16.  
  17. $article = Article::create([
  18.  
  19. 'title'=>$request->title,
  20.  
  21. 'content'=>$request->content,
  22.  
  23. ]);
  24.  
  25. //2 或者
  26.  
  27. /* $article = new Article();
  28.  
  29. $article->title =$request->title;
  30.  
  31. $article->content = $request->content;
  32.  
  33. $article->save();*/
  34.  
  35. //3 db方式写入
  36.  
  37. //insert()方法返回值为true 和 false
  38.  
  39. //$res = DB::table('articles')->insert(['title'=>$request->title,'content'=>$request->content]);
  40.  
  41. return redirect()->route('blog.index');
  42.  
  43. }

验证错误显示

  1. @if (count($errors) > )
  2.  
  3. <p class="alert alert-danger">
  4.  
  5. <ul>
  6.  
  7. @foreach($errors->all() as $error)
  8.  
  9. <li>{{ $error }}</li>
  10.  
  11. @endforeach
  12.  
  13. </ul>
  14.  
  15. </p>
  16.  
  17. @endif

七、文章列表展示

完成了添加文章功能后,就可以实现我们的文章列表展示页了。

打开 ArticlesController.php 找到 index() 方法,添加代码如下:

app/Http/Controllers/ArticlesController.php

  1. use App\Article;
  2.  
  3. public function index()
  4.  
  5. {
  6.  
  7. $articles = Article::orderBy('created_at','asc')->get();
  8.  
  9. return view('articles.index', ['articles'=>$articles]);
  10.  
  11. }

视图index.blade.php

  1. @extends('layouts.art')
  2.  
  3. @section('content')
  4.  
  5. <a class="btn btn-primary" href="{{route('blog.create')}}" rel="external nofollow" >添加文章</a>
  6.  
  7. @foreach($articles as $article)
  8.  
  9. <p class="panel panel-default">
  10.  
  11. <p class="panel-body">
  12.  
  13. {{$article->title}}
  14.  
  15. <a href="{{route('blog.show',$article->id)}}" rel="external nofollow" class="btn btn-info">阅读</a>
  16.  
  17. <a href="{{route('blog.edit', $article->id)}}" rel="external nofollow" class="btn btn-info">修改</a>
  18.  
  19. <form action="{{ route('blog.destroy', $article->id) }}" method="post" style="display: inline-block;">
  20.  
  21. {{ csrf_field() }}
  22.  
  23. {{ method_field('DELETE') }}
  24.  
  25. <button type="submit" class="btn btn-danger">删除</button>
  26.  
  27. </form>
  28.  
  29. </p>
  30.  
  31. </p>
  32.  
  33. @endforeach
  34.  
  35. {!! $articles->render() !!}
  36.  
  37. @endsection

八、编辑文章表单

编辑文章表单其实和之前创建的新建文章表单很类似,只是需要额外将现有的数据读取出来填在表单上。

首先我们在文章列表页的每个文章上添加一个编辑按钮:

视图:

  1. @extends('layouts.art')
  2.  
  3. @section('content')
  4.  
  5. <form class="form-horizontal" method="post" action="{{route('blog.update',$article->id)}}">
  6.  
  7. {{ csrf_field() }}
  8.  
  9. {{ method_field('PATCH') }}
  10.  
  11. <p class="form-group">
  12.  
  13. <label for="inputEmail3" class="col-sm-2 control-label">标题</label>
  14.  
  15. <p class="col-sm-10">
  16.  
  17. <input type="title" class="form-control" id="title" name="title" value="{{ $article->title }}">
  18.  
  19. </p>
  20.  
  21. </p>
  22.  
  23. <p class="form-group">
  24.  
  25. <label for="inputEmail3" class="col-sm-2 control-label">内容</label>
  26.  
  27. <p class="col-sm-10">
  28.  
  29. <textarea class="form-control" rows="" id="content" name="content"> {{ $article->content }}</textarea>
  30.  
  31. </p>
  32.  
  33. </p>
  34.  
  35. <p class="form-group">
  36.  
  37. <p class="col-sm-offset-2 col-sm-10">
  38.  
  39. <button type="submit" class="btn btn-default">修改</button>
  40.  
  41. </p>
  42.  
  43. </p>
  44.  
  45. </form>
  46.  
  47. @endsection

注意这段代码中的 {{ method_field('PATCH') }} ,这是跨站方法伪造,HTML 表单没有支持 PUT、PATCH 或 DELETE 动作。所以在从 HTML 表单中调用被定义的 PUT、PATCH 或 DELETE 路由时,你将需要在表单中增加隐藏的 _method 字段来伪造该方法,详情参考 官方文档。

控制器

  1. //展示修改模板
  2.  
  3. public function edit($id)
  4.  
  5. {
  6.  
  7. $article = Article::findOrFail($id);
  8.  
  9. return view('art.edit',['article'=>$article]);
  10.  
  11. }
  12.  
  13. //执行修改
  14.  
  15. public function update(Request $request, $id)
  16.  
  17. {
  18.  
  19. $this->validate($request, [
  20.  
  21. 'title' => 'required|max:50',
  22.  
  23. 'content'=>'required|max:500',
  24.  
  25. ]);
  26.  
  27. $article = Article::findOrFail($id);
  28.  
  29. $article->update([
  30.  
  31. 'title' => $request->title,
  32.  
  33. 'content' => $request->content,
  34.  
  35. ]);
  36.  
  37. return redirect()->route('blog.index');
  38.  
  39. }

九、删除文章

删除按钮

  1. <form action="{{ route('blog.destroy', $article->id) }}" method="post" style="display: inline-block;">
  2.  
  3. {{ csrf_field() }}
  4.  
  5. {{ method_field('DELETE') }}
  6.  
  7. <button type="submit" class="btn btn-danger">删除</button>
  8.  
  9. </form>
  10. 控制器:
  11.  
  12. public function destroy($id)
  13.  
  14. {
  15.  
  16. $article = Article::findOrFail($id);
  17.  
  18. $article->delete();
  19.  
  20. return back();
  21.  
  22. }

十、结语

本次实验通过一个很简单的迷你博客对 Laravel RESTful 资源控制器和路由,视图,orm进行了强化练习。

以上就是laravel搭建博客实战的教程实例的详细内容关注我的知乎专栏

PHP​zhuanlan.zhihu.com

laravel搭建博客实战的教程实例的更多相关文章

  1. 在centos7上搭建博客之小白教程~

    原理 http使用方法一编译安装,php模块打入方式实现. 软件版本 在本次实验中,我们需要用到的软件版本如下: apr-1.6.2 apr-util-1.6.0 httpd-2.4.28 maria ...

  2. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(四)-使用Travis自动部署Hexo(2)

    前言 前面一篇文章介绍了Travis自动部署Hexo的常规使用教程,也是个人比较推荐的方法. 前文最后也提到了在Windows系统中可能会有一些小问题,为了在Windows系统中也可以实现使用Trav ...

  3. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(三)-使用Travis自动部署Hexo(1)

    前言 前面两篇文章介绍了在github上使用hexo搭建博客的基本环境和hexo相关参数设置等. 基于目前,博客基本上是可以完美运行了. 但是,有一点是不太好,就是源码同步问题,如果在不同的电脑上写文 ...

  4. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置

    前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...

  5. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

    前言 有朋友问了我关于博客系统搭建相关的问题,由于是做开发相关的工作,我给他推荐的是使用github的gh-pages服务搭建个人博客. 推荐理由: 免费:github提供gh-pages服务是免费的 ...

  6. 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

    前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...

  7. Hexo+Github博客最简教程-Dockerfile自动搭建

    闲谈 拿出你的气质,打开你的电脑,借你半小时搭建好属于你的hexo博客,小生用dockerfile自动帮你搭建好:你只需要在你的mac或linux或windows上提前把docker安装好,如何安装不 ...

  8. Hexo搭建博客教程(1) - 安装环境与本地搭建

    前言 搭建个人博客一般有两种选择,一个是使用WordPress,但是需要将博客搭建在服务器上,不过搭建好后写文章方便,适合没有程序基础的人使用.另一个是使用Hexo,相对简洁高效,不需要服务器,既可以 ...

  9. Hexo+NexT(零):最全Hexo+Next搭建博客教程

    快速.简洁且高效的博客框架 有位大神说,喜欢写博客的人的人,折腾博客会经历三个阶段.找到一个免费空间,搭建一个博客,很欣喜,很有成就感,此为一阶段:受限免费空间各种限制,自己买空间和域名,实现对博客的 ...

随机推荐

  1. Postman:下载安装与基本介绍

    1.下载: (1)官网APP: https://www.getpostman.com/ (即: https://app.getpostman.com/app/download/win64 ) (2)插 ...

  2. 【网站】Kiwi浏览器中文网

    2020年1月1日上线 访问地址:http://huangenet.gitee.io/kiwibrowser/

  3. [Codechef - ADITREE] Adi and the Tree - 树链剖分,线段树

    [Codechef - ADITREE] Adi and the Tree Description 树上每个节点有一个灯泡,开始所有灯泡都是熄灭的.每次操作给定两个数 \(a,b\) ,将 \(a,b ...

  4. please execute the cleanup command

    解决方法: (1)用dos命令进入项目文件夹,运行svn cleanup:不要直接右键点击找cleanup选项 (2)到上一层目录去cleanup试下,或者到.svn文件夹下(隐藏的)找到所有的loc ...

  5. JVM&GC详解

    1.JVM简介 JVM是java的核心和基础,在java编译器和os平台之间的虚拟处理器.它是一种利用软件方法实现的抽象的计算机基于下层的操作系统和硬件平台,可以在上面执行java的字节码程序. ja ...

  6. codeforces 1283E New Year Parties (贪心)

    链接:https://codeforces.com/contest/1283/problem/E 题意: 有n个人住在一些房子里,有的人住在同一个房子里.每个人可以选择搬去他的房子左边那个房子或者右边 ...

  7. 搭建Hexo实现个人网站详细教程

    全网最全小白搭建Hexo+Gitee/Coding/Github 全网最全小白搭建Hexo+Gitee/Coding/Github 本站内容已全部转移到https://www.myyuns.ltd,具 ...

  8. electron聊天室|vue+electron-vue仿微信客户端|electron桌面聊天

    一.项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例,实现消息 ...

  9. Python入门1 —— 初识Python

    一:Python介绍 1.Python是什么? Python是一门编程语言,编程语言是一门语言. 语言就是一个事物与另一个事物沟通的工具. 而编程语言则是人与计算机沟通的介质. 2.为什么要跟计算机沟 ...

  10. HTML学习(11)表格

    HTML表格由<table>标签定义,下面是一个2行3列的表格: <table> <tr> <td>11</td> <td>12 ...