Laravel框架下的Todos项目

laravel框架下的Todos项目

需要工具:phpStrom和laragon

一、工程创建

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

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

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

  1. Ctrl+C中断创建

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

  3. 重新加载Apache

  4. 通过下图方式快速访问

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

使用phpStrom打开工程目录

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

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

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

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

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

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

Laravel的视图层代码放在resources下

①视图页面存放于resources/views

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

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

②视图的样式放于resources/sass

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

③视图文件是.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页面。

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

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

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

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

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

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

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

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

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

  • 输入命令php artisan make:Controller AboutController

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 迁徙文件中创建表字段

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

  • 执行数据库迁徙

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

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

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

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

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

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

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

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

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

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

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

三、MVC模式下实现TODOS列表

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

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

(3) C —— TodoController 控制器

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

四、视图层部分

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

视图

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

路由

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

效果图

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

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

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

视图

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

路由

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

效果图

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

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

视图

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

效果图

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

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

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

路由

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

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

效果图

①未输入完整

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

②输入完整

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

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

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

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

视图

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

路由

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

效果图

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

(6)edit.blade.php

视图

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

路由

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

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

效果图

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

五、控制器

(1)数据创建

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

控制器

在TodoController.php的一部分

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

效果图

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

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

(2)数据修改

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

控制器

在TodoController.php的一部分

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

效果图

①修改前

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

②修改内容

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

③提交修改

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

(3)数据删除

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

控制器

在TodoController.php的一部分

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

效果图

①删除前

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

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

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

(4)已完成的显示

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

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

控制器

在TodoController.php的一部分

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

效果图

①点击Complete前

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

②点击后

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

(2)已完成的取消

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

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

控制器

在TodoController.php的一部分

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

效果图

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

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

②点击Conceal

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

(2)已完成的取消

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

[外链图片转存中...(img-FQIB9b0J-1593518845374)]

控制器

在TodoController.php的一部分

[外链图片转存中...(img-t8CXQUb1-1593518845376)]

效果图

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

[外链图片转存中...(img-9jTsYcsX-1593518845377)]

②点击Conceal

[外链图片转存中...(img-lUhThoyO-1593518845379)]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值