Monday, April 10, 2017

how to post laravel using Vue.js

i'm trying to figure out how to use vue.js, i want to still store the date in a mysql database when a post has been submitted, as well having the post show instantly like ajax(without the page refreshing).

pretty much how can i integrate vue.js when making a post in laravel is the question

Here is my code thus far, here is a rough sketch, im still trying to wrap my head around so please bear with me

dashboard.blade.php

@extends('layouts.layout')

@section('title')
Dashboard
@endsection

@section('content')

<div class="dashboard eli-main">
    <div class="container ">
        <div class="row">
            <div class="col-md-6 col-md-12">
                <h1></h1>

                <h4>What do you have to say?</h4>
                <form action="" method="post">
                    <div class="form-group">
                        <textarea class="form-control" name="body" id="body" rows="5" placeholder="Your Post"></textarea>
                    </div>
                    <button type="submit" class="mybtn2">Create Post</button>
                    <input type="hidden" value="" name="_token">
                </form>


                @foreach($posts as $post)


                <article class="post">
                    <h4></h4>
                    <p class="post-bod">
                        
                    </p>
                    <div class="info">
                        made on 
                    </div>
                </article>

                @endforeach

            </div>


        </div>
    </div>
</div>

<script> 
var app = new Vue({
  el: 'post-bod',
  data: {
    post: body
  }
})
</script>

@endsection

PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;
use App\User;
use Illuminate\Support\Facades\Auth;
use App\Http\Requests;

class PostController extends Controller
{


      public function getDashboard()
       {
           $posts = Post::orderBy('created_at', 'desc')->get();
           $cookie = cookie('saw-dashboard', true, 15);
           $users = User::all();
           $user = new User();
   //        return view('dashboard', array('user'=> Auth::user()), compact('users'))->withCookie($cookie);

           return view('dashboard',array('user'=> Auth::user(), 'posts' => $posts,  compact('users')))->withCookie($cookie);
       }

    public function postCreatePost(Request $request)
    {
        $this->validate($request,[
            'body' => 'required|max:1000'
        ]);

        $post = new Post();
        $post->body = $request['body'];
        $message = 'There was an error';

        if($request->user()->posts()->save($post)){
            $message = 'Post Successfully Created';
        }

        return redirect()->route('dashboard');
    }
}

UserController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\User;
use App\Http\Requests;

class UserController extends Controller
{
    public function getWelcome()
    {
        $user = new User();
        if (Auth::user()){
            return redirect()->route('dashboard');
        }
        return view('welcome',  array('user'=> Auth::user()), compact('users') );
    }


    public function userSignUp(Request $request)
    {

        $this->validate($request,[
            'email' => 'required|email|unique:users',
            'username' => 'required|max:120',
            'password' => 'required|min:4'

        ]);

        $email = $request['email'];
        $username = $request['username'];
        $password = bcrypt($request['password']);

        $user = new User();
        $user->email = $email;
        $user->username = $username;
        $user->password = $password;

        $user->save();




        return redirect()->route('dashboard');



    }

    public function postSignin(Request $request)
    {
        $remember = $request->input('remember_me');

        if(Auth::attempt(['email'=> $request['email'], 'password' => $request['password']], $remember )){
            return redirect()->route('dashboard');
        }

        return redirect()->back();
    }


    public function getLogout()
    {
        Auth::logout();
        return redirect()->route('home');
    }



}



via Owl Man

Advertisement