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-comboNesaf, byddwn yn gosod y dibyniaethau JavaScript.
npm installMae 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-vueAgorwch 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 serveI 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 axiosGan 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 ...
Bydd Coveware gan Veeam yn parhau i ddarparu gwasanaethau ymateb i ddigwyddiadau cribddeiliaeth seiber. Bydd Coveware yn cynnig galluoedd fforensig ac adfer…
Mae gwaith cynnal a chadw rhagfynegol yn chwyldroi'r sector olew a nwy, gyda dull arloesol a rhagweithiol o reoli planhigion.…
Mae CMA y DU wedi cyhoeddi rhybudd am ymddygiad Big Tech yn y farchnad deallusrwydd artiffisial. Yno…
Mae'r Archddyfarniad "Achos Gwyrdd", a luniwyd gan yr Undeb Ewropeaidd i wella effeithlonrwydd ynni adeiladau, wedi dod â'i broses ddeddfwriaethol i ben gyda…