简单介绍下利用laravel框架实现具体应用

173080172 辛荣

简单介绍下利用laravel框架实现具体应用

简单介绍下利用laravel框架实现 Todos App

一、Laravel环境搭建

1、集成开发环境:PHPSTORM、快速搭建开发环境laragon

2、快速创建Laravel App

创建成功

创建完成后,重新运行laralvel,访问地址todos.test

用phpstorm打开工程目录

二、创建视图

Laravel的视图层代码放在resources下

视图页面存放于resources/views

视图的样式放于resources/sass(css预处理器)

视图文件是.blade.php,即支持laravel blade

模板语法的php文件 blade模板语法参看文档

1、建立index.blade.php,并在视图中引入bootstrap模板

2.添加show.blade.php

3.在resources/views下创建layouts目录,并在次目录下创建app.blade.php布局模板

4.在resources/views/todos下创建create.blade.php   edit.blade.php

5.导航页面参考

代码如下:

<!doctype html>
<html lang="en">
<head>
    <title>Todos</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
 
{{--    <link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.3.3/css/bootstrap.min.css">--}}
</head>
<body>
{{---辛荣 173080172---}}
@extends('layouts.app')
@section('title','TODO CREATE')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div>
            <h1 class="text-center">Todos list</h1>
            <ul class="list-group">
                @foreach($todos as $todo)
                    <li class="list-group-item">
                    {{$todo->name}}
                    @if($todo->is_completed)
                            <span class=" badge badge-pill badge-success">已完成</span>
                        @else
                        <span class="badge badge-pill badge-danger">未完成</span>
                        @endif
                        <a class="btn btn-primary float-right" href=" /todos/{{$todo->id}}">View</a>
                        {{--<p>{{$todo->description}}</p>--}}
                        <form action="/todos/{{$todo->id}}" method="post"
                            class="d-inline-block float-right mr-2">
                            @method('delete')
                            @csrf
                            <button type="submit" class="btn btn-danger">Delete</button>
                        </form>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
@endsection
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
{{--<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.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>

三、路由器设置

1、在routes/web.php中创建TODO添加路由

2、创建页路由、创建页获取路由、创建TODO提交的处理页路由

3、编辑页路由、编辑页获取路由、’编辑TODO的处理页路由

4、删除TODO的处理页路由

5、完成TODO的处理页路由

Route::get('/', function () {
    return view('welcome');
});
Route::get('api/users/{user}',function (App\User $user) {
    return $user->email;
});
/*Route::get('/about', function () {
    return view('about');
});*/
//Route::get('/about', 'AboutController@index');
Route::get('/todos', 'TodoController@index');
Route::get('todos/create','TodoController@create');
Route::post('/todos','TodoController@store');
Route::get('/todos/{todo}/edit','TodoController@edit');
Route::get('/todos/{todo}','TodoController@show');
Route::put('/todos/{todo}','TodoController@update');
Route::patch('/todos/{todo}','TodoController@update');
Route::delete('/todos/{todo}','TodoController@destroy');

四、最终控制

在app/Http/Controller中建立TodoController控制器,并在其中定义index方法返回todos视图

1、show的获取方法和创建页的获取

2、添加后端验证

3.添加设置flash的代码

4.添加删除按钮

4.添加设置flash的代码

五、成果展示

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值