Laravel中的Websockets-第2部分:設置評論API和AJAX



我們都急於編寫一些代碼來與Websocket交互,但是首先我們需要建立必要的代碼基礎,以開始向用戶提交和顯示評論。設置好零件後,我們可以輕鬆地向其中添加Websocket,以進一步增強體驗。

這一集將創建一個供我們與之交互的小型API,並將創建一些結構來保存我們的評論。

首先,我們需要創建資料庫遷移來存儲我們的注釋。這將需要為我們的注釋創建遷移,模型和控制器。

我們將為注釋添加2個API端點。第一種是顯示特定帖子的所有評論。第二個端點將允許我們通過API保存新評論。

然後通過設置前端來使用此API。我們將創建兩個Vue.js方法來處理此問題。第一個是getComments(),它獲取當前帖子的所有評論,第二個是postComments(),它將為當前帖子發布一個新評論。

下一步:實際上,我們連接了Websocket,以便在實時提交新評論時將其顯示在頁面上!

====書面教學====

「掌握Laravel中的Websockets」大師系列頁面:

Mastering Websockets with Laravel Echo

第2部分:設置注釋AJAX(書面教程)

Websockets in Laravel – Part 2: Creating Comments AJAX


====這一系列的更多內容。 ====

「掌握Laravel中的Websocket」系列的完整播放列表:

====下載源代碼====

該系列的Github代碼倉庫:
https://github.com/DevMarketer/Laravel_Echo_Tutorial

下載此劇集的源代碼:
https://github.com/DevMarketer/Laravel_Echo_Tutorial/releases/tag/Part2

====跟我來====

訂閱新版本!

訂閱DevMarketer Insider(電子郵件)
https://confirmsubscription.com/h/d/5EDC91CF554832D1

Twitter-http://twitter.com/_jacurtis
(問我問題!)

====問題? ====

在下面發表評論,我或其他人可以為您提供幫助。
對於快速問題,您可能還想在Twitter上問我,我幾乎立即做出回應。

給我發電子郵件[email protected]

感謝您的支持! 。

28 comments
  1. In the store method of CommentController where you fetch the comment the from database again using with user, we can instead just use $comment->load('user'); and it will eager load the user. Thanks very much for this great detailed tutorial.

  2. if you got 404 not found error. then use full url in axios.get function. like this.
    axios.get('/echo/public/api/posts/'+this.post.id+'/comments')

  3. you are too slow man…
    I would like to advise you to make short length tutorials and kindly check after a few lines of code so if a view is watching he/she does not have to go back to the beginning of the tutorial to check where they have made a mistake.

  4. Awesome tutorial, although I encounter an error: basically vue inspector cannot find any Vue component. even in network tab Vue.js is not pulled into the application. Any idea? I also tried to run npm run development again :S….with not results. I would appreciate any help with this! thanks 🙂

  5. I get only curly braces at comment {{comment.user.name}} ..
    when I installed vue extension for chrome, it says "vue.js not detected"
    I also added the cdn script tag inside app.blade.php . What can be the problem?

  6. I have some little problem , when I save a comment it is giving 500 error code in network and there written that the problem is with mass assignment though I have the same code as yours. What should I do to solve this problem?

  7. I have a small question if you dont mind, what is better, to write the vue script inside the blade like you are doing here or write it in seperate component file? Seems easier to do it in blade since you get easy access to laravel data instead of having to make api calls for everything from the component, but this way youre making the code itself public right? which way is generally used in production?

  8. Alex thanks for great tutorials, I am a newbie to Laravel and I learnt a lot with you! I just have a problem, I can not load the comments to a posts. It returns an error post 403(Forbidden)
    Thanks again!

Comments are closed.