Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
com/laravel-5-crud-
application-vue-
js/?utm_source=www.laravelinterviewquestions.com
(Outro Link)
storage/
bootstrap/cache
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your database name
DB_USERNAME=your mysql username
DB_PASSWORD=your mysql password
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
After saving above file run below command to migrate your tables.This will create a new table in your
database named posts.
running above command will create a new file name Post.php in our app directory. Open that file and
add following code in that.
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
<php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
/**
* Display our Vue js landing Page.
*
* @return \Illuminate\Http\Response
*/
public function home()
{
return view('vueApp');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return Post::orderBy('id','DESC')->get();
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required',
'description' => 'required',
]);
$create = Post::create($request->all());
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
return Post::find($id);
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
return Post::find($id);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$this->validate($request, [
'name' => 'required',
'description' => 'required',
]);
$post = Post::find($id);
if($post->count()){
$post->update($request->all());
return response()->json(['status'=>'success','msg'=>'Post u
pdated successfully.']);
}else{
return response()->json(['status'=>'error','msg'=>'Error in
updating Post']);
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$post= Post::find($id);
if($post->count()){
$post->delete();
return response()->json(['status'=>'success','msg'=>'Post d
eleted successfully']);
}else{
return response()->json(['status'=>'error','msg'=>'Error in
deleting Post']);
}
}
}
Route::get('/', 'ApisController@home');
Route::resource('/api','ApisController');
Setting and configuring Vue js with Laravel 5.5
In this step, we going to install all Vue js dependencies using NPM, create Vue components and
write and configure Vue methods to interact with our Laravel APIs
npm install
Once the dependencies of have been installed using npm install, you can compile your SASS files to
plain CSS using Laravel Mix. Run npm run dev command on the terminal to process the instructions
written in your webpack.mix.js file. npm run dev command will process the instruction written
in webpack.mix.jsfile and place your compiled CSS and js in public/css and public/js directory.
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
window.VueRouter=require('vue-router').default;
window.VueAxios=require('vue-axios').default;
window.Axios=require('axios').default;
// registering Modules
Vue.use(VueRouter,VueAxios, axios);
const routes = [
{
name: 'Listposts',
path: '/',
component: Listposts
},
{
name: 'Addpost',
path: '/add-post',
component: Addpost
}
,
{
name: 'Editpost',
path: '/edit/:id',
component: Editpost
}
,
{
name: 'Deletepost',
path: '/post-delete',
component: Deletepost
},
{
name: 'Viewpost',
path: '/view/:id',
component: Viewpost
}
];
new Vue(
Vue.util.extend(
{ router },
AppLayout
)
).$mount('#app');
Creating your Vue components to create, edit, delete, list, view posts.
All vue js components are kept in resources/assets/js/components directory.
<template>
<div class="container">
<div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<style>
.logo {
width: 50px;
float: left;
margin-right: 15px;
}
.form-group {
max-width: 500px;
}
.actions {
padding: 10px 0;
}
.glyphicon-euro {
font-size: 12px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
<td>
<router-link class="btn btn-warning btn-xs" v-bind:to="{name: 'Editpost', params: {i
d: post.id}}">Edit</router-link>
<router-link class="btn btn-danger btn-xs" v-bind:to="{name: 'Deletepost', params: {
id: post.id}}">Delete</router-link>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data:function () {
return {posts: '', searchKey: ''};
},
created: function(){
let uri = 'http://127.0.0.1:8000/api/';
Axios.get(uri).then((response) => {
this.posts = response.data;
});
},
computed: {
filteredPosts: function () {
if(this.posts.length){
return this.posts.filter(function (post) {
return this.searchKey=='' || post.name.indexOf(this.searchKey) !== -1;
},this);
}
}
}
</script>
<script>
export default {
data: function () {
return {post: {name: '', description: ''}}
},
methods: {
createPost: function() {
let uri = 'http://127.0.0.1:8000/api/';
Axios.post(uri, this.post).then((response) => {
this.$router.push({name: 'Listposts'})
})
}
}
}
</script>
//Editpost.vue
<template id="post-edit">
<div>
<h2>Edit post</h2>
<form v-on:submit.prevent="updatePost">
<div class="form-group">
<label for="edit-name">Name</label>
<input class="form-control" id="edit-name" v-model="post.name" required/>
</div>
<div class="form-group">
<label for="edit-description">Description</label>
<textarea class="form-control" id="edit-description" rows="3" v-model="post.descript
ion"></textarea>
</div>
<script>
export default {
data: function () {
return {post: {name: '', description: ''}}
},
created: function(){
let uri = 'http://127.0.0.1:8000/api/'+this.$route.params.id+'/edit';
Axios.get(uri).then((response) => {
this.post = response.data;
});
},
methods: {
updatePost: function() {
let uri = 'http://127.0.0.1:8000/api/'+this.$route.params.id;
Axios.patch(uri, this.post).then((response) => {
this.$router.push({name: 'Listposts'})
})
}
}
}
</script>
<script>
export default {
data: function () {
return {post: {name: '', description: ''}}
},
created: function(){
let uri = 'http://127.0.0.1:8000/api/'+this.$route.params.id+'/edit';
Axios.get(uri).then((response) => {
this.post = response.data;
});
},
methods: {
deletePost: function() {
let uri = 'http://127.0.0.1:8000/api/'+this.$route.params.id;
Axios.delete(uri, this.post).then((response) => {
this.$router.push({name: 'Listposts'})
})
}
}
}
</script>
//Viewpost.vue
<template id="post">
<div>
<h2>{{ post.name }}</h2>
<b>Description: </b>
<div>{{ post.description }}</div>
<br/>
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<router-link v-bind:to="'/'">Back Post list</router-link>
</div>
</template>
<script>
export default {
data: function () {
return {post: {name: '', description: ''}}
},
created: function(){
let uri = 'http://127.0.0.1:8000/api/'+this.$route.params.id;
Axios.get(uri).then((response) => {
this.post = response.data;
});
}
</script>
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</div>
<section id="app">
</section>
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Above command will start the server on port 8000. your app URL something looks like
http://127.0.0.1:8000/ or
http://localhost:8000/ copy the URL and open it in your favorite Browser.
Thats it, Thanks for reading please feel free to add a comment if you found any issue and trouble.
Also, Complete source code of this tutorial is available on Github you can clone from below
link https://github.com/sharadjaiswal1411/vuelaraveldemo
Article Source : https://www.onlineinterviewquestions.com/laravel-5-crud-application-vue-js/