Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sagor110090/laravel-crud-generator-vue-api
https://github.com/sagor110090/laravel-crud-generator-vue-api
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/sagor110090/laravel-crud-generator-vue-api
- Owner: sagor110090
- Created: 2020-08-18T11:14:55.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-08T07:59:25.000Z (over 3 years ago)
- Last Synced: 2024-04-17T13:02:31.177Z (9 months ago)
- Language: Blade
- Size: 29.3 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## Laravel Vue API Crud Generator
#### Overview
A Laravel package that lets you generate boilerplate code for a Vue.js/Laravel app. Simply enter the name of a database table and based on that it will create:
- A Laravel model
- A Laravel controller (with get, list, create, update, delete as well as validation based on a chosen DB table)
- Laravel routes (get, list, create, update, delete)
- 2 Vue.js single file components to create, update, list, delete and show (using Vform & axios)
This package aims to speed up the process of communicating between backend (Laravel) and frontend (Vue.js).
### Installation
`composer require sagor110090/laravel-vue-api-crud-generator`
## Usage
Firstly you should create a new migration in the same way that you usually would. For example if creating a posts table use the command
`php artisan make:migration create_posts_table`
Then in your migration file add your fields as usual
```
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title',200);
$table->text('content')->nullable();
$table->timestamps();
});
```
Then run the migrate command to create the posts table
`php artisan migrate`
Once you have done that you just need to run one `vueapi` command. Add the name of your table to the end of the command so in this case it's posts.
`php artisan vueapi:generate posts`
This will then generate all the files mentioned above.
Once you have run this command, using the `posts` example above, it will create the following boilerplate files:
### Routes
Based on a `posts` DB table it will produce these routes
```
Route::get('posts', 'PostsController@list');
Route::get('posts/{id}', 'PostsController@get');
Route::post('posts', 'PostsController@create');
Route::put('posts/{id}', 'PostsController@update');
Route::delete('posts/{id}', 'PostsController@delete');
```
### Controller
Based on a `posts` DB table it will produce this controller
```
validate([
'title' => 'required |max:200 ',
'content' => 'required ',
'meta_description' => 'required |max:160 ',
],[
'title.required' => 'title is a required field.',
'title.max' => 'title can only be 200 characters.',
'content.required' => 'content is a required field.',
'meta_description.required' => 'meta_description is a required field.',
'meta_description.max' => 'meta_description can only be 160 characters.',
]);
$posts = Posts::create($request->all());
return $posts;
}
public function update(Request $request, $id){
$validatedData = $request->validate([
'title' => 'required |max:200 ',
'content' => 'required ',
'meta_description' => 'required |max:160 ',
],[
'title.required' => 'title is a required field.',
'title.max' => 'title can only be 200 characters.',
'content.required' => 'content is a required field.',
'meta_description.required' => 'meta_description is a required field.',
'meta_description.max' => 'meta_description can only be 160 characters.',
]);
$posts = Posts::findOrFail($id);
$input = $request->all();
$posts->fill($input)->save();
return $posts;
}
public function delete(Request $request, $id){
$posts = Posts::findOrFail($id);
$posts->delete();
}
}
?>
```
### Model
Based on a `posts` DB table it will produce this model
```
```
### Vue (List template)
Based on a `posts` DB table it will produce this Vue.js list single file component (Posts-list.vue)
```
Create post
title
content
meta_description
{{ (form.busy) ? 'Please wait...' : 'Submit'}}
List posts
-
post {{ index }}
{{ (form.busy) ? 'Please wait...' : 'Delete'}}
Loading...
No posts exist
import { Form, HasError, AlertError } from 'vform'
export default {
name: 'Post',
components: {HasError},
data: function(){
return {
posts : false,
form: new Form({
"id" : "",
"title" : "",
"content" : "",
"meta_description" : "",
"created_at" : "",
"updated_at" : "",
})
}
},
created: function(){
this.listPosts();
},
methods: {
listPosts: function(){
var that = this;
this.form.get('/posts').then(function(response){
that.posts = response.data;
})
},
createPost: function(){
var that = this;
this.form.post('/posts').then(function(response){
that.posts.push(response.data);
})
},
deletePost: function(post, index){
var that = this;
this.form.delete('/posts/'+post.id).then(function(response){
that.posts.splice(index,1);
})
}
}
}
.posts{
margin:0 auto;
width:700px;
display:flex;
.half{
flex:1;
&:first-of-type{
margin-right:20px;
}
}
form{
.form-group{
margin-bottom:20px;
label{
display:block;
margin-bottom:5px;
text-transform: capitalize;
}
input[type="text"],input[type="number"],textarea{
width:100%;
max-width:100%;
min-width:100%;
padding:10px;
border-radius:3px;
border:1px solid silver;
font-size:1rem;
&:focus{
outline:0;
border-color:blue;
}
}
.invalid-feedback{
color:red;
&::first-letter{
text-transform:capitalize;
}
}
}
.button{
appearance: none;
background: #3bdfd9;
font-size: 1rem;
border: 0px;
padding: 10px 20px;
border-radius: 3px;
font-weight: bold;
&:hover{
cursor:pointer;
background: darken(#3bdfd9,10);
}
}
}
}
```
### Vue (Single template)
Based on a `posts` DB table it will produce this Vue.js single file component (Posts-single.vue)
```
Update Post
< Back to posts
title
content
meta_description
{{ (form.busy) ? 'Please wait...' : 'Update'}}
{{ (form.busy) ? 'Please wait...' : 'Delete'}}
Loading post...
import { Form, HasError, AlertError } from 'vform'
export default {
name: 'Post',
components: {HasError},
data: function(){
return {
loaded: false,
form: new Form({
"id" : "",
"title" : "",
"content" : "",
"meta_description" : "",
"created_at" : "",
"updated_at" : "",
})
}
},
created: function(){
this.getPost();
},
methods: {
getPost: function(Post){
var that = this;
this.form.get('/posts/'+this.$route.params.id).then(function(response){
that.form.fill(response.data);
that.loaded = true;
}).catch(function(e){
if (e.response && e.response.status == 404) {
that.$router.push('/404');
}
});
},
updatePost: function(){
var that = this;
this.form.put('/posts/'+this.$route.params.id).then(function(response){
that.form.fill(response.data);
})
},
deletePost: function(){
var that = this;
this.form.delete('/posts/'+this.$route.params.id).then(function(response){
that.form.fill(response.data);
that.$router.push('/posts');
})
}
}
}
.PostSingle{
margin:0 auto;
width:700px;
form{
.form-group{
margin-bottom:20px;
label{
display:block;
margin-bottom:5px;
text-transform: capitalize;
}
input[type="text"],input[type="number"],textarea{
width:100%;
max-width:100%;
min-width:100%;
padding:10px;
border-radius:3px;
border:1px solid silver;
font-size:1rem;
&:focus{
outline:0;
border-color:blue;
}
}
.button{
appearance: none;
background: #3bdfd9;
font-size: 1rem;
border: 0px;
padding: 10px 20px;
border-radius: 3px;
font-weight: bold;
&:hover{
cursor:pointer;
background: darken(#3bdfd9,10);
}
}
.invalid-feedback{
color:red;
&::first-letter{
text-transform:capitalize;
}
}
}
}
}
```
## Configuration
Here are the configuration settings with their default values.
```
base_path('app'),
'controller_dir' => base_path('app/Http/Controllers'),
'vue_files_dir' => base_path('resources/views/vue'),
'routes_dir' => base_path('routes'),
'routes_file' => 'api.php'
];
?>
```
To copy the config file to your working Laravel project enter the following artisan command
`php artisan vendor:publish --provider="sagor110090\vueApi\vueApiServiceProvider" --tag="config"`
##### model_dir
Specifies the location where the generated model files should be stored
#### controller_dir
Specifies the location where the generated controller files should be stored
#### vue_files_dir
Specifies the location where the Vue single file templates should be stored
#### vue_url_prefix
Specifies what prefix should be added to the URL in your view files. The default is `/api` ie `/api/posts`
#### routes_dir
Specifies the location of the routes directory
#### routes_file
Specifies the name of the routes file
### Customising the templates
If you use another frontend framework such as React or you want to adjust the structure of the templates then you can customise the templates by publishing them to your working Laravel project
`php artisan vendor:publish --provider="lummy\vueApi\vueApiServiceProvider" --tag="templates"``
They will then appear in
`\resources\views\vendor\vueApi`
### Variables in the templates
Each template file passes a data array with the following fields
##### $data['singular']
The singular name for the DB table eg Post
##### $data['plural']
The plural name for the DB table eg Posts
##### $data['singular_lower']
The singular name for the DB table (lowercase) eg post
##### $data['plural_lower']
The plural name for the DB table eg (lowercase) eg posts
##### $data['fields']
An array of the fields that are part of the model.
- name (the field name)
- type (the mysql varchar, int etc)
- simplified_type (text, textarea, number)
- required (is the field required)
- max (the maximum number of characters)
### Other things to note
I have only tested this on Laravel MYSQL driver so I'm not sure if it will work on other databases.
In Vue.js files the routes are presumed to be: using the posts example. You can easily configure these from the templates generated
/posts (Posts-list.vue)
/posts/{id} (Posts-single.vue)
Please feel free to contact me with any feedback or suggestions https://github.com/sagor110090