Cum să construiți o aplicație Frontend Shopify Vue.js cu Polaris

Publicat: 2019-06-17

Notă: acest articol este despre construirea unei aplicații Vue.js cu o singură pagină peste aplicația Laravel creată în acest articol. Înainte de a citi acest lucru, asigurați-vă că ați citit articolul anterior despre construirea unei aplicații cu Laravel, deoarece vom folosi acel cod existent.

Ce este Vue.js?

Vue.js este un cadru frontal JavaScript, comparabil cu cadre similare precum React și derivat inițial din AngularJS. În comparație cu celelalte cadre, este conceput să fie oarecum mai ușor, astfel încât să îl puteți utiliza doar ca strat de prezentare numai dacă doriți - dar îl puteți scala masiv cu gestionarea completă a stării sau puteți utiliza un cadru pe deasupra Vue, cum ar fi ca Nuxt.js. Puteți afla mai multe informații despre Vue.js aici.

Ce este Polaris?

Polaris este cadrul de design al UI al Shopify, comparabil cu alte cadre UI, cum ar fi Bootstrap sau SemanticUI. La Eastside Co avem un port Vue.js al bibliotecii pentru o interfață de utilizare consistentă în aplicațiile noastre.

Configurarea Vue.js pentru compilare

Vue vine cu Laravel din cutie, dar există unele personalizări care vor facilita dezvoltarea. Laravel vine cu Laravel Mix, care este un înveliș îngrijit în jurul Webpack. Webpack compilează toate elementele dvs. de front-end până la ceea ce doriți să serviți browserului clientului - Laravel vine cu o implementare a acestui lucru cu o mulțime de setări implicite integrate. Să optimizăm puțin rezultatul Webpack-ului. Deschide webpack.mix.js în rădăcina proiectului tău. Schimbați-l în:

 mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); mix.webpackConfig({ resolve: { extensions: [ '.js', '.vue', ], alias: { '@': path.resolve(__dirname, 'resources/assets/js'), }, }, devtool: “inline-source-map” });

Aici i-am spus webpack să aliaze fișierele din folderul resources/assets/js pentru a fi utilizate în declarațiile de import și să recunoască extensiile .vue și .js, astfel încât să nu fie nevoie să folosim nume de fișiere complete în JavaScript. Opțiunea devtool face, de asemenea, wepack să genereze hărți sursă pentru JS-ul nostru compilat, pentru a ajuta mai rapid depanarea în browser.

Acum putem rula npm pentru a instala dependențele noastre frontale și să rulăm un server pentru a urmări modificările la fișierele noastre JavaScript. Mergeți la terminal și tastați:

 Npm install Npm run dev

Acum, trebuie să conectăm ruta noastră de bază Laravel în aplicația noastră Vue.

Configurarea Vue.js în Laravel

Trebuie să facem puține modificări pentru a obține o schelă decentă de la Laravel la Vue. Primele lucruri pe care trebuie să le facem sunt să importam Vue într-un șablon Twig de bază, apoi să creăm un punct de intrare pentru aplicația noastră.

Pentru a nu confunda lucrurile, haideți să creăm o rută nouă, o metodă de controler și un șablon de crenguță.

 routes/web.php Route::get('/vueapp', 'ShopifyController@vueapp'); app/Http/Controllers/ShopifyController.php public function vueapp() { return view('vueapp'); }

Deoarece Vue va folosi un punct final pe care îl creăm în Laravel, am renunțat la ShopifyAPI - dar acesta va fi folosit mai târziu. Acum trebuie să conectăm Vue la noul nostru șablon Twig, pe care l-am numit vueapp. Creați următorul fișier:

 resources/views/vueapp.twig <!DOCTYPE html> <html> <head> <title>My VueJs app</title> <meta name="csrf-token" content="{{ csrf_token() }}"> </head> <body> <div> <app-entry></app-entry> </div> <script src="{{ asset('js/app.js') }}"></script> </body> </html>

Tokenul CSRF este important - Laravel transmite un jeton către Vue pentru a preveni falsificarea cererilor între site-uri. Există alte câteva lucruri care se întâmplă aici - în primul rând, <div id=”app”> este eticheta div la care legăm Vue și <app-entry> este o componentă Vue personalizată pe care nu am construit-o încă, așa că îl vom construi în curând.

Clădire Vue Schele

Apoi, trebuie să construim punctul de intrare în aplicație pentru aplicația noastră. O tratăm ca pe o componentă, dar o plasăm în afara folderului de componente integrate, deoarece este punctul de intrare frontal pentru restul Vue. Creați un fișier nou:

 resources/js/AppEntry.vue <template> <p>App Entry Point</p> </template> <script> export default { mounted() { console.log('Rendered app entry point') } } </script>

Deci, ultima parte este să înregistrați componenta <app-entry> în bootloader-ul Vue. Îndreptați-vă spre

resurse/js/app.js

Există o mulțime de comentarii aici din codul standard Laravel - ștergeți tot codul și înlocuiți-l cu următorul:

 require('./bootstrap'); window.Vue = require('vue'); Vue.component('app-entry', require('./AppEntry.vue').default); const app = new Vue({ el: '#app', });

Deci, componenta noastră de intrare a fost încărcată și Vue a fost pornit, fiind legat de aplicația div id. Încărcați traseul în browser:

http://localhost:8000/vueapp

Și putem vedea cu browser-ul nostru devtools deschis că vue este inițializată. Suntem în funcțiune!

Crearea unui punct final API

Acum avem un punct de intrare, vom crea o nouă componentă care va afișa o listă de produse. Înainte de a putea crea componenta frontend, va trebui să creăm un punct final API care va fi efectiv un proxy din API-ul Shopify.

Laravel vine cu o rădăcină de bază /api/ configurată automat pentru apelurile API, cu o logică separată de rutele HTTP. Adăugați următorul rând:

 routes/api.php Route::get('/products', 'ShopifyController@products'); We've not created the 'products' method in the ShopifyController, so let's create it: app/Http/Controllers/ShopifyController.php public function products() { $shopifyApi = app('ShopifyAPI'); $products = $shopifyApi->call('GET', '/admin/products.json'); return (array) $products; }

Navigați la punctul final și ar trebui să primiți datele înapoi:

Asta este pentru punctul final API - nu folosim nicio autorizare, deoarece acesta este un ghid de bază, dar puteți consulta https://laravel.com/docs/5.7/authentication pentru mai multe informații despre implementările de autentificare personalizate, inclusiv de bază, purtător jetoane și oAuth.

Crearea unei componente și preluarea datelor API

Să creăm componenta în care vom reda produsele - creați un fișier nou în directorul componente:

 resources/js/components/ProductComponent.vue <template> <div id=”root element”>Vue components always need one root element</div> </template> <script> export default { mounted() { console.log('Component loaded') }, data() { return { apidata: "" } }, } </script>

Acum înregistrați componenta în Vue:

 resources/js/app.js Vue.component('shopify-products', require('./components/ProductsComponent.vue').default);

Și plasați componenta în șablonul nostru de aplicație:

 <template> <div> <shopify-products></shopify-products> </div> </template>

Există câteva lucruri de explicat cu șablonul Vue înainte de a putea prelua produse de la punctul final api și de a trece peste ele. În primul rând, logica din spatele etichetei <script> - fiecare componentă Vue are un ciclu de viață care poate fi accesat în diferite etape și vă permite să emiteți evenimente, să setați observatori; orice veți avea nevoie poate fi codificat aici.

Puteți afla mai multe despre componentele de codare aici. Am început doar prin adăugarea metodei data(), care returnează datele pe care le veți utiliza sau le veți lega la componentă. Am denumit o cheie aici apidata și am creat-o ca un șir gol - motivul pentru aceasta este că va fi locul unde sunt stocate produsele pentru componente - odată ce codificăm într-o preluare după ce modulul s-a încărcat în ciclul de viață.

Pentru a completa aceste date, vom adăuga o metodă, folosind axios, care va fi apelată atunci când metoda create() este executată în ciclul de viață.

 resources/js/components/ProductComponent.vue <script> export default { mounted() { console.log('Component loaded') }, created() { this.fetchProducts() }, data() { return { apidata: "" } }, methods: { fetchProducts() { axios.get('/api/products').then(response => { this.apidata = response.data.products }) } } } </script>

Produsele vor fi acum disponibile pentru șablon sub apidata - folosind bucla v-for a lui Vue, putem itera peste matricea din șablon:

Redare în Polaris

 <template> <div> <div class="card" v-for="product in apidata"> <h5>{{ product.title }}</h5> <p>{{ product.body_html }}</p> </div> </div> </template>

Încarcă pagina și bingo! Iată produsele noastre redate:

Când se dezvoltă în Vue, extensia Vue devtools este extrem de utilă pentru depanare. Puteți vedea aceste instrumente aici.

Dacă folosim devtools, putem vedea valoarea pe care a luat-o obiectul nostru de date apidata (adică răspunsul API-ului care a fost turnat într-o matrice):

Agățat în Polaris

Deci ultima noastră parte este să folosim portul Vue Polaris de la EastsideCo pentru a reda produsele noastre. Instalăm biblioteca Polaris prin npm:

 Npm install @eastsideco/polaris-vue

Apoi îl legăm în aplicația noastră Vue:

 resources/js/app.js require('./bootstrap'); import PolarisVue from '@eastsideco/polaris-vue/lib/polaris-vue'; import PolarisVueCss from '@eastsideco/polaris-vue/lib/polaris-vue.css'; window.Vue = require('vue'); Vue.component('app-entry', require('./AppEntry.vue').default); Vue.component('shopify-products', require('./components/ProductsComponent.vue').default); Vue.use(PolarisVue); const app = new Vue({ el: '#app', });

Vom avea acum acces la etichetele HTML personalizate denumite polaris - puteți vedea o listă completă a etichetelor portate pe pagina de documente la http://demo.polaris-vue.eastsideco.io/

Șablonul nostru este acum refactorizat astfel încât să arate astfel:

 resources/js/components/ProductsComponent.vue <template> <div> <polaris-page> <polaris-card sectioned title="My Shopify Vue App"> Uses EastsideCo port of Polaris to Vue </polaris-card> <polaris-card sectioned> <polaris-layout-section> <polaris-resource-list :items="apidata"> <template slot="item" slot-scope="props"> <polaris-resource-list-item :attribute-one="props.item.title" :attribute-two="props.item.created_at" :media="props.item.image"> </polaris-resource-list-item> </template> </polaris-resource-list> </polaris-layout-section> </polaris-card> </polaris-page> </div> </template>

Se întâmplă destul de multe aici, așa că hai să le dezvăluim -

Deschiderea <div> este doar un container - asta pentru că componentele Vue.js au întotdeauna nevoie de un element rădăcină. Apoi definim un container CSS pentru pagină folosind <polaris-page> .

The sistemul de layout este definit destul de bine în documentele menționate mai devreme.

Cu toate acestea, <polaris-resource-list> este o componentă mai complexă - este nevoie de un suport transmis, pe care în acest caz îl transmitem în răspunsul la punctul final API pe care l-am creat. Lista de resurse are apoi un slot cu scop, în care creăm un <polaris-resource-list-item> . În cadrul slotului, definiți un alt slot - „articol” (gândiți-vă la aceasta ca o iterație peste o buclă foreach ca o simplă explicație) și apoi întregul domeniu al slotului (care este apidata) este denumit ca elemente de recuzită a slotului. Deci, pentru a obține acces în acest moment la proprietățile iterațiilor curente, folosim props.item. Aceste atribute, cum ar fi atributul unu și media, sunt analizate de componentă și redate în biblioteca polaris. Rezultatul este o listă de produse de bază:

Și aici suntem - o listă de produse conectate la Vue Polaris.

Puteți găsi o copie funcțională a acestui cod demonstrativ pe repo-ul nostru la https://github.com/EastsideCo/polaris-vue.

La Eastside Co avem o echipă de dezvoltare a aplicațiilor, așa că dacă aveți întrebări, nu ezitați să ne contactați!