Pred lansiranjem uporabniškega vmesnika Laravel je bila ena njegovih glavnih funkcij predpodporadefinoč za Vue.js iz Laravel v5.3 v v6. Vue je sodoben frontend okvir JavaScript, ki se uporablja za izdelavo uporabniških vmesnikov.
Tukaj je nekaj glavnih prednosti uporabe Laravela z Vue za ustvarjanje celotnega poteka dela za vaše projekte:
Izvorna koda je združena v en projekt, namesto da bi imela ločena projekta za zaledje in sprednji del
Namestitev in konfiguracija sta preprosti
Ena sama distribucija lahko skupaj upravlja oba okvira
A enostranska aplikacija (na kratko SPA) dinamično naloži nove podatke s spletnega strežnika na spletno stran, ne da bi morali osvežiti celotno stran.
Primeri priljubljenih spletnih mest, ki uporabljajo SPA, vključujejo gmail.com in youtube.com – z drugimi besedami, SPA so večinoma vseprisotni. Večina skrbniških nadzornih plošč, s katerimi morda delate vsak dan, je zgrajenih s pomočjo SPA.
Prednosti SPA:
Uporabniška izkušnja je bolj prilagodljiva
Predpomnite podatke v brskalniku
Hiter čas nalaganja
Slabosti SPA:
Lahko ogrozi SEO (optimizacija iskalnikov)
Morebitne varnostne težave
Porabi veliko virov brskalnika
Ta objava bo pokazala, kako razviti aplikacijo za opravila, ki uporabnikom omogoča, da se prijavijo za račun in dodajo opravila.
Za to vadnico je uporabljen Laravel 9, ki zahteva PHP 8.1 in Vue 3; prav tako moramo imeti nameščen PHP in NGINX.
Začnemo z naslednjim ukazom:
composer create-project --prefer-dist laravel/laravel laravel-vue-combo
Nato bomo namestili odvisnosti JavaScripta.
npm install
Namestiti moramo nekaj paketov, preden lahko dodamo Vue našemu projektu.
Poleg tega je treba namestiti plugin-vue, saj je Laravel 9 priložen Viteu, namesto webpack-mix, ki je bil prejšnji Laravelov povezovalnik za JavaScript. Naredimo to zdaj:
npm install vue@next vue-loader@next @vitejs/plugin-vue
Odprite imenovano datoteko vite.config.js
in dodajte vue()
do konfiguracije:
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',
]),
],
});
Uredite datoteko app.js in izrezek zagonske kode za aplikacijo Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
Ustvari datoteko z imenom App.vue
in dodajte naslednje:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>
Na koncu odprite datoteko welcome.blade.php
ki se nahaja v mapi resources/views
in dodajte naslednje:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
Za predogled naše aplikacije moramo zagnati našo aplikacijo Vue in strežnik Laravel na dveh različnih terminalih/ukaznih vrsticah:
npm run dev
php artisan serve
Če želimo ustvariti našo aplikacijo za opravila, moramo ustvariti druge datoteke. Vue bo ustvaril več strani, predvsem:
Za komunikacijo s končnimi točkami Laravel moramo namestiti Axios:
npm install axios
Uporaba paketa vue-router
, obstajajo različne strategije usmerjanja, ki jih je mogoče uporabiti v Vue; te strategije so znane tudi kot history models
.
Ko uporabnik zahteva route
kot je http://localhost:8000/home, ki vrne napako 404, ko je stran osvežena, se lahko zanesemo na Laravel, da bo zaznal vse nadomestne poti in nato serviral datoteko Blade, ki vsebuje našo aplikacijo.
Iz tega razloga bomo uporabili način HTML5:
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')
}
],
})
V tem primeru obravnavamo avtentikacijo z uporabo Laravel Sanctum, potem se žeton shrani v lokalno shrambo.
Za uspeh drugih zahtev se žeton združi v glavo, kar bo omogočilo, da Laravel prepozna uporabnika, ki poda zahtevo.
Tukaj so povezani bloki kod za oba:
<!--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
Mogoče bi vas tudi zanimalo ...
Rezultat stalnih tehnoloških inovacij in zavezanosti okolju in blaginji ljudi. Bandalux predstavlja Airpure®, šotor…
Načrtovalni vzorci so specifične nizkonivojske rešitve za ponavljajoče se težave pri načrtovanju programske opreme. Oblikovalski vzorci so…
Magica je aplikacija za iPhone, ki omogoča preprosto in učinkovito upravljanje vozil ter voznikom pomaga prihraniti in…
Excelov grafikon je vizualni element, ki predstavlja podatke v Excelovem delovnem listu.…