Laravel 5.4 创建待办事项

Laravel 5.4 创建待办事项

准备事项

本环境使用 Laragon 集成 php-7.1.1、nginx-1.10.1、mariadb-10.2.3、composer、nodejs。
需要创建一个todo 的数据库，创建一个 todo 的表

最终效果

1. 创建 laravel 5.4 项目

请参考 Laravel 5.4 文档

通过 Laravel 安装工具创建 laravel 5.4 项目

1.1 通过 composer 安装 Laravel 工具

composer global require "laravel/installer"

1.2 安装 laravel 5.4 项目

laravel new laratodo

2. 创建数据库相关

2.1 创建数据库

create database todo default charset utf8

2.2 数据库迁移文件

2.2.1 修改user表的迁移文件

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->string('email')->unique();
        $table->string('password');
        $table->string('userimage');   //此行为新增
        $table->string('api_key')->nullable()->unique();  //此行为新增
        $table->rememberToken();
        $table->timestamps();
    });
}

2.2.1 修改todo表的迁移文件

php artisan make:migration create_todo_table //创建todo的数据库迁移文件

public function up()
{
    Schema::create('todo', function (Blueprint $table) {
        $table->increments('id');
        $table->string('todo');
        $table->string('description');
        $table->string('category');
        $table->integer('user_id')->unsigned();
        $table->timestamps();
        $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
    });
}

2.3 配置数据库链接 .env 文件

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=todo
DB_USERNAME=root
DB_PASSWORD=

2.4 执行数据库迁移

php artisan migrate

3. 创建模型相关

3.1 User 模型

<?php
namespace App;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;
class User extends Authenticatable
{
    use Notifiable;
    /**
    * The attributes that are mass assignable.
    *
    * @var array
    */
    protected $fillable = [
        'name', 'email', 'password','userimage'
    ];
    /**
    * The attributes that should be hidden for arrays.
    *
    * @var array
    */
    protected $hidden = [
        'password', 'remember_token',
    ];
    /*
    * Get Todo of User
    *
    */
    public function todo()
    {
        return $this->hasMany('App\Todo');
    }
}

3.2 Todo 模型

3.2.1 创建 Todo 模型

//此方法可以创建控制器和模型
php artisan make:controller TodoController --resource --model=Todo

3.2.1 编辑 Todo 模型

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Todo extends Model
{
    protected $table = 'todo';

    protected $fillable = ['todo','category','user_id','description'];
}

4. 创建控制器

4.1 编辑 TodoController

<?php

namespace App\Http\Controllers;

use App\Todo;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use Illuminate\Support\Facades\Auth;

class TodoController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $result = Auth::user()->todo()->get();
        if(!$result->isEmpty()){
            return view('todo.dashboard',['todos'=>$result,'image'=>Auth::user()->userimage]);
        }else{
            return view('todo.dashboard',['todos'=>false,'image'=>Auth::user()->userimage]);
        }
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('todo.addtodo');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validator($request->all())->validate();
        if(Auth::user()->todo()->Create($request->all())){
            return $this->index();
        }
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Todo  $todo
     * @return \Illuminate\Http\Response
     */
    public function show(Todo $todo)
    {
         return view('todo.todo',['todo' => $todo]);
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Todo  $todo
     * @return \Illuminate\Http\Response
     */
    public function edit(Todo $todo)
    {
        return view('todo.edittodo',['todo' => $todo]);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Todo  $todo
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Todo $todo)
    {
        $this->validator($request->all())->validate();
        if($todo->fill($request->all())->save()){
            return $this->show($todo);
        }
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Todo  $todo
     * @return \Illuminate\Http\Response
     */
    public function destroy(Todo $todo)
    {
        if($todo->delete()){
            return back();
         }
    }

    protected function validator(array $request)
    {
        return Validator::make($request, [
            'todo' => 'required',
            'description' => 'required',
            'category' => 'required'
        ]);
    }
}

4.2 编辑 LoginController 和 RegisterController 控制器

protected $redirectTo = '/home'; =>  protected $redirectTo = '/todo';

5. 创建视图

在 views 创建 todo 文件夹

5.1 创建 dashboard.blade.php

@extends('layouts.app')
@section('title', 'Home ')
@section('content')
 <div class="row">
      <div class="col-md-9">
    <ul class="list-group">
    @if($todos != false)
          [@foreach](https://learnku.com/users/5651) ($todos as $todo)

    <li class="list-group-item"><a class="secondary-content" href="{{url('/todo/'.$todo->id)}}"><span class="glyphicon glyphicon-triangle-right"></span></a><a class="secondary-content" href="{{url('/todo/'.$todo->id).'/edit'}}"><span class="glyphicon glyphicon-pencil"></span></a><a href="#" class="secondary-content" onclick="event.preventDefault();
                                            document.getElementById('delete-form').submit();"><span class="glyphicon glyphicon-trash"></span></a><form id="delete-form" action="{{url('/todo/'.$todo->id)}}" method="POST" style="display: none;">
                         {{ method_field('DELETE') }}{{ csrf_field() }}
                            </form> {{$todo->todo}} 
                                            </li>

@endforeach
@else
<li class="list-group-item"> No Todo added yet <a href="{{ url('/todo/create') }}"> click here</a> to add new todo. </li>
@endif
    </ul>
    </div>

      <div class="col-md-3">
          <img class="img-responsive img-circle" src="{{asset('storage/'.$image)}}">
      </div>
    </div>
@endsection

5.2 创建 edittodo.blade.php

@extends('layouts.app')

@section('title', 'Edit')

@section('content')
         <div class="row">
            <div class="col-m-6">

              <form class="form-horizontal" method="post" action="{{url('/todo/'.$todo->id)}}">
                {{ csrf_field() }}
                {{ method_field('PUT') }}
  <div class="form-group">
    <label for="todo" class="col-sm-2 control-label">Todo</label>
    <div class="col-md-5">
      <input type="text" class="form-control" id="todo" name="todo" placeholder="todo" value="{{$todo->todo}}">
       @if ($errors->has('todo'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('todo') }}</strong>
                                    </span>
     @endif
    </div>
  </div>
  <div class="form-group">
    <label for="category" class="col-sm-2 control-label">Category</label>
    <div class="col-md-5">
      <input type="text" class="form-control" id="category" name="category" placeholder="category" value="{{$todo->category}}">
     @if ($errors->has('category'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('category') }}</strong>
                                    </span>
     @endif
    </div>
  </div>
  <div class="form-group">
    <label for="category" class="col-sm-2 control-label">Description</label>
    <div class="col-md-5">
      <textarea class="form-control" id="description" name="description" placeholder="description">{{$todo->description}}</textarea>
     @if ($errors->has('description'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('description') }}</strong>
                                    </span>
     @endif
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-md-5">
      <button type="submit" class="btn btn-default">Update</button>
    </div>
  </div>
</form>

    </div>
  </div>
@endsection

5.3 创建 addtodo.blade.php

@extends('layouts.app')

@section('title', 'Add New Todo')

@section('content')
         <div class="row">
            <div class="col-m-6">
              <form class="form-horizontal" method="post" action="{{url('/todo')}}">
                {{ csrf_field() }}
  <div class="form-group">
    <label for="todo" class="col-sm-2 control-label">Todo</label>
    <div class="col-md-5">
      <input type="text" class="form-control" id="todo" name="todo" placeholder="todo" value="{{ old('todo') }}">
      @if ($errors->has('todo'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('todo') }}</strong>
                                    </span>
     @endif
    </div>
  </div>
  <div class="form-group">
    <label for="category" class="col-sm-2 control-label">Category</label>
    <div class="col-md-5">
      <input type="text" class="form-control" id="category" name="category" placeholder="category" value="{{ old('category') }}">
      @if ($errors->has('category'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('category') }}</strong>
                                    </span>
     @endif
    </div>
  </div>
  <div class="form-group">
    <label for="category" class="col-sm-2 control-label">Description</label>
    <div class="col-md-5">
      <textarea class="form-control" id="description" name="description" placeholder="category" value="{{ old('description') }}"></textarea>
      @if ($errors->has('description'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('description') }}</strong>
                                    </span>
     @endif
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-md-5">
      <button type="submit" class="btn btn-default">Add</button>
    </div>
  </div>
</form>
    </div>
  </div>
@endsection

5.4 创建 todo.blade.php

@extends('layouts.app')
@section('title', title_case($todo->todo))
@section('content')
<div class="row">
        <div class="col-md-6">
           <div class="panel panel-primary">
              <div class="panel-heading"><h3>{{title_case($todo->todo)}} <a href="{{url('/todo/'.$todo->id).'/edit'}}" class="btn btn-warning btn-group-sm pull-right ">Edit</a></h3>
              </div>
                  <div class="panel-body">
                    {{$todo->description}}
                  </div>
              <div class="panel-footer"><strong>Category:</strong> {{$todo->category}}</div>    
              </div>

        </div>
      </div>

@endsection

5.5 编辑 app.blade.php

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>@yield('title')</title>
    <!-- {{ config('app.name', 'Laravel') }} -->

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <!-- Latest compiled and minified CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Scripts -->

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->

    <!-- Scripts -->
    <script>
        window.Laravel = {!! json_encode([
            'csrfToken' => csrf_token(),
        ]) !!};
    </script>
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                        <span class="sr-only">Toggle Navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- Branding Image -->
                    <!-- <a class="navbar-brand" href="{{ url('/') }}">
                        {{ config('app.name', 'Laravel') }}
                    </a> -->

                    <a class="navbar-brand" href="{{ url('/todo') }}">
                     Home
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    <ul class="nav navbar-nav">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="nav navbar-nav navbar-right">
                        <!-- Authentication Links -->
                        @if (Auth::guest())
                            <li><a href="{{ route('login') }}">Login</a></li>
                            <li><a href="{{ route('register') }}">Register</a></li>
                        @else

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                    {{ Auth::user()->name }} <span class="caret"></span>
                                </a>

                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a href="{{ route('logout') }}"
                                            onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                            {{ csrf_field() }}
                                        </form>
                                    </li>

                                    <li>

                           <a href="{{ url('/todo/create') }}">Add Todo</a>

                        </li>   
                                </ul>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </nav>

        @yield('content')
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

5.6 编辑 register.blade.php

//在form 加上
<form class="form-horizontal" role="form" enctype="multipart/form-data" method="POST" action="{{ route('register') }}">
//在注册表单上加上
 <div class="form-group">
                            <label for="userimage" class="col-md-4 control-label">Image</label>

                            <div class="col-md-6">
                                <input id="userimage" type="file" class="form-control" name="userimage" required>
                                @if ($errors->has('userimage'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('userimage') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

5. 创建路由

Route::get('/', function () {
    return redirect('/login');
});
Auth::routes();
Route::resource('todo','TodoController');

6. 添加 Storage

php artisan storage:link

修改config/filesystems.php

//修改图片访问路径
'default' => 'local',  =>   'default' => 'public',

参考

https://www.cloudways.com/blog/create-todo-app-laravel-5-4/
https://www.cloudways.com/blog/laravel-5-4-todo-app-setting-authentication-functionality/

//github
https://github.com/ahmedkhan847/todoapplaravel

大功告成

本作品采用《CC 协议》，转载必须注明作者和本文链接