Laravel CRUD và Vue3
- Tram Ho
Xin chào các bạn, mình đã từng có một bài viết nói về CRUD với livewire tại đây rồi : https://b29.vn/bai-viet/laravel-crud-don-gian-voi-livewire?id=34, hôm nay mình sẽ hướng dẫn các bạn làm một project nhỏ về CRUD với Vue Js.
Chúng ta sẽ sử dụng :
- Laravel 8 cho phần build API và build source FE tích hợp vào Laravel
- Tailwind Css để làm giao diện trong đẹp hơn. Thì lí do mình chọn thằng này vì mình sẽ sử dụng laravel/breeze nó sẽ tích hợp Tailwind sẵn :V
- Vue 3. Lí do mình chọn vue 3 là bởi vì vue3 sẽ có các tính năng mới hay ho mà mình sẽ dùng trong bài này như Composition API, Reactive Variables with ref..
Setup Api
1. Cài breeze và setup model
Thì đầu tiên chúng ta sẽ chuẩn bị một project Laravel thông qua composer :
1 2 | <span class="token function">composer</span> create-project laravel/laravel crud-vue3 |
Tiếp theo, để sử dụng mau lẹ authenticate. mình sẽ sử dụng laravel/breeze để lo nốt
1 2 | <span class="token function">composer</span> require laravel/breeze |
Sau khi cài xong, bạn cần chạy php artisan breeze:install cái này nó sẽ publish các thứ liên quan đến auth như routes, controller, views ….
Project này mình sẽ làm CRUD company, nên sẵn mình sẽ migrate luôn company:
1 2 | php artisan make:model Company -m |
Vì là làm chức năng đơn giản nên chúng ta chỉ cần chừng này field là đủ. Xong rồi thì chạy migrate thôi php artisan migrate
OK xong xuôi thì mình sẽ chạy
1 2 | <span class="token function">npm</span> <span class="token function">install</span> <span class="token operator">&&</span> <span class="token function">npm</span> run dev |
Để test thử chức năng auth của breeze xem nó hoạt động không nhé.
OK, sau khi chạy project xong, mình đã thử đăng kí và được như này, nhìn giao diện khi sử dụng tailwind nó bát mắt hơn phải không :v
À nhớ thêm $fillable vào model nhé.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Models</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Database<span class="token punctuation">\</span>Eloquent<span class="token punctuation">\</span>Factories<span class="token punctuation">\</span>HasFactory</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Database<span class="token punctuation">\</span>Eloquent<span class="token punctuation">\</span>Model</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name-definition class-name">Company</span> <span class="token keyword">extends</span> <span class="token class-name">Model</span> <span class="token punctuation">{</span> <span class="token keyword">use</span> <span class="token package">HasFactory</span><span class="token punctuation">;</span> <span class="token keyword">protected</span> <span class="token variable">$fillable</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'name'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'email'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'address'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'website'</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </span> |
2. Setup API
Vì là api, nên chúng ta sẽ tạo controller theo cách sau để nó gen code phục vụ cho api :
1 2 | php artisan make:controller Api/CompanyController --api --resource --model<span class="token operator">=</span>Company |
Thì với cách tạo như vậy với 3 options --api --resource --model=Company, chúng ta sẽ có một controller với các method chuẩn resource api và model binding. Và tạo thêm một class Resource để phục vụ cho việc transforming data :
1 2 | php artisan make:resource CompanyResource |
Ví đây là một ứng dụng đơn giản, nên mình chỉ tạo CRUD đơn giản cho các bạn, do đó ta sẽ có CompanyController như sau :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Controllers<span class="token punctuation">\</span>Api</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Controllers<span class="token punctuation">\</span>Controller</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Requests<span class="token punctuation">\</span>CompanyRequest</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Resources<span class="token punctuation">\</span>CompanyResource</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">App<span class="token punctuation">\</span>Models<span class="token punctuation">\</span>Company</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name-definition class-name">CompanyController</span> <span class="token keyword">extends</span> <span class="token class-name">Controller</span> <span class="token punctuation">{</span> <span class="token comment">/** * Display a listing of the resource. * * @return \Illuminate\Http\Response */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">index</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token class-name static-context">CompanyResource</span><span class="token operator">::</span><span class="token function">collection</span><span class="token punctuation">(</span><span class="token class-name static-context">Company</span><span class="token operator">::</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">store</span><span class="token punctuation">(</span><span class="token class-name type-declaration">CompanyRequest</span> <span class="token variable">$request</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$company</span> <span class="token operator">=</span> <span class="token class-name static-context">Company</span><span class="token operator">::</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-></span><span class="token function">validated</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">CompanyResource</span><span class="token punctuation">(</span><span class="token variable">$company</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Display the specified resource. * * @param \App\Models\Company $company * @return \Illuminate\Http\Response */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">show</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Company</span> <span class="token variable">$company</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">CompanyResource</span><span class="token punctuation">(</span><span class="token variable">$company</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param \App\Models\Company $company * @return \Illuminate\Http\Response */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">update</span><span class="token punctuation">(</span><span class="token class-name type-declaration">CompanyRequest</span> <span class="token variable">$request</span><span class="token punctuation">,</span> <span class="token class-name type-declaration">Company</span> <span class="token variable">$company</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$company</span><span class="token operator">-></span><span class="token function">update</span><span class="token punctuation">(</span><span class="token variable">$request</span><span class="token operator">-></span><span class="token function">validated</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">CompanyResource</span><span class="token punctuation">(</span><span class="token variable">$company</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/** * Remove the specified resource from storage. * * @param \App\Models\Company $company * @return \Illuminate\Http\Response */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">destroy</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Company</span> <span class="token variable">$company</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$company</span><span class="token operator">-></span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token function">response</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">noContent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span> |
À đừng quên tạo CompanyRequest nhé : php artisan make:request CompanyRequest
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <span class="token php language-php"><span class="token delimiter important"><?php</span> <span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Requests</span><span class="token punctuation">;</span> <span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Foundation<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>FormRequest</span><span class="token punctuation">;</span> <span class="token keyword">class</span> <span class="token class-name-definition class-name">CompanyRequest</span> <span class="token keyword">extends</span> <span class="token class-name">FormRequest</span> <span class="token punctuation">{</span> <span class="token comment">/** * Get the validation rules that apply to the request. * * @return array */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">rules</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">[</span> <span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'required'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'email'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'required'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'email'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'address'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'string'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'website'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'url'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span> |
OK, vậy test thử 2 Api Create và List thử nha : 
OK ngon lành.
3. Setup Vue
Thì Api mình chỉ define đơn giản như vậy thôi, bây giờ chúng ta qua phần vue nhé, chúng ta phải cài đặt vue và các thư viện cần thiết :
1 2 | <span class="token function">npm</span> <span class="token function">install</span> vue@next vue-router@next vue-loader@next |
Điều này sẽ giúp chúng ta cài đặt vue3 cho dự án, cùng xem file package.json nhé :
1 2 3 4 5 6 | <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"vue"</span><span class="token operator">:</span> <span class="token string">"^3.2.19"</span><span class="token punctuation">,</span> <span class="token property">"vue-loader"</span><span class="token operator">:</span> <span class="token string">"^16.8.1"</span><span class="token punctuation">,</span> <span class="token property">"vue-router"</span><span class="token operator">:</span> <span class="token string">"^4.0.11"</span> <span class="token punctuation">}</span> |
Tiếp đó, bạn cần config lại webpack.mix.js:
1 2 3 4 5 6 7 8 | mix<span class="token punctuation">.</span><span class="token function">js</span><span class="token punctuation">(</span><span class="token string">'resources/js/app.js'</span><span class="token punctuation">,</span> <span class="token string">'public/js'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">vue</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">postCss</span><span class="token punctuation">(</span><span class="token string">'resources/css/app.css'</span><span class="token punctuation">,</span> <span class="token string">'public/css'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-import'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'tailwindcss'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
VIệc thêm .vue() vào trong mix sẽ giúp bạn load vuejs khi tải trang kèm trong mix laravel.
1 2 3 4 5 6 7 8 9 | <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./bootstrap'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'alpinejs'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span> components<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span> |
Chúng ta sẽ khởi tạo app Vue bên trong file app.js, và nhớ là hãy khai báo một id="app" cho một element mà bạn muốn Vue hoạt động trong đó nhé
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!-- resources/views/layouts/app.blade.php --> <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"> <link rel="stylesheet" href="{{ asset('css/app.css') }}"> <script src="{{ asset('js/app.js') }}" defer></script> </head> <body class="font-sans antialiased"> <div class="min-h-screen bg-gray-100" id="app"> @include('layouts.navigation') <header class="bg-white shadow"> <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> {{ $header }} </div> </header> <main> {{ $slot }} </main> </div> </body> </html> |
Để tận dụng các file đã có sẵn, mình sẽ khai báo luôn <router-view /> bên trong file resources/views/dashboard.blade.php luôn nhé :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <span class="token tag"><span class="token punctuation"><</span>x-app-layout<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>x-slot <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>h2 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font-semibold text-xl text-gray-800 leading-tight<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> {{ __('Dashboard') }} <span class="token tag"><span class="token punctuation"></</span>h2<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>x-slot<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>py-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>max-w-7xl mx-auto sm:px-6 lg:px-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white overflow-hidden shadow-sm sm:rounded-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>div <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>p-6 bg-white border-b border-gray-200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>router-view <span class="token punctuation">/></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span>x-app-layout<span class="token punctuation">></span></span> |
Việc đặt <router-view /> như vậy sẽ làm cho các component của chúng ta sẽ được render vào đó.
4. Setup component, router và chạy thử
Bây giờ chúng ta sẽ tạo một component và router để test xem có chạy không nhé :
Tạo component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!-- resources/js/components/companies/CompanyIndex.vue --> <template> Hello world </template> <script> export default { name: "CompanyIndex" } </script> <style scoped> </style> |
Setup router
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token comment">// resources/js/router/index.js</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> createRouter<span class="token punctuation">,</span> createWebHistory <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue-router"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> CompaniesIndex <span class="token keyword">from</span> <span class="token string">'../components/companies/CompanyIndex'</span> <span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/dashboard'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'companies.index'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> CompaniesIndex <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">createRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span> history<span class="token operator">:</span> <span class="token function">createWebHistory</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> routes <span class="token punctuation">}</span><span class="token punctuation">)</span> |
Chỉ cần khai báo component, và router vào file app.js nữa là xong :
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// resources/js/app.js</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> createApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router'</span> <span class="token keyword">import</span> CompanyIndex <span class="token keyword">from</span> <span class="token string">'./components/companies/CompanyIndex'</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span> components<span class="token operator">:</span> <span class="token punctuation">{</span> CompanyIndex <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>router<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span> |
OK, npm run dev xem thử nó có hoạt động không nhé : 
Thì như bạn thấy đó, nó đã chạy rồi.
Thực hiện CRUD
Vậy các bước setup đã hoàn tất, bây giờ chúng ta sẽ, do chúng ta sẽ sử dụng các Composiion api nên sẽ chia ra một file cho dễ quản lí và đặt nó tại resources/js/composables/companies.js
1. Tạo các hàm thực thi việc xử lý với Vue Composition API
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | <span class="token keyword">import</span> <span class="token punctuation">{</span> ref <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">"axios"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> useRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-router'</span><span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">useCompanies</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> companies <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token keyword">const</span> company <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token function">useRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">const</span> errors <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token function-variable function">getCompanies</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/api/companies'</span><span class="token punctuation">)</span> companies<span class="token punctuation">.</span>value <span class="token operator">=</span> response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token function-variable function">getCompany</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> response <span class="token operator">=</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/api/companies/'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span> company<span class="token punctuation">.</span>value <span class="token operator">=</span> response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>data<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token function-variable function">storeCompany</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> errors<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">''</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/api/companies/'</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token keyword">await</span> router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'companies.index'</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">422</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> key <span class="token keyword">in</span> e<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>errors<span class="token punctuation">)</span> <span class="token punctuation">{</span> errors<span class="token punctuation">.</span>value <span class="token operator">+=</span> e<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>errors<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">' '</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token function-variable function">updateCompany</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> errors<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">''</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">'/api/companies/'</span> <span class="token operator">+</span> id<span class="token punctuation">,</span> company<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token keyword">await</span> router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'companies.index'</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>response<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">422</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> key <span class="token keyword">in</span> e<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>errors<span class="token punctuation">)</span> <span class="token punctuation">{</span> errors<span class="token punctuation">.</span>value <span class="token operator">+=</span> e<span class="token punctuation">.</span>response<span class="token punctuation">.</span>data<span class="token punctuation">.</span>errors<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">' '</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">const</span> <span class="token function-variable function">destroyCompany</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token string">'/api/companies/'</span> <span class="token operator">+</span> id<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> companies<span class="token punctuation">,</span> company<span class="token punctuation">,</span> errors<span class="token punctuation">,</span> getCompanies<span class="token punctuation">,</span> getCompany<span class="token punctuation">,</span> storeCompany<span class="token punctuation">,</span> updateCompany<span class="token punctuation">,</span> destroyCompany <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Bên trên là mình sẽ định nghĩa cho các hàm nhằm phục vụ cho việc CRUD company. Đọc thì cũng dể hiểu thôi phải không? không có gì phức tạp cả.
2. Company list
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | <!-- resources/js/components/companies/CompanyIndex.vue --> <template> <div class="overflow-hidden overflow-x-auto min-w-full align-middle sm:rounded-md"> <table class="min-w-full border divide-y divide-gray-200"> <thead> <tr> <th class="px-6 py-3 bg-gray-50"> <span class="text-xs font-medium tracking-wider leading-4 text-left text-gray-500 uppercase">Name</span> </th> <th class="px-6 py-3 bg-gray-50"> <span class="text-xs font-medium tracking-wider leading-4 text-left text-gray-500 uppercase">Email</span> </th> <th class="px-6 py-3 bg-gray-50"> <span class="text-xs font-medium tracking-wider leading-4 text-left text-gray-500 uppercase">Address</span> </th> <th class="px-6 py-3 bg-gray-50"> <span class="text-xs font-medium tracking-wider leading-4 text-left text-gray-500 uppercase">Website</span> </th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200 divide-solid"> <template v-for="item in companies" :key="item.id"> <tr class="bg-white"> <td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap"> {{ item.name }} </td> <td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap"> {{ item.email }} </td> <td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap"> {{ item.address }} </td> <td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap"> {{ item.website }} </td> </tr> </template> </tbody> </table> </div> </template> <script> import useCompanies from "../../composables/companies"; import { onMounted } from "vue"; export default { name: "CompanyIndex", setup() { const { companies, getCompanies } = useCompanies() onMounted(getCompanies) return { companies } } } </script> |
Kết quả :
2. Create/edit company
Tiếp theo chúng ta sẽ tiến hành xử lý phần tạo và edit company nhé. Đầu tiên ta sẽ tạo ra một component chứa Form chung :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <!-- resources/js/components/companies/Form.vue --> <template> <div class="mt-2 mb-6 text-sm text-red-600" v-if="errors !== ''"> {{ errors }} </div> <form class="space-y-6" @submit.prevent="saveCompany"> <div class="space-y-4 rounded-md shadow-sm"> <div> <label for="name" class="block text-sm font-medium text-gray-700">Name</label> <div class="mt-1"> <input type="text" name="name" id="name" class="block mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="form.name"> </div> </div> <div> <label for="email" class="block text-sm font-medium text-gray-700">Email</label> <div class="mt-1"> <input type="text" name="email" id="email" class="block mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="form.email"> </div> </div> <div> <label for="address" class="block text-sm font-medium text-gray-700">Address</label> <div class="mt-1"> <input type="text" name="address" id="address" class="block mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="form.address"> </div> </div> <div> <label for="website" class="block text-sm font-medium text-gray-700">Website</label> <div class="mt-1"> <input type="text" name="website" id="website" class="block mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" v-model="form.website"> </div> </div> </div> <button type="submit" class="inline-flex items-center px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase bg-gray-800 rounded-md border border-transparent ring-gray-300 transition duration-150 ease-in-out hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring disabled:opacity-25"> {{ companyId ? 'Update' : 'Create' }} </button> </form> </template> <script> import { reactive, onMounted } from "vue" import useCompanies from "../../composables/companies"; export default { name: "Form", props: { companyId: { required: false, type: String }, }, setup(props) { let form = reactive({ 'id': null, 'name': '', 'email': '', 'address': '', 'website': '', }) const { errors, company, getCompany, updateCompany, storeCompany } = useCompanies() if (props.companyId) { onMounted(getCompany(props.companyId)) form = company; } const saveCompany = async () => { props.companyId ? await updateCompany(props.companyId) : await storeCompany({ ...form }) } return { form, saveCompany, errors } } } </script> |
Company Company create
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!-- resources/js/components/companies/CompanyCreate.vue --> <template> <Form /> </template> <script> import Form from "./Form"; export default { name: "CompanyCreate", components: { Form }, } </script> |
Company Company edit
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!-- resources/js/components/companies/CompanyEdit.vue --> <template> <Form :companyId="id" /> </template> <script> import Form from "./Form"; export default { name: "CompanyEdit", props: { id: { required: true, type: String } }, components: { Form, }, } </script> |
OK vậy là xong 2 cái form, việc còn lại bây giờ là thêm route và thêm button để thao tác :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token comment">// resources/js/router/index.js</span> <span class="token operator">...</span> <span class="token keyword">import</span> CompanyCreate <span class="token keyword">from</span> <span class="token string">"../components/companies/CompanyCreate"</span><span class="token punctuation">;</span> <span class="token keyword">import</span> CompanyEdit <span class="token keyword">from</span> <span class="token string">"../components/companies/CompanyEdit"</span><span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/create'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'companies.create'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> CompanyCreate <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/:id/edit'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'companies.edit'</span><span class="token punctuation">,</span> component<span class="token operator">:</span> CompanyEdit<span class="token punctuation">,</span> props<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token operator">...</span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!-- resources/js/components/companies/CompanyIndex.vue --> ... <div class="flex place-content-end mb-4"> <div class="px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-700 cursor-pointer"> <router-link :to="{ name: 'companies.create' }" class="text-sm font-medium">Create company</router-link> </div> </div> ... <th class="px-6 py-3 bg-gray-50"></th> ... <td class="px-6 py-4 text-sm leading-5 text-gray-900 whitespace-no-wrap"> <router-link :to="{ name: 'companies.edit', params: { id: item.id } }" class="mr-2 inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150"> Edit </router-link> </td> ... |
List :
Update / Create :
3. Xoá company
Về phần xoá, các bạn chỉ việc thêm button để gọi event xoá
1 2 3 4 5 | <span class="token tag"><span class="token punctuation"><</span>button <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deleteCompany(item.id)<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring ring-gray-300 disabled:opacity-25 transition ease-in-out duration-150<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Delete <span class="token tag"><span class="token punctuation"></</span>button<span class="token punctuation">></span></span> |
Và thêm function xoá vào setUp() của list :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token keyword">const</span> <span class="token punctuation">{</span> companies<span class="token punctuation">,</span> getCompanies<span class="token punctuation">,</span> destroyCompany <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useCompanies</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token function">onMounted</span><span class="token punctuation">(</span>getCompanies<span class="token punctuation">)</span> <span class="token keyword">const</span> <span class="token function-variable function">deleteCompany</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">id</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>window<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'Are you sure?'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">}</span> <span class="token keyword">await</span> <span class="token function">destroyCompany</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">await</span> <span class="token function">getCompanies</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> companies<span class="token punctuation">,</span> deleteCompany <span class="token punctuation">}</span> |
4. Khai báo lại route của Laravel
Khi các bạn sử dụng SPA trong laravel, bạn cần phải khai báo lại route, vì mục đích chúng ta sẽ sử dụng route của Vue-router là chính
1 2 3 4 | <span class="token class-name static-context">Route</span><span class="token operator">::</span><span class="token function">view</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/{any}'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'dashboard'</span><span class="token punctuation">)</span> <span class="token operator">-></span><span class="token function">middleware</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'auth'</span><span class="token punctuation">)</span> <span class="token operator">-></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'any'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'.*'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
OK mọi việc đã xong, các bạn test lại xem nào
Kết
Vậy thì mình cũng hướng dẫn xong các bạn cách tạo một CRUD đơn giản bằng laravel và vue3 rồi. Hi vọng nó sẽ giúp ích được cho các bạn, mình chỉ đang tìm hiểu về Composition API của vue, nên có gì sai sót mong mọi người bỏ qua. Cảm ơn các bạn đã ủng hộ mình, hi vọng chúng ta cũng sẽ gặp lại trong những bài kế tiếp .
Repository : https://github.com/nguyenthuong1304/crud_vue3
Tham khảo :