您的位置：首页 > 编程语言 > PHP开发

laravel实现TODOS应用

2020-07-21 04:12 1251 查看

laravel的环境搭建

1、集成开发环境：PHPSTORM；
2、快速搭建PHP/laravel运行/开发环境：laragon；

3、快速创建Laravel App

项目名称

4、创建成功，重新加载Apache运行laravel

5、使用PhpStorm打开工程目录

创建视图：在resources/views目录下创建todos用于存放相关视图

建立index.blade.php用于列表展示，并在视图中引入bootstrap模板

@extends('layouts.app')
@section('title','TODO LIST')
@section('content')
<h1 class="text-center my-5">Todo Page</h1>
<div class="row justify justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
Todo List
</div>
<div class="card-body">
<ul class="list-group">
@foreach($todos ?? '' as $todo)
<li class="list-group-item">
<span @if($todo->is_completed) style="..."@endif>
{{$todo->name}}
</span>
{{--{{$todo->name}}
@if($todo->is_completed)
<span class="badge badge-pill badge-success">已完成</span>
@else
<span class="badge badge-pill badge-secondary">未完成</span>
@endif   --}}

<a class="btn btn-primary float-right" href="/todos/{{$todo->id}}">View</a>
<form action="/todos/{{$todo->id}}" method="post"
class="d-inline-block float-right mr-2">
@method('delete')
@csrf
<button type="submit" class="btn btn-danger">Delete</button>
</form>
@if(!$todo->is_completed)
<form action="/todos/{{$todo->id}}/completed" method="post"
class="d-inline-block float-right mr-2">
@method('patch')
@csrf
<button type="submit" class="btn btn-warning">Complete</button>
</form>
@endif
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
@endsection

添加show.blade.php用于展示单个资源

@extends('layouts.app')

@section('title','TODO SHOW')

@section('content')
<h1 class="text-center my-5">{{$todo->name}}</h1>
<div class="row justify justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header font-weight-bold d-flex align-items-center justify-content-between">
Detail
@if($todo->is_completed)
<span class="badge badge-pill badge-success float-right">已完成</span>
@else
<span class="badge badge-pill badge-danger float-right">未完成</span>
@endif
</div>
<div class="card-body">
{{$todo->description}}
</div>
<div class="card-footer">
<a href="/todos/{{$todo->id}}/edit" class="btn btn-block btn-outline-success">Edit</a>
</div>
</div>
</div>
</div>
@endsection

blade模板布局：在resources/views下创建layouts目录，并在次目录下创建app.blade.php布局模板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1 shrink-to-fit=no" name="viewport">
<title>@yield('title')</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>

<div class="container pt-5">
@if(session()->has('success-info'))
<div class="pt-sm-3">
<div class="alert alert-success mt-2" role="alert">
{{session('success-info')}}
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr,net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

创建页实现

在resources/views/todos下创建create.blade.php

@extends('layouts.app')
@section('title','TODO CREATE')
@section('content')
<h1 class="text-center my-5">CREATE A NEW TODO</h1>
<div class="row justify justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">New</div>
<div class="card-body">
<form action="/todos" method="post">
@csrf
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror">
@error('name')
<div class="invalid-feedback">{{$message}}</div>
@enderror
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea name="description" id="description" rows="3" class="form-control @error('description') is-invalid @enderror"></textarea>
@error('description')
<div class="invalid-feedback">{{$massage}}</div>
@enderror
</div>
<button type="submit" class="btn btn-primary float-right">Submit</button>
</form>
</div>
</div>
</div>
</div>

创建页实现：在resources/views/todos下创建编辑页edit.blade.php

@extends('layouts.app')
@section('title','TODO EDIT')
@section('content')
<h1 class="text-center my-5">EDIT TODO</h1>
<div class="row justify justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">EDIT</div>
<div class="card-body">
<form action="/todos/{{todo->id}}" method="post">
@csrf
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="{{$todo->name}}"
class="form-control @error('name') is-invalid @enderror">
@error('name')
<div class="invalid-feedback">{{$message}}</div>
@enderror
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea name="description" id="description" rows="3" class="form-control @error('description') is-invalid @enderror">
{{$todo->description}}
</textarea>
@error('description')
<div class="invalid-feedback">{{$massage}}</div>
@enderror
</div>
<button type="submit" class="btn btn-primary float-right">Submit</button>
</form>
</div>
</div>
</div>
</div>
@endsection

在app.blade.php中为列表和详情页添加统一的Bootstrap导航栏

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/">TODOS APP</a>
<button class="navbar-toggler d-lg-none" type="button"
data-toggle="collapse" data-target="#collapsibleNavId"
aria-controls="collapsibleNavId"
aria-expanded="false" aria-label="Toggle navigation">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="=nav-link" href="/">Home<span class="sr-only"></span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/todos">Todos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/todos/create">Create</a>
</li>
</ul>
</div>
</nav>

添加路由

在routes/web.php中创建TODO添加路由

Route::get( '/todos', 'TodoController@index');
Route::get( '/todos/{todo}', 'TodoController@show');

创建页路由

创建页获取路由

Route::get('/todos/create', 'TodoController@create');

创建TODO提交的处理页路由

Route::post('/todos','TodoController@store');

编辑页路由

编辑页获取路由

Route::get('/todos/{todo}/edit','TodoController@edit');

编辑TODO的处理页路由

Route::post('/todos/{todo}','TodoController@update');
Route::patch('/todos/{todo}','TodoController@update');

删除TODO的处理页路由

Route::delete('/todos/{todo}','TodoController@destory');

完成TODO的处理页路由

Route::patch('/todos/{todo}/completed','TodoController@complete');

建立控制器

在app/Http/Controller中建立TodoController控制器，并在其中定义index方法返回todos视图

通过laragon终端使用php artisan make:Controller创建控制器

show的获取方法和创建页的获取方法

public function show(Todo $todo)
{
return view('todos.show')->with(['todo'=>$todo]);
}

public function create()
{
return view('todos.create');
}

列表中的记录按创建时间倒序排列

public function index(){
$items = Todo::all();
return view('todos.index')->with(['items'=>$items]);
}

编辑页的获取方法

public function edit(Todo $todo)
{
return view('todos.edit')->with(['todo' => $todo]);
}

实现创建页的提交方法

public function store(Request $request)
{
$name=$request->get('name');
$description=$request->get('description');

$todo=new Todo();
$todo->name =$name;
$todo->description=$description;
$todo->save();

$request->session()->flash('success-info','Create successful!');

return redirect('/todos');
}

添加后端验证

$request->validate([
'name'=>'required|min:3|max:20',
'description'=>'required'
]);

实现处理编辑页提交的办法

public  function update(Todo $todo, Request $request)
{
$request->validate([
'name'=>'required|min:3|max:50',
'description'=>'required'
]);

$name =$request->get('name');
$description =$request->get('description');

$todo->name =$name;
$todo->description =$description;
$todo->save();

$request->session()->flash('success-info','Update successful!');
return redirect("/todos/{$todo->id}");
}

实现处理删除的方法

public function  destroy(Todo $todo,Request $request)
{
try {
$todo->delete();
}catch (\Exception $exception){
dd($exception);
}
$request->session()->flash('success-info','Delete successful!');
return redirect('/todos');
}

实现处理完成的方法

public function complete(Todo $todo)
{
$todo->is_complete =true;
$todo->save();
return redirect('/todos');
}

效果实现

## 以上是本人通过课件以及各类网上资料借鉴做成的一个Todo应用，其中得到了大量的帮助，若有不妥或错误请指正

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航