使用laravel框架创建todos

最新推荐文章于 2020-06-30 20:33:29 发布

陈知见

最新推荐文章于 2020-06-30 20:33:29 发布

阅读量262

点赞数 4

文章标签： laravel

本文链接：https://blog.csdn.net/weixin_45915416/article/details/106900241

版权

使用laravel框架创建todos

一：laravel环境配置

1：首先下载phpstorm
在这里插入图片描述
2：快速搭建laravel运行/开发环境：laragon
3：创建laravel工程

4：开始创建工程

输入工程的名字

如果创建太慢，建议改变composer镜像地址；在命令行创建工程时，Ctrl+C中断创建，键入如下指令后再重新创建
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/
在这里插入图片描述
创建成功
5：reload apache，再次运行laravel
查看todos

二：在Laravel中创建视图

1.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>

<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">(current)</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>

<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>
    @endif

    @yield('content')
</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>

2：建立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="text-decoration: line-through"@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

3：添加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

4：在resources/views/todos下创建create.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

5：在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">
                                {{$message}}
                            </div>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary float-right">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

三：添加路由

1.在routes/web.php中创建todo添加路由
在这里插入图片描述
2.创建页获取路由

Route::get('/todos/create','TodoController@create');//创建页获取路由
Route::get('/todos/{todo}','TodoController@show');//单个资源访问路由`

创建TODO提交的处理页路由

Route::post('/todos','TodoController@store');//创建TODO提交的处理页路由

3.编辑页获取路由

Route::post('/todos/{todo}','TodoController@update');//编辑TODO提交的处理页路由
Route::patch('/todos/{todo}','TodoController@update');//

4.删除TODO的处理页路由

Route::delete('/todos/{todo}','TodoController@destroy');//删除TODO的处理页路由

5.完成TODO的处理页路由

Route::patch('/todos/{todo}/completed','TodoController@complete');//完成TODO的处理页路由

四：controller

1：在app/Http/Controller中建立TodoController控制器，并在其中定义index方法返回todos视图
在这里插入图片描述
2：列表中的记录按创建时间倒序排列

public function index()
    {
        $todos = Todo::query()->orderByDesc('created_at')->get();
        
        return view('todos.index')->with(['todos' => $todos]);//将数据送给视图
    }

3：编辑页获取办法

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

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

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

5：实现创建页的提交方法并添加后端验证

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

        $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');
    }

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

 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 = Todo::findOrFail($todoId);
        $todo->name = $name;
        $todo->description = $description;
        $todo->save();

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

        return redirect("/todos/{$todo->id}");
    }

7：实现处理删除的方法

public function destroy(Todo $todo, Request $request)
    {
        //$todo = Todo::findOrFail($todoId);
        try{
            $todo->delete();
        }catch (\Exception $exception){
            dd($exception);
        }

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

        return redirect('/todos');
    }

8：实现处理完成的方法


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

最后效果

在这里插入图片描述

陈知见

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用laravel框架创建todos

使用laravel框架创建todos一：laravel环境配置二：在Laravel中创建视图三：添加路由四：controller最后效果一：laravel环境配置1：首先下载phpstorm2：快速搭建laravel运行/开发环境：laragon3：创建laravel工程4：开始创建工程输入工程的名字如果创建太慢，建议改变composer镜像地址；在命令行创建工程时，Ctrl+C中断创建，键入如下指令后再重新创建composer config -g repo.packagist co
复制链接

扫一扫