Laravel框架下的Todos项目

    技术2022-07-10  141

    laravel框架下的Todos项目

    需要工具:phpStrom和laragon

    一、工程创建

    输入项目名称后,在命令行创建工程时,改变composer镜像地址:

    Ctrl+C中断创建

    打开Laragon的终端键入如下指令composer config -g repo.packagist Composer https://mirrors.aliyun.com/composer/

    重新加载Apache

    通过下图方式快速访问

    使用phpStrom打开工程目录

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

    Laravel是一个符合MVC模式的框架。MVC即将应用拆分为模型、控制器和视图三个层次 (Model、Controller and View),三个层次各司其职,相互配合使功能模块的实现 结构清晰,便于开发和维护。

    (1)视图层:展示界面和模型层数据。

    Laravel的视图层代码放在resources下

    ①视图页面存放于resources/views

    (刚建立完工程时只有welcome.blade.php文件)

    ②视图的样式放于resources/sass

    ③视图文件是.blade.php,即支持laravel blade模板 语法的php文件。blade模板语法参看文档https://laravel.com/docs/7.x/blade

    ④在resources/views目录下创建about.blade.php

    ⑤在routes/web.php中添加路由(路由定义了WEB应用中各种页面/API请求的入口),通过Get请求, 在about路径下能获取到about页面。

    (2)控制层:操作视图和模型层,控制数据在视图 和模型层之间流动。

    ①Laravel的控制器层代码放在app/Http/Controller中

    ②创建控制器可利用artisan工具(它是laravel提供的命令行

    工具),执行命令: php artisan make:Controller <控制器类名>

    ③利用artisan工具创建AboutController控制器

    在laragon打开终端,使用cd进入项目Todos

    输入命令php artisan make:Controller AboutController

    ④在控制器中定义index方法返回about页面

    ⑤在web.php用AboutController的index方法替代 /about路由中的处理函数

    (3)模型层:代表一个存取数据的对象。

    ①Laravel的模型层代码放在app/中

    ②创建模型可利用artisan工具,执行命令:php artisan make:Model <模型类名>

    ③在.env中设置数据库连接配置

    数据库名和数据库密码根据自己的写

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

    迁徙文件位于database/migrations目录中

    创建迁徙文件可用命令: php artisan make:migration <迁徙文件名称>

    迁徙文件中创建表字段

    执行数据库迁徙

    在laragon打开终端,cd进入工程目录,输入命令 php artisan migrate

    ⑤利用Seeder和Factory填充测试数据

    创建TodoFactory:php artisan make:factory <工厂名称> -m <模型名>

    • 创建TodoSeeder填充数据并在其中引用factory生成伪数据

    创建TodoSeeder:php artisan make:seeder <seeder名称>

    在终端执行seed操作,并在数据库验证填充情况

    三、MVC模式下实现TODOS列表

    (1) M —— Todo Model 模型数据

    (2) V —— todos/index.blade.php 视图

    (3) C —— TodoController 控制器

    (4) 在C中取出M中的数据送到V中显示

    四、视图层部分

    (1)welcome. blade.php欢迎界面

    视图

    路由

    效果图

    点击TODOS APP即可实现页面跳转

    (2)index.blade.php列表展示

    视图

    路由

    效果图

    (3)app.blade.php 导航栏与提示

    视图

    效果图

    (4)create.blade.php向列表添加新内容

    路由

    效果图

    ①未输入完整

    ②输入完整

    (5)show.blade.php 查看详情

    点击view即可跳转到show.blade.php

    视图

    路由

    效果图

    (6)edit.blade.php

    视图

    路由

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l5uI0KiT-1593518845348)(media/1379219f5f7308f8019fc3efee62a9da.png)]

    效果图

    五、控制器

    (1)数据创建

    表单数据提交在create.blade.php中

    控制器

    在TodoController.php的一部分

    效果图

    新建表单内容时的提示消息已在四-(4)展示。当新建内容提交成功后,会在列表中展示出来。如四-(4)的新建内容

    (2)数据修改

    表单数据修改在edit.blade.php中

    控制器

    在TodoController.php的一部分

    效果图

    ①修改前

    ②修改内容

    ③提交修改

    (3)数据删除

    表单数据修改在index.blade.php中

    控制器

    在TodoController.php的一部分

    效果图

    ①删除前

    ②删除后(删除了第三个)

    (4)已完成的显示

    视图层信息在index.blade.php中

    控制器

    在TodoController.php的一部分

    效果图

    ①点击Complete前

    ②点击后

    (2)已完成的取消

    视图层信息在show.blade.php中

    控制器

    在TodoController.php的一部分

    效果图

    ①随机选一个表示为已完成的项。点击VIEW

    ②点击Conceal

    (2)已完成的取消

    视图层信息在show.blade.php中

    控制器

    在TodoController.php的一部分

    效果图

    ①随机选一个表示为已完成的项。点击VIEW

    ②点击Conceal

    Processed: 0.011, SQL: 9