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

使用PHPStorm编写简单的TODOSAPP

2020-07-21 04:12 1111 查看

PHPStorm编写简单的TODOSAPP

一.创建工程

1.创建名为todos的工程

等待大约几分钟；

创建成功。

二. 准备工作

1.打开phpstorm，打开先前所创的todos工程（文件位置在laragon文件目录下的www中）

2.打开终端，进入刚才所创的todos的目录下
点击界面中的终端

3.利用artisan命令创建模型

php artisan make:Model Todo
创建成功

4.打开工程中的.env文件配置数据库的密码

根据自己数据库的情况配置密码

4.利用migrate创建数据库迁徙文件

php artisan make:migration create_todos_table

5.在迁徙文件中创建表字段

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTodosTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('todos', function (Blueprint $table) {
$table->id();
$table->string('name',200);
$table->text('description');
//$table->string('picture');
$table->boolean('is_completed')->default(false);
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('todos');
}
}

6.执行数据库迁徙

php artisan migrate

7.利用Seeder和Factory填充数据
创建TodoFactory生成伪数据:

artisan make:factory TodoFactory -m Todo

加入下列代码

<?php

/** @var \Illuminate\Database\Eloquent\Factory $factory */

use App\Todo;
use Faker\Generator as Faker;

$factory->define(Todo::class, function (Faker $faker) {
return [
//
'name'=>$faker->sentence(3),
'description'=>$faker->paragraph(4),
// 'picture'=>$faker->imageUrl('128',128,'food'),
'is_completed'=>$faker->boolean(50)
];
});

8.创建TodoSeeder填充数据并在其中引用factory生成15条伪数据

php artisan make:seeder TodoSeeder

加入下列代码：

<?php

use Illuminate\Database\Seeder;

class TodoSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
//
\App\Todo::query()->truncate();
factory(\App\Todo::class,15)->create();
}
}

在中加入下列代码

<?php

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
$this->call(TodoSeeder::class); // $this->call(UserSeeder::class);
}
}

9.执行seed操作

php artisan db:seed

在数据库中可看见相关的伪数据

10.建立控制器

php artisan make:controller TodoController

三.实现功能

在view下创建以下几个.blade.php文件以及相关的文件夹

注：在编写程序是需要用到Bootstrap4,可在设置中安装

1.布局
app.blade.php

<!doctype html>
<html lang="en">
<head>
<title>@yield('title')</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm  navbar-light bg-light navbar-fixed-top"role="navigation">
<a class="navbar-brand" href="/todos">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">
<span class="navbar-toggler-icon"></span>
</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="/new-todos">Create</a>
</li>
</ul>
</div>
</nav>

<div class="container">
@if(session()->has('success'))
<div class="alert-success">
{{session()->get('success')}}
</div>
@endif
@yield('content')
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

2.实现创建，编辑，查看功能
index.blade.php

index.blade.php
@extends('layouts.app')

@section('content')
<div class="container">
<h1 class="text-center my-5">Todo Page</h1>
<div class="row justify-content-center">
<div class="card">
<div class="card-header">
<strong>Todos List</strong>
</div>
<div class="card-body">
<ul class="list-group">
@foreach($todos as $todo)
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>

<span @if($todo->is_completed) style="text-decoration:line-through" @endif>{{$todo->name}}</span>
</div>
<div class="btn-group">
@if(!$todo->is_completed)
<a href="/todos/{{$todo->id}}/complete"style="color: white" class="btn btn-warning btn-sm float-right mr-2">Complete</a>
@endif
<a href="/todos/{{$todo->id}}/delete"style="color: white" class="btn btn-danger btn-sm float-right mr-2">delete</a>
<a href="/todos/{{$todo->id}}"class="btn btn-primary btn-sm float-right">View</a>

</div>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
@endsection

show.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
<h1 class="text-center my-5">{{$todo->name}}</h1>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
@if($todo->is_completed)
<span class="badge badge-pill badge-success float-right">已完成</span>
@else
<span class="badge badge-pill badge-secondary float-right">未完成</span>
@endif
</div>
<div class="card-body">
{{$todo->description}}
</div>
<a href="/todos/{{$todo->id}}/edit"class="btn btn-info my-2">编辑</a>
<a href="/todos/{{$todo->id}}/delete"class="btn btn-danger my-2">删除</a>
</div>
</div>
</div>
</div>
@endsection

create.blade.php

@extends('layouts.app')

@section('content')
<h1 class="text-center">Create Todos</h1>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Create new todo</div>
<div class="card-body">
@if($errors->any())
<div class="alert alert-danger">
<ul class="list-group">
@foreach($errors->all() as $error)
<li class="list-group-item">
{{$error}}}
</li>
@endforeach
</ul>
</div>
@endif
<form action="/store-todos" method="POST">
@csrf
<div class="form-group">
<input type="text"placeholder="Name" class="form-control" name="name">
</div>
<div class="form-group">
<textarea name="description" placeholder="Description" cols="5" rows="5"class="form-control"></textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success">Create Todo</button>
</div>
</form>

</div>
</div>
</div>
</div>

@endsection

edit.blade.php

@extends('layouts.app')

@section('content')
<h1 class="text-center">Create Todos</h1>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Edit todo</div>
<div class="card-body">
@if($errors->any())
<div class="alert alert-danger">
<ul class="list-group">
@foreach($errors->all() as $error)
<li class="list-group-item">
{{$error}}}
</li>
@endforeach
</ul>
</div>
@endif
<form action="/todos/{{$todo->id}}/update-todos" method="POST">
@csrf
<div class="form-group">
<input type="text"placeholder="Name" class="form-control" name="name" value="{{$todo->name}}">
</div>
<div class="form-group">
<textarea name="description" placeholder="Description" cols="5" rows="5"class="form-control">{{$todo->description}}</textarea>
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-success">Updata Todo</button>
</div>
</form>

</div>
</div>
</div>
</div>

@endsection

2.配置路由
在

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
return view('welcome');
});
//Route::get('/about', function () {
//  return view('about');
//});
Route::get('/about','AboutController@index');
Route::get('/todos','TodoController@index');
Route::get('/todos/{todo}','TodoController@show');
Route::get('new-todos','TodoController@create');
Route::post('store-todos','TodoController@store');
Route::get('todos/{todo}/edit','TodoController@edit');
Route::post('todos/{todo}/update-todos','TodoController@update');
Route::get('todos/{todo}/delete','TodoController@destroy');
Route::get('todos/{todo}/complete','TodoController@complete');

3.在控制器中实现方法
在
加入下列代码：

<?php

namespace App\Http\Controllers;

use App\Todo;
use Illuminate\Http\Request;

class TodoController extends Controller
{
//
public function index()
{
$todos =Todo::all();
//return $todos   ;
return view('todos.index')->with(['todos'=>$todos]);
}
public function show($todoId)
{
$todo   = Todo::query()->findOrFail($todoId);
return view('todos.show')->with(compact('todo'));
// ['todo'=>$todo]
//return $todo;
}
public function create()
{
return view('todos.create');
}
public function store()
{
$this->validate(request(),[
'name'=>'required|min:3|max:12',
'description'=>'required']);

// dd(request()->all());
$data = request()->all();
$todo=new Todo();
$todo->name=$data['name'];
$todo->description=$data['description'];
// $todo->picture=$data['picture'];
$todo->is_completed = false;
$todo->save();

session()->flash('success','Todo created successfully.');

return redirect('/todos');
}
public function edit($todoId)
{
$todo= Todo::find($todoId);
return view('todos.edit')->with('todo',$todo);
}
public function update($todoId)
{
$this->validate(request(),['name'=>'required|min:3|max:12',
'description'=>'required'
]);
$data = request()->all();

$todo=Todo::find($todoId);
$todo->name=$data['name'];
$todo->description=$data['description'];
$todo->save();

session()->flash('success','Todo updated successfully.');

return redirect('/todos');

}
public function destroy($todoId)
{
$todo=Todo::find($todoId);
$todo->delete();

session()->flash('success','Todo deleted successfully.');

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

session()->flash('success','Todo completed successfully.');

return redirect('/todos');
}
}

四. 效果图

查看

更新

创建

删除

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

标签：

相关文章推荐

新的分享

章节导航