本文档详细介绍了如何使用PHPStorm从零开始创建一个简单的TODOS应用程序。首先，创建名为todos的工程，并配置数据库。接着，通过Artisan命令创建模型和数据库迁移，填充测试数据。然后，建立控制器，编写视图文件（如index、show、create、edit），并配置路由。最后，展示了应用的效果图，包括添加、更新和删除功能。
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');
}
}
四. 效果图
查看
更新
创建
删除
扫一扫
708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
