如何用laravel创建一个TODO APP?

如何用laravel创建一个TODO APP?

~~ 快速创建Laravel App

如何用laravel创建一个TODO APP?

~~ Laravel中的视图、控制器和模型

在创建todoapp之前我们了解了解Laravel中的视图、控制器和模型

  1. 创建视图:在resources/views目录下创建about.blade.php ,在routes/web.php中添加路由,使通过Get请求, 在about路径下能获取到about页面
    如何用laravel创建一个TODO APP?

如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?

  1. Laravel的控制器: Laravel的控制器层代码放在app/Http/Controller中 ,php artisan make:Controller <控制器类名>
    利用artisan工具创建AboutController控制器
    在控制器中定义index方法返回about页面 Route::get( uri: ‘/about’ ,function () {
    在web.php用AboutController的index方法替代 /about路由中的处理函数

如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?
3. Laravel的模型层:
利用artisan工具创建Todo模型类

如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?
在.env中设置数据库连接配置
如何用laravel创建一个TODO APP?
4.利用migrate创建数据库迁徙文件
如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?
在迁徙文件中创建表字段如何用laravel创建一个TODO APP?
执行数据库迁徙

php artisan migrate

打开数据库管理工具验证表创建情况
如何用laravel创建一个TODO APP?
5.利用Seeder和Factory填充测试 数据
创建TodoFactory生成伪数据
如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?
创建TodoSeeder填充数据 并在其中引用factory生成10条伪数据
如何用laravel创建一个TODO APP?
在DatabaseSeeder中调用 TodoSeeder,验证
如何用laravel创建一个TODO APP?

如何用laravel创建一个TODO APP?

  • 建立视图:在resources/views中建立todos,用于存放相关视图 ,建立index.blade.php用于列表展示 ,在视图中引入bootstrap模板;

如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?

  • 建立控制器:在app/Http/Controllers中建立TodoController控制器 ,在其中定义index方法返回todos视图
    如何用laravel创建一个TODO APP?
    如何用laravel创建一个TODO APP?
    在控制器中取得数据并送往视图
    如何用laravel创建一个TODO APP?

单个Todo展示与blade布局

  1. 在web.php中添加单个资源访问路由,在TodoController中实现show方法

public function show( $todosId)
todos=Todo::query()>findOrFail(todos = Todo: :query()->findOrFail(todosId);
return view( view: . todos. show’, compact( varname: ‘todos’ ));
}
如何用laravel创建一个TODO APP?

  1. 在resources/views/todos中添加 show.blade.php用于展示单个资源
    如何用laravel创建一个TODO APP?

  2. 在列表页面为查看按钮添加正确的 详情页链接地址
    如何用laravel创建一个TODO APP?
    4.为TODO APP创建公用的布局页
    如何用laravel创建一个TODO APP?
    如何用laravel创建一个TODO APP?

创建Todo与数据验证

1.在web.php中为创建TODO添加路由
如何用laravel创建一个TODO APP?
创建TODO提交的处理页路由
如何用laravel创建一个TODO APP?
在TodoController中添加创建页 获取方法
如何用laravel创建一个TODO APP?
创建页实现
如何用laravel创建一个TODO APP?
在TodoController中实现处理创 建页提交的方法
如何用laravel创建一个TODO APP?
让列表页中的记录按创建时间倒序排列
如何用laravel创建一个TODO APP?

删除、修改Todo与路由模型绑定

1.在web.php中为编辑TODO添加路由
Route::get(’/todos/{todo}/edit’, ‘[email protected]’);
Route::put(’/todos/{todo}’, ‘[email protected]’);
Route::patch(’/todos/{todo}’, ‘[email protected]’);
2.在TodoController中添加编辑页 获取方法
如何用laravel创建一个TODO APP?
3.编辑页实现
如何用laravel创建一个TODO APP?
4.在TodoController中实现处理编 辑页提交的方法
如何用laravel创建一个TODO APP?
5.在web.php中为删除TODO添加路由
Route::delete(’/todos/{todo}’, ‘[email protected]’);
6.在TodoController中实现处理删除 的方法
如何用laravel创建一个TODO APP?
7.在Todo列表中添加删除按钮
如何用laravel创建一个TODO APP?

路由模型绑定、flash消息

1.为编辑操作添加flash消息
1)在控制器update方法中,添加设置flash的代码
如何用laravel创建一个TODO APP?
2)在布局页中添加如下代码展示flash消息
如何用laravel创建一个TODO APP?代码整体
如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?

效果图

如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?
如何用laravel创建一个TODO APP?