Isati yatangwa yeLaravel UI, imwe yeayo maficha yaive pre rutsigirodefinite for Wedu.js kubva kuLaravel v5.3 kusvika v6. Vue ishanduro yemazuva ano yeJavaScript yekumberi inoshandiswa kugadzira mushandisi.
Heano mamwe emabhenefiti makuru ekushandisa Laravel neVue kugadzira kuyerera kwakazara kwemapurojekiti ako:
Iyo kodhi kodhi inosanganiswa kuita purojekiti imwe chete, pachinzvimbo chekuve nemapurojekiti akasiyana eiyo backend uye yekumberi
Kuisa uye kugadzirisa zviri nyore
Kugovera kumwe chete kunogona kubata ese ari maviri masisitimu pamwechete
Una peji rimwe chete application (SPA kwenguva pfupi) inorodha data nyowani kubva pawebhu server kupinda peji rewebhu pasina kuzorodza peji rese.
Mienzaniso yemawebhusaiti ane mukurumbira anoshandisa SPAs anosanganisira gmail.com uye youtube.com - nemamwe mazwi, maSPA anowanikwa kwese kwese. Mazhinji emadhibhodhi e admin aunga shanda nawo zuva nezuva anovakwa uchishandisa SPA.
Zvakanakira zveSPAs:
Chiitiko chemushandisi chinowedzera kushanduka
Cache data mubrowser
Kurumidza kurodha nguva
Zvakaipa zveSPAs:
Inogona kukanganisa SEO (injini yekutsvaga optimization)
Zvingangoitika zvekuchengetedza nyaya
Iyo inoshandisa yakawanda yebrowser zviwanikwa
Iyi positi icharatidza maitiro ekugadzira-yekuita app inobvumira vashandisi kusaina account uye kuwedzera mabasa.
Pachidzidzo ichi, Laravel 9 inoshandiswa, inoda PHP 8.1 uye Vue 3; tinodawo kuva ne PHP uye NGINX yakaiswa.
Tinotanga nemurairo unotevera:
composer create-project --prefer-dist laravel/laravel laravel-vue-combo
Tevere, isu tinoisa iyo JavaScript inotsamira.
npm install
Isu tinofanirwa kuisa mamwe mapakeji tisati tawedzera Vue kupurojekiti yedu.
Zvakare, plugin-vue inofanirwa kuiswa, sezvo Laravel 9 ngarava neVite, pane webpack-mix, yaive yapfuura Laravel bundler yeJavaScript. Ngatizviite izvozvi:
npm install vue@next vue-loader@next @vitejs/plugin-vue
Vhura faira rakanzi vite.config.js
uye wedzera vue()
kugadzirisa:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
Rongedza iyo app.js faira uye bootstrap snippet yeVue 3 app:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
Gadzira faira rakanzi App.vue
uye wedzera zvinotevera:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>
Pakupedzisira, vhura faira welcome.blade.php
iri mufolda resources/views
uye wedzera zvinotevera:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
Kuti titarise app yedu, isu tinofanirwa kutanga yedu Vue app uye Laravel server pane maviri akasiyana materminal / mitsara yemirairo:
npm run dev
php artisan serve
Kugadzira yedu yekuita-app, tinoda kugadzira mamwe mafaera. Vue ichagadzira akawanda mapeji, kunyanya:
Kutaurirana neLaravel endpoints, isu tinofanirwa kuisa Axios:
npm install axios
Kushandisa package vue-router
, kune nzira dzakasiyana-siyana dzekufambisa dzinogona kushandiswa muVue; mazano aya anozivikanwawo se history models
.
Kana mushandisi akumbira route
senge http://localhost:8000/home, iyo inodzosa kukanganisa kwe404 kana peji razorodzwa, tinogona kuvimba neLaravel kuona chero nzira dzekudzokera kumashure uye tozoshandisa iyo Blade faira rine app yedu.
Nechikonzero ichi, isu tichashandisa HTML5 modhi:
Route::get('/{vue_capture?}', function() {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');
import {createRouter, createWebHistory} from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
component: () => import('./pages/Login.vue')
},
{
path: '/register',
component: () => import('./pages/Register.vue')
},
{
path: '/home',
component: () => import('./pages/Home.vue')
}
],
})
Mumuenzaniso uyu tinobata chokwadi tichishandisa Laravel Sanctum, ipapo chiratidzo chinochengetwa munzvimbo yekuchengetedza.
Kuti zvimwe zvikumbiro zvibudirire, chiratidzo chinosanganiswa mumusoro, izvo zvinobvumira mushandisi kuita chikumbiro kuti chizivikanwe naLaravel.
Heano mabhuroko ekodhi akabatana ezvose zviri zviviri:
<!--Login.vue-->
<template>
<div class="mx-auto w-4/12 mt-10 bg-blue-200 p-4 rounded-lg">
<div
class="bg-white shadow-lg rounded-lg px-8 pt-6 pb-8 mb-2 flex flex-col"
>
<h1 class="text-gray-600 py-5 font-bold text-3xl"> Login </h1>
<ul class="list-disc text-red-400" v-for="(value, index) in errors" :key="index" v-if="typeof errors === 'object'">
<li>{{value[0]}}</li>
</ul>
<p class="list-disc text-red-400" v-if="typeof errors === 'string'">{{errors}}</p>
<form method="post" @submit.prevent="handleLogin">
<div class="mb-4">
<label
class="block text-grey-darker text-sm font-bold mb-2"
for="username"
>
Email Address
</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
id="username"
type="text"
v-model="form.email"
required
/>
</div>
<div class="mb-4">
<label
class="block text-grey-darker text-sm font-bold mb-2"
for="password"
>
Password
</label>
<input
class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3"
id="password"
type="password"
v-model="form.password"
required
/>
</div>
<div class="flex items-center justify-between">
<button
class="bg-blue-500 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded"
type="submit"
>
Sign In
</button>
<router-link
class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
to="register"
>
Sign Up
</router-link>
</div>
</form>
</div>
</div>
</template>
export default {
setup() {
const errors = ref()
const router = useRouter();
const form = reactive({
email: '',
password: '',
})
const handleLogin = async () => {
try {
const result = await axios.post('/api/auth/login', form)
if (result.status === 200 && result.data && result.data.token) {
localStorage.setItem('APP_DEMO_USER_TOKEN', result.data.token)
await router.push('home')
}
} catch (e) {
if(e && e.response.data && e.response.data.errors) {
errors.value = Object.values(e.response.data.errors)
} else {
errors.value = e.response.data.message || ""
}
}
}
return {
form,
errors,
handleLogin,
}
}
}
Ercole Palmeri
Iwe unogona zvakare kufarira ...
Izwi rekuti Smart Lock Market rinoreva indasitiri uye ecosystem yakatenderedza kugadzirwa, kugovera uye kushandisa…
Muinjiniya yesoftware, dhizaini mapatani ndiwo akakwana mhinduro kumatambudziko anowanzo kuitika mukugadzira software. ndiri se...
Kumaka kwemaindasitiri ishoko rakafara rinobatanidza matekiniki akati wandei anoshandiswa kugadzira mamakisi echigarire pamusoro pe…
Iyo inotevera yakapfava Excel macro mienzaniso yakanyorwa uchishandisa VBA Inofungidzirwa nguva yekuverenga: 3 maminetsi Muenzaniso…