Last time i did tutorial on how to setup vuejs 2 inside laravel and it was very easy step by step process in order to setup laravel vuejs 2 project application.
Now we will deal with simple vuejs 2 crud application which will have features of real time application like CRUD (Create, Read, Update & Delete). This tutorial helps you to learn how to fetch data from database using laravel as backend and vuejs 2 as frontend.
Lets get started.
We are going to use same old project that we have used in our earlier project where we have made our vuejs 2 project ready to start crud operation. If you are new to this article please refer on:
How to Setup VueJS 2 Inside Laravel Tutorial
There you will have complete tutorial on how to setup vue laravel project initially and after that you will be ready to proceed through this tutorial.
Looking at our project directory structure it should look like this.
Create new folder inside resources/assets/js/components named category and inside it create a new file called ViewCategory.vue
Open ViewCategory.vue and paste below code inside it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<template> <div> <button class="btn btn-primary btn-sm">Add New Category</button> <br> <table class="table primary table-bordered"> <thead> <th>S.N</th> <th>Title</th> <th>Description</th> <th>Action</th> </thead> <tbody> <tr v-for="(category,index) in categories_list"> <td>{{index + 1}}</td> <td>{{category.category_name}}</td> <td>{{category.category_description}}</td> <td> <a class="btn btn-default btn-xs">Edit Category</a> </td> </tr> </tbody> </table> </div> </template> <style> </style> <script> import axios from 'axios'; export default { name:"ViewCategory", data () { return { categories_list : [], } }, methods : { viewCategories() { let instance = this; axios.get('api/categories') .then(function (response) { console.log(response); instance.categories_list = response.data; }) .catch(function (error) { console.log(error); }); } }, mounted() { this.viewCategories(); } } </script> |
Once we have created the component we need to register them in routes in order to navigate through the browser. Lets register inside the routes. Open resources/assets/js/routes.js and register your newly build component.
After registering the component your code should look like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import VueRouter from 'vue-router'; import Home from './components/Home'; import ViewCategory from './components/category/ViewCategory'; let routes = [ { path:"/", component:Home }, { path:"/categories", component:ViewCategory } ]; export default new VueRouter({ routes }); |
Once you have registered your routes, now its time to fetch the data from laravel (backend).
Open command line and type php artisan make:controller CategoryController to create new controller
Open routes/api.php and create new route as below.
|
1 |
Route::get('categories','CategoryController@index'); |
Open your CategoryController.php inside app/Http/Controllers and insert these piece of code below to populate dummy data. If you want to fetch the data from database execute query and send it via json.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Response; class CategoryController extends Controller { public function index() { return Response::json([ [ "id"=>1, "category_name"=>"Sports", "category_description"=>"This section gives info about sports", ], [ "id"=>2, "category_name"=>"Entertainment", "category_description"=>"This section gives info about Entertainment", ], [ "id"=>3, "category_name"=>"News", "category_description"=>"This section gives info about News", ], [ "id"=>4, "category_name"=>"Games", "category_description"=>"This section gives info about Games", ], [ "id"=>5, "category_name"=>"Politics", "category_description"=>"This section gives info about Politics", ] ]); } } |
Once you have finished writing controller go to browser and hit url http://localhost:8000/api/categories you will get the json dummy data that we have just set inside controller.
We have to used this url inside ViewCategory.vue in script section using axios. I have already done so and you can also check by going to VueCategory.vue
*Note : – Axios is the Http based client which helps to get XMLHttp request from browser, if you want more information go here. Laravel comes with axios inbuilt when you had installed modules in previous article.
It fetches the json data from controller and render it into ViewCategory.vue. If you want to fetch the data from database just execute query and send it via json.
I hope this tutorial helps you. If you have any problem, you can contact us via contact page.
Next : Laravel VueJS 2 CRUD Tutorial Part 2 (Insert Data Into Database)
Leave a Reply