如何利用Laraval框架实现TODOS APP(小白一看就会)
2020-07-19 04:49
696 查看
如何利用Laraval框架实现TODOS APP(看了别人博客的方法自己做的,侵删)
1.打开Laragon点击Start All(没下载Laragon的朋友查询资料自行下载)
2.出现如下界面
3.点击菜单-Quick app-Laravel
4.给app取个名儿并点击确定(我这里取名ShumiYakult)
5.进入如下界面
6.等待安装完成(大约5分钟)
7.再次点击Laragon,点击菜单-www-你刚刚取的名(我的是ShumiYakult)
8.出现如下界面则成功。
9.打开PHP.storm,点击todos-resources-views-layouts-app.blade.php。如下图所示。
代码如下。
// A code block var foo = 'bar';
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1 shrink-to-fit=no" name="viewport"> <title>@yield('ShumiYakult')</title> <!-- Fonts --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> </head> <body> <nav class=" navbar fixed-top navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="/">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"> </button> <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 pt-5"> @if(session()->has('success-info')) <div class="pt-sm-3"> <div class="alert alert-success mt-2" role="alert"> {{session('success-info')}} </div> </div> @endif @yield('content') </div> <script src="https://code.jquery.com/jquery-3.4.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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </body> </html>
10.在todos文件夹创建php file,index.blade.php(看清文件夹,目录是todos-resources-todos)
代码如下。
// A code block var foo = 'bar';
@extends('layouts.app') @section('title', 'TODO LIST') @section('content') <h1 class="text-center my-5">Todo Page</h1> <div class="row justify justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header"> Todo List </div> <div class="card-body"> <ul class="list-group"> @foreach($todos ?? '' as $todo) <li class="list-group-item"> <span @if($todo->is_completed) style="text-decoration: line-through"@endif> {{$todo->name}} </span> {{-- {{$todo->name}} @if($todo->is_completed) <span class="badge badge-pill badge-success">已完成</span> @else <span class="badge badge-pill badge-secondary">未完成</span> @endif --}} <a class="btn btn-primary float-right" href="/todos/{{$todo->id}}">View</a> <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> @if(!$todo->is_completed) <form action="/todos/{{$todo->id}}/completed" method="post" class="d-inline-block float-right mr-2"> @method('patch') @csrf <button type="submit" class="btn btn-warning">Complete</button> </form> @endif </li> @endforeach </ul> </div> </div> </div> </div> @endsection
11.在todos文件夹加入show.blade.php
代码如下:
// A code block var foo = 'bar';
@extends('layouts.app') @section('title', 'TODO SHOW') @section('content') <h1 class="text-center my-5">{{$todo->name}}</h1> <div class="row justify justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header font-weight-bold d-flex align-items-center justify-content-between"> Detail @if($todo->is_completed) <span class="badge badge-pill badge-success float-right">已完成</span> @else <span class="badge badge-pill badge-danger float-right">未完成</span> @endif </div> <div class="card-body"> {{$todo->description}} </div> <div class="card-footer"> <a href="/todos/{{$todo->id}}/edit" class="btn btn-block btn-outline-success">Edit</a> </div> </div> </div> </div> @endsection
12.在todos文件夹创建create.blade.php
代码如下:
// A code block var foo = 'bar';
@extends('layouts.app') @section('title', 'TODO CREATE') @section('content') <h1 class="text-center my-5">CREATE A NEW TODO</h1> <div class="row justify justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header"> New </div> <div class="card-body"> <form action="/todos" method="post"> @csrf <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"> @error('name') <div class="invalid-feedback"> {{$message}} </div> @enderror </div> <div class="form-group"> <label for="description">Description</label> <textarea name="description" id="description" rows="3" class="form-control @error('description') is-invalid @enderror"></textarea> @error('description') <div class="invalid-feedback"> {{$message}} </div> @enderror </div> <button type="submit" class="btn btn-primary float-right">Submit</button> </form> </div> </div> </div> </div> @endsection
13.在todos文件夹创建编辑页edit.blade.php
代码如下。
// A code block var foo = 'bar';
// @extends('layouts.app') @section('title', 'TODO EDIT') @section('content') <h1 class="text-center my-5">EDIT TODO</h1> <div class="row justify justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header"> EDIT </div> <div class="card-body"> <form action="/todos/{{$todo->id}}" method="post"> @csrf <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" id="name" value="{{$todo->name}}" class="form-control @error('name') is-invalid @enderror"> @error('name') <div class="invalid-feedback"> {{$message}} </div> @enderror </div> <div class="form-group"> <label for="description">Description</label> <textarea name="description" id="description" rows="3" class="form-control @error('description') is-invalid @enderror"> {{$todo->description}}</textarea> @error('description') <div class="invalid-feedback"> {{$message}} </div> @enderror </div> <button type="submit" class="btn btn-primary float-right">Submit</button> </form> </div> </div> </div> </div> @endsection
14.在resources/routes/web.php中创建todo添加路由
代码如下
// A code block var foo = 'bar';
Route::get('/', function () { return view('welcome'); }); //注册新的路由 //Route::get('/about','AboutController@index');//单个资源访问路由 Route::get('/todos','TodoController@index'); Route::get('/todos/create','TodoController@create');//创建页获取路由 Route::get('/todos/{todo}','TodoController@show');//单个资源访问路由 Route::get('/todos/{todo}/edit','TodoController@edit');//编辑页获取路由 Route::post('/todos','TodoController@store');//创建TODO提交的处理页路由 Route::post('/todos/{todo}','TodoController@update');//编辑TODO提交的处理页路由 Route::patch('/todos/{todo}','TodoController@update');// Route::delete('/todos/{todo}','TodoController@destroy');//删除TODO的处理页路由 Route::patch('/todos/{todo}/completed','TodoController@complete');//完成TODO的处理页路由
15.在app/Http/Controller中建立TodoController控制器
代码如下:
// A code block var foo = 'bar';
<?php namespace App\Http\Controllers; use App\Todo; use Illuminate\Http\Request; class TodoController extends Controller { // public function index() { $todos = Todo::query()->orderByDesc('created_at')->get(); //$todos = Todo::all();//取得模型中的所有数据 //$items = Todo::all(); //return view('todos.index'); return view('todos.index')->with(['todos' => $todos]);//将数据送给视图 } public function show(Todo $todo) { //dd($todoId); //$todo = Todo::findOrFail($todoId); //return $todo; return view('todos.show')->with(['todo'=> $todo]); } public function create() { return view('todos.create'); } public function store(Request $request) { $request->validate([ 'name' => 'required|min:3|max:20', 'description' => 'required' ]); $name = $request->get('name'); $description = $request->get('description'); $todo = new Todo(); $todo->name = $name; $todo->description = $description; $todo->save(); $request->session()->flash('success-info', 'Create successful!'); return redirect('/todos'); } public function edit(Todo $todo) { //dd($todoId); //$todo = Todo::findOrFail($todoId); //return $todo; return view('todos.edit')->with(['todo'=> $todo]); } public function update(Todo $todo, Request $request) { $request->validate([ 'name' => 'required|min:3|max:50', 'description' => 'required' ]); $name = $request->get('name'); $description = $request->get('description'); //$todo = Todo::findOrFail($todoId); $todo->name = $name; $todo->description = $description; $todo->save(); $request->session()->flash('success-info', 'Update successful!'); return redirect("/todos/{$todo->id}"); } public function destroy(Todo $todo, Request $request) { //$todo = Todo::findOrFail($todoId); try{ $todo->delete(); }catch (\Exception $exception){ dd($exception); } $request->session()->flash('success-info', 'Delete successful!'); return redirect('/todos'); } public function complete(Todo $todo) { $todo->is_completed = true; $todo->save(); return redirect('/todos'); } }
16.在Chrome浏览器中打开
以上方法也有看其他教程。
相关文章推荐
- 利用laravel框架实现TODOS APP
- 小陈教你利用laravel框架实现Todos APP
- 利用lavarel框架实现Todos App
- Laravel工具的使用,利用laravel框架实现一个具体的应用(Todos App)
- 利用laravel框架实现基本的TODOS APP
- 如何利用App打造自明星实现自盈利
- 如何在SpringMVC框架中利用Java反射机制和Javassist实现Java对象、属性、注解的动态创建生成
- 利用CTS框架实现APP的自动化白盒测试
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
- 关于如何实现在整合struts2和hibernate4框架下实现many-to-one级联数据表在JSP页面中的输出
- 视频直播APP是如何快速利用直播风口实现高转化的
- 信息系统开发平台OpenExpressApp:【OpenTest】 之 如何实现自动化测试框架
- 信息系统开发平台OpenExpressApp:【OpenTest】 之 如何实现自动化测试框架
- App开发如何利用Fidder,在api接口还没有实现的情况下模拟数据,继续开发
- 【远程调用框架】如何实现一个简单的RPC框架(三)优化一:利用动态代理改变用户服务调用方式
- 关于如何实现在整合struts2和hibernate4框架下对many-to-one级联数据的存储
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
- 移动App开发 MUI框架 利用软键盘的搜索键实现页面跳转并传值
- 教你如何利用POI和JFreeChart框架实现生成Excel文件(生成 统计图)
- 教你如何利用POI和JFreeChart框架实现生成Excel文件(生成 统计图)