Ennen Laravel UI:n julkaisua yksi sen pääominaisuuksista oli esitukidefiiltaa varten Vue.js Laravel v5.3:sta v6:een. Vue on moderni JavaScript-käyttöliittymäkehys, jota käytetään käyttöliittymien rakentamiseen.
Tässä on joitain Laravelin ja Vuen käytön tärkeimmistä eduista luodaksesi täydellisen työnkulun projekteillesi:
Lähdekoodi yhdistetään yhdeksi projektiksi sen sijaan, että tausta- ja käyttöliittymälle olisi erilliset projektit
Asennus ja konfigurointi ovat yksinkertaisia
Yksi jakelu voi hallita molempia kehyksiä yhdessä
Una yhden sivun sovellus (lyhyesti SPA) lataa dynaamisesti uutta tietoa verkkopalvelimelta verkkosivulle ilman, että koko sivua tarvitsee päivittää.
Esimerkkejä suosituista SPA-palveluita käyttävistä verkkosivustoista ovat gmail.com ja youtube.com – toisin sanoen SPA:t ovat suurelta osin kaikkialla. Suurin osa järjestelmänvalvojan hallintapaneeleista, joiden kanssa saatat työskennellä päivittäin, on rakennettu SPA:n avulla.
SPA:n edut:
Käyttökokemus on joustavampi
Välimuisti tiedot selaimessa
Nopea latausaika
SPA:n haitat:
Saattaa vaarantaa SEO (hakukoneoptimointi)
Mahdolliset turvallisuusongelmat
Se kuluttaa paljon selaimen resursseja
Tämä viesti osoittaa, kuinka kehittää tehtäväsovellus, jonka avulla käyttäjät voivat rekisteröityä tilille ja lisätä tehtäviä.
Tässä opetusohjelmassa käytetään Laravel 9:ää, joka vaatii PHP 8.1:n ja Vue 3:n; meillä on myös oltava asennettuna PHP ja NGINX.
Aloitamme seuraavalla komennolla:
composer create-project --prefer-dist laravel/laravel laravel-vue-comboSeuraavaksi asennamme JavaScript-riippuvuudet.
npm installMeidän on asennettava joitain paketteja ennen kuin voimme lisätä Vuen projektiimme.
Myös plugin-vue on asennettava, koska Laravel 9 toimitetaan Viten kanssa webpack-mixin sijaan, joka oli edellinen Laravelin JavaScript-paketti. Tehdään se nyt:
npm install vue@next vue-loader@next @vitejs/plugin-vueAvaa tiedosto nimeltä vite.config.js ja lisää vue() kokoonpanoon:
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',
]),
],
});Muokkaa Vue 3 -sovelluksen app.js-tiedostoa ja bootstrap-koodinpätkää:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")Luo tiedosto nimeltä App.vue ja lisää seuraavat:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>Avaa lopuksi tiedosto welcome.blade.php sijaitsee kansiossa resources/views ja lisää seuraavat:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>Sovelluksen esikatselua varten meidän on käynnistettävä Vue-sovellus ja Laravel-palvelin kahdella eri päätteellä/komentorivillä:
npm run dev
php artisan serveTehtäväsovelluksemme luomiseksi meidän on luotava muita tiedostoja. Vue luo useita sivuja, pääasiassa:
Jotta voimme kommunikoida Laravel-päätepisteiden kanssa, meidän on asennettava Axios:
npm install axiosPaketin käyttö vue-router, on olemassa erilaisia reititysstrategioita, joita voidaan käyttää Vuessa; nämä strategiat tunnetaan myös nimellä history models.
Kun käyttäjä pyytää route kuten http://localhost:8000/home, joka palauttaa 404-virheen, kun sivu päivitetään, voimme luottaa siihen, että Laravel havaitsee varareitit ja palvelee sitten sovelluksemme sisältävän Blade-tiedoston.
Tästä syystä käytämme HTML5-tilaa:
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')
}
],
})Tässä esimerkissä käsittelemme todennusta käyttämällä Laravel Sanctum, sitten tunnus tallennetaan paikalliseen tallennustilaan.
Jotta muut pyynnöt onnistuvat, merkki yhdistetään otsikkoon, jolloin Laravel tunnistaa pyynnön tekevän käyttäjän.
Tässä on molempien koodilohkot:
<!--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
Voisit myös olla kiinnostunut näistä ...
Yrityssähköpostien kompromissi lisääntyi yli kaksinkertaiseksi vuoden 2024 kolmen ensimmäisen kuukauden aikana vuoden viimeiseen neljännekseen verrattuna…
Käyttöliittymän erotteluperiaate on yksi oliosuuntautuneen suunnittelun viidestä SOLID-periaatteesta. Luokassa pitäisi olla…
Microsoft Excel on vertailutyökalu tietojen analysointiin, koska se tarjoaa monia ominaisuuksia tietojoukkojen järjestämiseen,…
Walliance, SIM ja alusta Euroopan johtajien joukossa kiinteistöjen joukkorahoituksen alalla vuodesta 2017 lähtien, ilmoittaa valmistuneensa…
Filament on "kiihdytetty" Laravel-kehityskehys, joka tarjoaa useita täyden pinon komponentteja. Se on suunniteltu yksinkertaistamaan prosessia…
"Minun on palattava saadakseni evoluutioni päätökseen: projisoin itseni tietokoneen sisään ja minusta tulee puhdasta energiaa. Asuttuaan…
Google DeepMind esittelee parannetun version tekoälymallistaan. Uusi parannettu malli tarjoaa paitsi…
Laravel, joka on kuuluisa elegantista syntaksistaan ja tehokkaista ominaisuuksistaan, tarjoaa myös vankan perustan modulaariselle arkkitehtuurille. Siellä…