Cyn lansio Laravel UI, un o'i brif nodweddion oedd cyn-gymorthdefinite am Vue.js o Laravel v5.3 i v6. Mae Vue yn fframwaith blaen JavaScript modern a ddefnyddir i adeiladu rhyngwynebau defnyddwyr.
Dyma rai o brif fanteision defnyddio Laravel gyda Vue i greu llif gwaith cyflawn ar gyfer eich prosiectau:
Cyfunir y cod ffynhonnell yn un prosiect, yn hytrach na chael prosiectau ar wahân ar gyfer y pen ôl a'r blaen
Mae gosod a chyfluniad yn syml
Gall un dosbarthiad reoli'r ddau fframwaith gyda'i gilydd
a cais un dudalen (SPA yn fyr) yn ddeinamig yn llwytho data newydd o weinydd gwe i dudalen we heb orfod adnewyddu'r dudalen gyfan.
Mae enghreifftiau o wefannau poblogaidd sy'n defnyddio SPAs yn cynnwys gmail.com ac youtube.com – mewn geiriau eraill, mae SPAs yn hollbresennol i raddau helaeth. Mae'r rhan fwyaf o'r dangosfyrddau gweinyddol y gallech weithio gyda nhw bob dydd yn cael eu hadeiladu gan ddefnyddio SPA.
Manteision SPAs:
Mae profiad y defnyddiwr yn fwy hyblyg
Data storfa yn y porwr
Amser llwytho cyflym
Anfanteision SPAs:
Gall beryglu SEO (optimeiddio peiriannau chwilio)
Materion diogelwch posibl
Mae'n defnyddio llawer o adnoddau porwr
Bydd y swydd hon yn dangos sut i ddatblygu ap i'w wneud sy'n galluogi defnyddwyr i gofrestru ar gyfer cyfrif ac ychwanegu tasgau.
Ar gyfer y tiwtorial hwn, defnyddir Laravel 9, sy'n gofyn am PHP 8.1 a Vue 3; mae angen i ni hefyd gael PHP a NGINX wedi'u gosod.
Rydym yn dechrau gyda'r gorchymyn canlynol:
composer create-project --prefer-dist laravel/laravel laravel-vue-combo
Nesaf, byddwn yn gosod y dibyniaethau JavaScript.
npm install
Mae angen inni osod rhai pecynnau cyn y gallwn ychwanegu Vue at ein prosiect.
Hefyd, rhaid gosod plugin-vue, gan fod Laravel 9 yn llongio gyda Vite, yn hytrach na webpack-mix, sef y bwndelwr Laravel blaenorol ar gyfer JavaScript. Gadewch i ni ei wneud nawr:
npm install vue@next vue-loader@next @vitejs/plugin-vue
Agorwch y ffeil o'r enw vite.config.js
ac ychwanegu vue()
i gyfluniad:
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',
]),
],
});
Golygu'r ffeil app.js a snippet bootstrap ar gyfer yr ap Vue 3:
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
Creu ffeil o'r enw App.vue
ac ychwanegwch y canlynol:
<template>
<h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
setup() {
}
}
</script>
Yn olaf, agorwch y ffeil welcome.blade.php
lleoli yn y ffolder resources/views
ac ychwanegwch y canlynol:
<!DOCTYPE html>
<html>
<head>
....
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
I gael rhagolwg o'n app, mae angen i ni gychwyn ein app Vue a gweinydd Laravel ar ddwy derfynell / llinell orchymyn wahanol:
npm run dev
php artisan serve
I greu ein app to-do, mae angen i ni greu ffeiliau eraill. Bydd Vue yn creu tudalennau lluosog, yn bennaf:
I gyfathrebu â diweddbwyntiau Laravel, mae angen i ni osod Axios:
npm install axios
Gan ddefnyddio'r pecyn vue-router
, mae yna amrywiol strategaethau llwybro y gellir eu defnyddio yn Vue; gelwir y strategaethau hyn hefyd yn history models
.
Pan fydd defnyddiwr yn gofyn route
fel http://localhost:8000/home, a fydd yn dychwelyd gwall 404 pan fydd y dudalen yn cael ei hadnewyddu, gallwn ddibynnu ar Laravel i ganfod unrhyw lwybrau wrth gefn ac yna gwasanaethu'r ffeil Blade sy'n cynnwys ein app.
Am y rheswm hwn, byddwn yn defnyddio modd 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')
}
],
})
Yn yr enghraifft hon rydym yn ymdrin â dilysu gan ddefnyddio Noddfa Laravel, yna caiff y tocyn ei gadw mewn storfa leol.
Er mwyn i geisiadau eraill lwyddo, mae'r tocyn yn cael ei gyfuno â'r pennawd, a fydd yn caniatáu i Laravel adnabod y defnyddiwr sy'n gwneud y cais.
Dyma'r blociau cod cysylltiedig ar gyfer y ddau:
<!--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
Efallai y bydd gennych chi ddiddordeb hefyd mewn ...
Microsoft Excel yw'r offeryn cyfeirio ar gyfer dadansoddi data, oherwydd mae'n cynnig llawer o nodweddion ar gyfer trefnu setiau data,…
Mae Walliance, SIM a llwyfan ymhlith yr arweinwyr yn Ewrop ym maes Cyllid Torfol Eiddo Tiriog ers 2017, yn cyhoeddi ei fod wedi'i gwblhau…
Mae ffilament yn fframwaith datblygu Laravel "cyflym", sy'n darparu sawl cydran pentwr llawn. Fe'i cynlluniwyd i symleiddio'r broses o…
«Rhaid i mi ddychwelyd i gwblhau fy esblygiad: byddaf yn taflu fy hun y tu mewn i'r cyfrifiadur ac yn dod yn egni pur. Wedi setlo yn…
Mae Google DeepMind yn cyflwyno fersiwn well o'i fodel deallusrwydd artiffisial. Mae'r model gwell newydd yn darparu nid yn unig…
Mae Laravel, sy'n enwog am ei chystrawen gain a'i nodweddion pwerus, hefyd yn darparu sylfaen gadarn ar gyfer pensaernïaeth fodiwlaidd. Yno…
Mae Cisco a Splunk yn helpu cwsmeriaid i gyflymu eu taith i Ganolfan Gweithrediadau Diogelwch (SOC) y dyfodol gyda…
Mae Ransomware wedi dominyddu'r newyddion am y ddwy flynedd ddiwethaf. Mae'r rhan fwyaf o bobl yn ymwybodol iawn bod ymosodiadau…