简体   繁体   English

在laravel中将视图绑定在一起以创建博客

[英]Binding views together in laravel to create a blog

I'm new in Laravel and I'm facing some difficulties to bind views together. 我是Laravel的新手,在将视图绑定在一起时遇到了一些困难。 I'm using Bootsrap and I'm also using tinyMCE as editor for posts(title, content). 我正在使用Bootsrap,也正在使用tinyMCE作为帖子(标题,内容)的编辑器。 My create view works perfect, show view as well. 我的创建视图工作完美,同时也显示视图。 All I need is, when my page redirects to show.blade.php where I have all my posts after I create them, I want my Update button to redirect me to my edit view where I can actually edit and update them and finally go back to show view. 我需要的是,当页面重定向到show.blade.php之后,在创建完所有帖子后,我都希望我的“更新”按钮将我重定向到我的编辑视图,在这里我可以进行实际的编辑和更新,最后返回显示视图。 Thank you in advance :) 先感谢您 :)

Here is my create view: 这是我的创建视图:

 <script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=fg5tc8gb4rtw6p9n3njd2hi4965rketxda84pbcfs09hb5x2"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: '.editor1', plugins: 'code , save, autoresize , textcolor colorpicker , emoticons, textpattern , wordcount', toolbar: 'save , restoredraft , forecolor backcolor, emoticons', save_onsavecallback: function () { var content = tinymce.activeEditor.getContent(); console.log(content); } }); $(document).on('click', '#SubmitBtn', function () { var content = tinymce.activeEditor.getContent(); var data = { 'title': $('#title').val(), 'content': content, '_token': '{{csrf_token()}}' }; $.post('/postData', data, function () { console.log(data); window.location.href="/posts/show" }); }); </script> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <!DOCTYPE html> <html> <head> </head> <body> <h1>Create the title</h1> <form method="POST" action="{{route("postData")}}"> {{csrf_field()}} <label for="title">Click here to edit the title of your post!</label> <input type="text" name="title" id="title"/> <h1>Create the content</h1> <div class="editor1">Click here to edit the content of your post!</div> <input type="button" name="Submit" id="SubmitBtn" value="Submit"/> </form> </body> </html> 

Here is my show view: 这是我的表演视图:

 <!DOCTYPE html> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Id.</th> <th>Title</th> <th>Content</th> <th>Views</th> <th>Action</th> </tr> </thead> <tbody> @foreach($posts as $post) <tr> <th scope="row"></th> <td>{{$post->id}}</td> <td>{{$post->title}}</td> <td>{!! html_entity_decode($post->content) !!}</td> <td>{{$post->view_count}}</td> <td><div class="btn pull-right"> <a href="{{ url('/posts/' . $post->id . '/edit') }}" class="btn btn-primary float-left">Update</a> </div></td> </tr> @endforeach </tbody> </table> </div> </body> </html> 

Here is my current edit view which doesn't return me anything in my browser: 这是我当前的编辑视图,在浏览器中没有返回任何内容:

 <!DOCTYPE html> <html> <head> </head> <body> <h1>Edit Post</h1> <form method="POST"><a href="{{route('posts.show', $post->id)}}"></a> {{csrf_field()}} <div class="form-group"> <label for="title">Title</label> <input type="text" id="title" class="form-control" name="title" placeholder="Title" value="{{$post->title}}"> </div> <div class="form-group"> <label for="content">Content</label> <textarea>{{$post->content}}</textarea> </div> <input type="button" name="Update" value="Update" /> </form> </body> </html> 

Here are my routes: 这是我的路线:

Route::resource('/posts', 'PostController');
Route::get('/posts/create', ['uses' => 'PostController@create', 'as' => 'posts.create']);
Route::post('/postData', ['uses' => 'PostController@store', 'as' => 'postData']);
Route::get('/posts/{id}/edit', ['uses' => 'PostController@edit', 'as' => 'posts.edit']);
Route::get('/post/show', ['uses' => 'PostController@show', 'as' => 'posts.show']);
Route::get('/post/find/{id}', ['uses' => 'PostController@find']);
Route::get('/posts/{id}', ['uses' => 'PostController@update', 'as' => 'posts.update']);

And finally my Controller: 最后是我的控制器:

public function index()
{
    $posts = Post::all();
    return view('posts.index', compact('posts'));
}


public function create()
{
    return view('posts.create');
}


public function store(Request $request)
{
    $post = new Post;
    $post->title = $request['title'];
    $post->content = $request['content'];
    $post->save();

    return redirect()->route("posts.show");
}



public function show()
{
    $posts = Post::all();
    return view('posts.show', compact('posts'));
}



public function find($id)
{
    $post = Post::find($id);
    return $post->title." ".$post->content;
}



 public function edit($id)
{
    $post = Post::findOrFail($id);
    return view('posts.edit', compact('post'));
}

Basically you need to learn the entire CRUD (Create, Read, Update and Delete) in laravel. 基本上,您需要学习laravel中的整个CRUD(创建,读取,更新和删除)。 Here are a few basic tips. 这里有一些基本技巧。 I hope you know a few basic points like Routemodel binding. 我希望您知道一些基本点,例如Routemodel binding. Its pretty easy. 非常简单。

Now what you need is to run php artisan make:controller PostController --resource (The resource flag is not important.) In your route\\web.php, write Route::resource('posts', 'PostController'); 现在,您需要运行php artisan make:controller PostController --resource (资源标志并不重要。)在您的route \\ web.php中,编写Route::resource('posts', 'PostController');

Your links will be <a href="{{route('posts.index')}}">View all</a> . 您的链接将是<a href="{{route('posts.index')}}">View all</a> to create, the form action will be {{route('posts.store')}} where you fill in the details. 要创建的表单操作将是{{route('posts.store')}} ,您将在其中填写详细信息。 in the store function add 在存储功能中添加

public function store(Request $request){
  $data = $request->all();
  Post::create($data);
  return redirect('posts');
}

Make sure you have put the protected $fillable = []; 确保已放置protected $fillable = []; values. 值。 in your blade to show individual post add: 在您的刀片中显示单个帖子,添加:

<td>{{$post->title}}</td>
<td>{{$post->caption}}</td>
<td>{!! html_entity_decode($post->body) !!}</td>

While editing, the textarea for body should also have the 编辑时,正文的文本区域还应具有

<textarea name="body">{!! html_entity_decode($post->body) !!}</textarea>

The link for the show page is <a href="{{route('posts.show', $post->id)}}"></a> and the edit is <a href="{{route('posts.edit', $post->id)}}"></a> 显示页面的链接为<a href="{{route('posts.show', $post->id)}}"></a> ,编辑内容为<a href="{{route('posts.edit', $post->id)}}"></a>

Make sure you add the variable in your controller for each of the functions. 确保为每个功能在控制器中添加变量。

public function show($id){
   return view('posts.show', [ 'posts' => Post::findorfail($id), ]);
}

Same case with the edit. 与编辑相同。

I solved it the long way by adding a new tinymce editor to the edit view this way: 通过将新的tinymce编辑器添加到编辑视图中,我解决了很长的路要走:

  <script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=fg5tc8gb4rtw6p9n3njd2hi4965rketxda84pbcfs09hb5x2"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.6.4/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: '.editor2', plugins: 'code , save, autoresize , textcolor colorpicker , emoticons, textpattern , wordcount', toolbar: 'save , restoredraft , forecolor backcolor, emoticons', save_onsavecallback: function () { var content = tinymce.activeEditor.getContent(); console.log(content); } }); $(document).on('click', '#SubmitBtn', function () { var content = tinyMCE.getContent('.editor1'); var inst, contents = new Post(); for (inst in tinyMCE.editors) { if (tinyMCE.editors[inst].getContent) contents[inst] = tinyMCE.editors[inst].getContent(); } }); </script> 
 <!DOCTYPE html> <html> <head> </head> <body> <h1>Create the title</h1> <form method="POST" action="{{route("postData")}}"> {{csrf_field()}} <label for="title">Click here to edit the title of your post!</label> <input type="text" name="title" id="title" value="{{ old('title', $post->title)}}"/> <h1>Create the content</h1> <label for="content">Click here to edit the content of your post!</label> <input type="text" name="content" class="editor2" value="{{ old('content', $post->content)}}"/> <input type="button" name="Update" id="SubmitBtn" value="Update"/> <input action="action" type="button" value="Back" onclick="window.history.go(-1); return false;" /> </form> </body> </html> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM