Com utilitzar Vue Router per crear formularis Laravel i Vue CRUD

Bloc

Com utilitzar Vue Router per crear formularis Laravel i Vue CRUD

En aquest tutorial vaig a crear Laravel i Vue js crud tutorial. Crearem un Sol·licitud d'una sola pàgina (SPA) utilitzant Laravel i Vue.js. En aquest tutorial aprendreu a utilitzar el router de vista i el paquet en forma de V per crear laravel vue js crud.



Actualment, JS Framework més populars són Angular JS i Vue JS. Angular JS i Vue JS són un JS Framework molt fàcil d'utilitzar i més populars. Proporciona la gestió de tot el projecte o aplicació sense actualitzar la pàgina i una potent validació de jquery.






En aquest post us explicaré com crear una aplicació CRUD (crear, llegir, actualitzar i suprimir) amb paginació mitjançant Laravel 6. En aquest exemple he afegit la Gestió d'usuaris amb la qual podeu fer diverses opcions, com ara a continuació:



1. Llistat d'usuaris



2. Creació d'usuari






3. Edició de l'usuari

4. Eliminació d'usuari

Us mostraré com utilitzar JavaScript moment js i com utilitzar el filtre Vue, la barra de progrés Vue, el router Vue per completar aquesta aplicació de pàgina única.

quant de temps triga a dipositar l'aplicació d'efectiu

Podeu implementar una aplicació crua des de zero, així que no us preocupeu si podeu implementar-la mitjançant el pas simple següent. Després de crear un exemple reeixit, trobareu el disseny següent:

Previsualització: taula d’usuaris

Previsualització: Afegeix modalitat d'usuari

Vista prèvia: missatge d'error abans d'enviar dades no validades

laravel-vue-js-crud-preview-3

com vendre safemoon a la cartera de confiança

Previsualització: Edita la finestra modal

laravel-vue-js-crud-preview-4

Vista prèvia: Edita la finestra modal amb missatge d'error

Pas 1: Instal·lació de Laravel

Al primer pas, si no heu instal·lat Laravel al vostre sistema, haureu d'executar l'ordre següent i obtenir un nou projecte Laravel.

composer create-project --prefer-dist laravel/laravel blog

Pas 2: creeu una taula i un model d’elements

En aquest pas utilitzaré el model d'usuari i la taula d'usuaris per crear una aplicació de pàgina única vista js laravel crup. Per tant, enganxeu aquest codi següent a la taula d’usuaris.

use IlluminateDatabaseMigrationsMigration; use IlluminateDatabaseSchemaBlueprint; use IlluminateSupportFacadesSchema; class CreateUsersTable extends Migration { public function up() { Schema::create('users', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->string('type')->default('user'); $table->rememberToken(); $table->timestamps(); }); } public function down() { Schema::dropIfExists('users'); } }

Després de crear la taula d'usuaris, heu de crear un model d'ítem per als elements, de manera que primer creeu el fitxer en aquest camí app / User.php i poseu el contingut següent al fitxer user.php:

app / User.php

namespace App; use IlluminateContractsAuthMustVerifyEmail; use IlluminateFoundationAuthUser as Authenticatable; use IlluminateNotificationsNotifiable; class User extends Authenticatable { use Notifiable; protected $guarded = []; }

Ara executeu l'ordre de migració després de configurar la base de dades.

Pas 3: definiu les rutes de l'API

Ara, hem de definir les rutes de l’API dins del fitxer ** routes >> api.php **.

routes / api.php

//Vue js Api Route Route::apiResources( [ 'user' => 'APIUserController' ] );

Pas 4: Creeu un controlador

Per generar ràpidament un controlador de recursos API que no inclogui el create o edit mètodes, utilitzeu el --api commutador en executar el make:controller comandament:

php artisan make:controller API/UserController --api

D’acord, ara hem creat un nou controlador com a UserController en aquest camí app / Http / Controllers / API / UserController.php . aquest controlador gestionarà tots els mètodes de ruta:

Pas 5: configureu Laravel Mix

Ara copieu el fitxer js i scss a la carpeta d’actius com es mostra a continuació.

Ara obert webpack.mix.js que es troba dins del directori arrel.

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js/app.js') .sass('resources/assets/sass/app.scss', 'public/css/app.css') .version();

Pas 6: instal·leu la dependència de Vue i editeu les configuracions

Ara, aneu a la carpeta del projecte i instal·leu les dependències del frontend mitjançant l'ordre següent.

npm install

Ara executeu l'ordre següent, podeu visitar veure documentació oficial

com comprar golem gnt
npm install vue-router

Ara instal·larem vue-progressbar. L’utilitzarem quan es mostri la barra de progrés a la part superior de la nostra aplicació. Ara executeu l'ordre següent, podeu visitar vista progressbar documentació oficial

npm install vue-progressbar

Ara hem d’instal·lar moment js a la nostra aplicació per donar format a la data com la funció de carboni laravel. Podeu visitar moment js documentació oficial

npm install moment --save

Ara hem d’instal·lar el formulari v per a la validació del client. Llegiu la seva documentació per obtenir més informació sobre com s'utilitza i com funciona el formulari en V.

npm i axios vform

Ara l'últim és una alerta dolça 2. Ara executeu l'ordre següent per instal·lar-lo. Podeu visitar documentació oficial Ara executeu l'ordre per compilar tot el nostre fitxer JavaScript.

npm install watch

Ara creeu una carpeta i un fitxer com a la imatge següent.

Pas 7: configureu el fitxer js

resources / assets / js / app.js

require('./bootstrap'); window.Vue = require('vue'); //Import Vue Filter require('./filter'); //Import progressbar require('./progressbar'); //Setup custom events require('./customEvents'); //Import View Router import VueRouter from 'vue-router' Vue.use(VueRouter) //Import Sweetalert2 import Swal from 'sweetalert2' window.Swal = Swal const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true, onOpen: (toast) => { toast.addEventListener('mouseenter', Swal.stopTimer) toast.addEventListener('mouseleave', Swal.resumeTimer) } }) window.Toast = Toast //Import v-from import { Form, HasError, AlertError } from 'vform' window.Form = Form; Vue.component(HasError.name, HasError) Vue.component(AlertError.name, AlertError) //Routes import { routes } from './routes'; //Register Routes const router = new VueRouter({ routes, mode: 'hash', }) //Vue.component('example-component', require('./components/ExampleComponent.vue').default); const app = new Vue({ el: '#app', router });

recursos / actius / js / customEvents.js

Aquest és el nostre codi generador d'esdeveniments personalitzat. Podeu veure la seva documentació per conèixer millor.

//Setup our custom events in vue let Fire = new Vue() window.Fire = Fire;

recursos / actius / js / filter.js

//Vue Filter to make first letter Capital Vue.filter('strToUpper', function(text) { return text.charAt(0).toUpperCase() + text.slice(1); }); //Vue moment js to show human readable date import moment from 'moment'; //Import Moment Vue.filter('formatDate', function(date) { return moment(date).format('MMMM Do YYYY'); });

recursos / actius / js / progressbar.js

import VueProgressBar from 'vue-progressbar'; Vue.use(VueProgressBar, { color: 'rgb(143, 255, 199)', failedColor: 'red', height: '4px', transition: { speed: '0.4s', opacity: '0.6s', termination: 300 }, })

recursos / actius / js / routes.js

els pandes substitueixen per nan
import Dashboard from './components/admin/DashboardComponent.vue' import Profile from './components/admin/ProfileComponent.vue' import User from './components/admin/UserComponent.vue' export const routes = [ { path:'/dashboard', component:Dashboard }, { path:'/profile', component:Profile }, { path:'/users', component:User }, ];

Pas 8: configureu el controlador

App Http Controllers API UserController.php

namespace AppHttpControllersAPI; use AppHttpControllersController; use AppUser; use IlluminateHttpRequest; class UserController extends Controller { public function index() { return User::latest()->get(); } public function store(Request $request) { $this->validate($request, [ 'name' => 'required', 'email' => 'required', 'type' => 'required', ]); return User::create([ 'name' => $request['name'], 'email' => $request['email'], 'password' => Hash::make($request['password']), 'type' => $request['type'], ]); } public function show($id) { // } public function update(Request $request, $id) { $this->validate($request, [ 'name' => 'required', 'email' => 'required', 'type' => 'required', ]); $user = User::findOrFail($id); $user->update($request->all()); } public function destroy($id) { $user = User::findOrFail($id); $user->delete(); return response()->json([ 'message' => 'User deleted successfully' ]); } }

Pas 9: Creeu un fitxer Blade

En aquest pas hem de crear només un fitxer blade que gestionarà el mòdul de creació, actualització i eliminació de l'operació dels elements amb vue js.In aquest fitxer he afegit jquery, bootstrap js i css, vue.js, vue-resource.min.js, toastr js i css per a la notificació en aquest fitxer blade.

recursos / visualitzacions / master.blade.php

Vue js App

recursos / actius / js / components / admin / UserComponent.vue

per què l'aplicació Cash va tancar el meu compte

Users Table

Add New
ID Name Email Type Registered At Modify
{{ user.id }} {{ user.name }} {{ user.email }} { strToUpper} { user.created_at } |
Add New User
Update User
Select User Role Admin Standard User Author Close Update Create export default { data() { return { editMode: false, users: {}, form: new Form({ id: '', name : '', email: '', password: '', type: '', }) } }, methods: { editModalWindow(user){ this.form.clear(); this.editMode = true this.form.reset(); $('#addNew').modal('show'); this.form.fill(user) }, updateUser(){ this.form.put('api/user/'+this.form.id) .then(()=>{ Toast.fire({ icon: 'success', title: 'User updated successfully' }) Fire.$emit('AfterCreatedUserLoadIt'); $('#addNew').modal('hide'); }) .catch(()=>{ console.log('Error.....') }) }, openModalWindow(){ this.editMode = false this.form.reset(); $('#addNew').modal('show'); }, loadUsers() { axios.get('api/user').then( data => (this.users = data.data)); //data ene users object a rakhlam then loop a users print }, createUser(){ this.$Progress.start() this.form.post('api/user') .then(() => { Fire.$emit('AfterCreatedUserLoadIt'); //custom events Toast.fire({ icon: 'success', title: 'User created successfully' }) this.$Progress.finish() $('#addNew').modal('hide'); }) .catch(() => { console.log('Error......') }) //this.loadUsers(); }, deleteUser(id) { Swal.fire({ title: 'Are you sure?', text: 'You won't be able to revert this!', icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then((result) => { if (result.value) { //Send Request to server this.form.delete('api/user/'+id) .then((response)=> { Swal.fire( 'Deleted!', 'User deleted successfully', 'success' ) this.loadUsers(); }).catch(() => { Swal.fire({ icon: 'error', title: 'Oops...', text: 'Something went wrong!', footer: ' Why do I have this issue? ' }) }) } }) } }, created() { //Like Mounted this method this.loadUsers(); Fire.$on('AfterCreatedUserLoadIt',()=>{ //custom events fire on this.loadUsers(); }); // setInterval(() => // this.loadUsers() // ,3000); //Every 3 seconds loadUsers call } }

Ara tot està fet. Ara ja esteu a punt per comprovar-ho. Espero que us ajudi.

#Laravel #Vuejs #Vue #CRUD #JavaScript