todos app简单编写(web)

武灵枫 173080175

以下是关于次app的展示截图

软件:PhpStorm 2019.3.2 x64、laragon

下面是创建过程

创建完成后,访问地址http://todos.test/看是否正常

用phpstorm打开工程目录

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

 

后面打开终端

下面是控制器中定义的一些方法

class TodoController extends Controller
{
    public function index(){
        $todos = Todo::orderByDesc('created_at')->get();
        return view('todos.index')->with(['todos'=>$todos]);
        // return view('todos.index');
}
    public function  show(Todo $todo){
//      die(var_dump($todoId));
 //     dd($todoId);
       //$to do =To do::findOrFail($todoId);
        return view('todos.show' , compact('todo'));
//        return $todo;
    }
    public function create(){
        return view('todos.create');
    }
    //武灵枫 173080175
    public function store(Request $request){
        $request->validate([
            'name' =>'required|min:3|max:20',
            'desc' =>'required'
        ]);
        $name = $request->get('name');
        $description = $request->get('desc');
        $todo = new Todo();
        $todo->name = $name;
        $todo->description = $description;
        $todo->save();
        return redirect('/todos');
    }
    public function edit(Todo $todo){
      //  $todo = Todo::findOrFail($todoId);
        return view('todos.edit',compact('todo'));
    }
    public function update(Todo $todo,Request $request){
        $request->validate([
            'name' =>'required|min:3|max:50',
            'desc' =>'required'
        ]);
        $name = $request->get('name');
        $description = $request->get('desc');
       // $todo = Todo::findOrFail($todoId);
        $todo->name = $name;
        $todo->description = $description;
        $todo->save();
        $request->session()->flash('success-info','更新成功!');
        return redirect("/todos{$todo->id}");
    }
    public function destroy(Todo $todo){
      //  $todo = Todo::findOrFail($todoId);
        try {
            $todo->delete();
        }catch (\Exception $e){
            dd($e);
        }
        return redirect('/todos');
    }
    //
}

在.env配置文件中更改数据为自己数据库的名称和密码

 创建模型

创建迁徙文件

数据库迁徙

创建生成伪数据 

 创建各类视图

<!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>
@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>

 创建公用布局app.blade.phpapp.blade.phpapp.blade.php

<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <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-toggle-icon"></span>
    </button>
    {{--武灵枫 173080175--}}
    <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="/todos/create">create</a>
            </li>
        </ul>
    </div>
</nav>
<div class="container">
    @if(session()->has('success-info'))
        <div class="alert alert-success mt-2" role="alert">
            {{session('success-info')}}
        </div>
    @endif
    @yield('content')
</div>


<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>

所有路由设置

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');

详细页show.blade.php

 在控制器update方法中,添加设置flash的代码

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值