![雙向綁定
Livewire 組件 Livewire 視圖
use LivewireComponent;
class DataBinding extends Component
{
public $name = '';
public $agree = false;
public $languages = ['Laravel', 'Vue.js'];
public function render()
{
return view('livewire.data-binding');
}
}
<div>
<input type="text" wire:model="name">
<input type="checkbox" wire:model="agree">我同意服務條款
@if ($agree)
<div>哈囉~ {{ strtoupper($name) }}</div>
@else
<div>{{ $name }} 請勾選同意服務條款</div>
@endif
<ul>
@foreach ($languages as $language)
<li>{{ $language }}</li>
@endforeach
</ul>
</div>](https://image.slidesharecdn.com/2021-211022064238/85/2021-laravelconf-tw-slides3-13-320.jpg)
![即時搜尋
Livewire 組件 Livewire 視圖
use AppModelsLanguage;
use LivewireComponent;
class Search extends Component
{
public $search = '';
protected $queryString = [
'search' => ['except' => ''],
];
public function render()
{
return view('livewire.search', [
'languages' => Language::where('name', 'LIKE',
]);
}
}
<div>
<input type="text" wire:model="search">
<ul>
@foreach ($languages as $language)
<li>{{ $language->name }}</li>
@endforeach
</ul>
</div>](https://image.slidesharecdn.com/2021-211022064238/85/2021-laravelconf-tw-slides3-15-320.jpg)
![發送Inertia請求
import { Inertia } from '@inertiajs/inertia'
Inertia.visit(url, {
method: 'get',
data: {},
replace: false,
preserveState: false,
preserveScroll: false,
only: [],
headers: {},
errorBag: null,
forceFormData: false,
onCancelToken: cancelToken => {},
onCancel: () => {},
onBefore: visit => {},
onStart: visit => {},
onProgress: progress => {},
onSuccess: page => {},
onError: errors => {},
onFinish: visit => {},
})
import { Inertia } from '@inertiajs/inertia'
Inertia.get(url, data, options)
Inertia.post(url, data, options)
Inertia.put(url, data, options)
Inertia.patch(url, data, options)
Inertia.delete(url, options)](https://image.slidesharecdn.com/2021-211022064238/85/2021-laravelconf-tw-slides3-25-320.jpg)
![InertiaLink
import { Link } from '@inertiajs/inertia-vue3'
<Link href="/">首頁</Link>
// Method：POST / PUT / PATCH / DELETE
<Link href="/logout" method="post" as="button" type="button">登出</Link>
// 連結會渲染成
<button type="button">登出</button>
// post 資料
<Link href="/endpoint" method="post" :data="{ foo: bar }">Save</Link>
// 替換歷史紀錄
<Link href="/" replace>首頁</Link>
// 保持滾動條位置
<Link href="/" preserve-scroll>首頁</Link>
// Partial reloads (局部重載)
<Link href="/users?active=true" :only="['likes_count']">喜歡</Link>](https://image.slidesharecdn.com/2021-211022064238/85/2021-laravelconf-tw-slides3-26-320.jpg)
![HelloInertia
路由 VUE 組件
渲染頁面
Prop傳資料
use InertiaInertia;
Route::get('/', function () {
return Inertia::render('Home');
});
// 或
Route::inertia('/', 'Home');
<!-- resources/js/pages/Home.vue -->
<template>
<h1>首頁</h1>
</template>
use InertiaInertia;
Route::get('/about', function () {
return Inertia::render('About', [
'name' => 'Lucas',
]);
});
<!-- resources/js/pages/About.vue -->
<template>
<h1>關於</h1>
<div>你好~ 我是 {{ name }}</div>
</template>
<script>
export default {
props: {
name: String,
},
}
</script>](https://image.slidesharecdn.com/2021-211022064238/85/2021-laravelconf-tw-slides3-28-320.jpg)
![留言板-留言列表
跟資料庫拿資料
class CommentController extends Controller
{
public function index()
{
return Inertia::render('Comments', [
'comments' => Comment::all()
->transform(fn (Comment $comment) => [
'id' => $comment->id,
'name' => $comment->name,
'content' => $comment->content,
'created_at' => $comment
->created_at
->format('Y/m/d H:i'),
]),
]);
}
}
<template>
<h1>留言</h1>
...
<ul>
<li v-for="comment in comments">
<h2>姓名：{{ comment.name }}</h2>
<div>{{ comment.created_at }}</div>
<div>內容：{{ comment.content }}</div>
</li>
</ul>
</template>
<script>
export default {
props: {
comments: Array,
},
// ...
}
</script>](https://image.slidesharecdn.com/2021-211022064238/85/2021-laravelconf-tw-slides3-32-320.jpg)
![留言板-表單送出
class CommentController extends Controller
{
public function store(Request $request)
{
$data = $request->validate([
'name' => 'required',
'content' => 'required',
], [
'name.required' => '請輸入姓名',
'content.required' => '請輸入留言',
]);
Comment::create($data);
return back();
}
}](https://image.slidesharecdn.com/2021-211022064238/85/2021-laravelconf-tw-slides3-34-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to 2021.laravelconf.tw.slides3 (20)
Ad
More from LiviaLiaoFontech (9)
Ad
2021.laravelconf.tw.slides3
- 4. 經典後端網站架構 路由(後端路由) + 資料(ORM) + 渲染(後端模板) = 後端應用 (Laravel,Rails)
- 5. 「全端網站」的好朋友
- 6. SPA時代來臨，網站前後端分離 路由(前端路由) + 資料(API) + 渲染(前端組件) = 前端應用 (Vue.js,React,Angular)
- 11. 計數器 Livewire 組件 Livewire 視圖 // routes/web.php use AppHttpLivewireCounter; Route::get('/', Counter::class); // app/Http/Livewire/Counter.php use LivewireComponent; class Counter extends Component { public $count = 0; public function increment() { $this->count++; } public function render() { return view('livewire.counter'); } } <!-- resources/views/livewire/counter.blade.php --> <div> <button wire:click="increment">+</button> <h1>{{ $count }}</h1> </div>
- 12. 運作原理 Subsequent Request Initial Request Click “+” Button Browser Server <h1>1</h1> { count: 1 } <h1>2</h1> { count: 2 } { count: 1 } Visit Page
- 13. 雙向綁定 Livewire 組件 Livewire 視圖 use LivewireComponent; class DataBinding extends Component { public $name = ''; public $agree = false; public $languages = ['Laravel', 'Vue.js']; public function render() { return view('livewire.data-binding'); } } <div> <input type="text" wire:model="name"> <input type="checkbox" wire:model="agree">我同意服務條款 @if ($agree) <div>哈囉~ {{ strtoupper($name) }}</div> @else <div>{{ $name }} 請勾選同意服務條款</div> @endif <ul> @foreach ($languages as $language) <li>{{ $language }}</li> @endforeach </ul> </div>
- 14. Polling(輪詢) <div wire:poll.1s> {{ now() }} </div>
- 15. 即時搜尋 Livewire 組件 Livewire 視圖 use AppModelsLanguage; use LivewireComponent; class Search extends Component { public $search = ''; protected $queryString = [ 'search' => ['except' => ''], ]; public function render() { return view('livewire.search', [ 'languages' => Language::where('name', 'LIKE', ]); } } <div> <input type="text" wire:model="search"> <ul> @foreach ($languages as $language) <li>{{ $language->name }}</li> @endforeach </ul> </div>
- 18. BladevsVue? 同時用Blade和Vue來組織視圖 視圖全權交給Vue(View) <div class="container"> <create-item :data="@json($data)" /> <ul> @foreach ($items as $item) <li>{{ $item->content }}</li> @endforeach </ul> </div> <items-list :data="@json($page)" />
- 21. HTTP請求 GET /events/80 HTML響應 GET /api/events/80 {} JSON響應 HTTP請求 XHR請求
- 25. 發送Inertia請求 import { Inertia } from '@inertiajs/inertia' Inertia.visit(url, { method: 'get', data: {}, replace: false, preserveState: false, preserveScroll: false, only: [], headers: {}, errorBag: null, forceFormData: false, onCancelToken: cancelToken => {}, onCancel: () => {}, onBefore: visit => {}, onStart: visit => {}, onProgress: progress => {}, onSuccess: page => {}, onError: errors => {}, onFinish: visit => {}, }) import { Inertia } from '@inertiajs/inertia' Inertia.get(url, data, options) Inertia.post(url, data, options) Inertia.put(url, data, options) Inertia.patch(url, data, options) Inertia.delete(url, options)
- 26. InertiaLink import { Link } from '@inertiajs/inertia-vue3' <Link href="/">首頁</Link> // Method：POST / PUT / PATCH / DELETE <Link href="/logout" method="post" as="button" type="button">登出</Link> // 連結會渲染成 <button type="button">登出</button> // post 資料 <Link href="/endpoint" method="post" :data="{ foo: bar }">Save</Link> // 替換歷史紀錄 <Link href="/" replace>首頁</Link> // 保持滾動條位置 <Link href="/" preserve-scroll>首頁</Link> // Partial reloads (局部重載) <Link href="/users?active=true" :only="['likes_count']">喜歡</Link>
- 28. HelloInertia 路由 VUE 組件 渲染頁面 Prop傳資料 use InertiaInertia; Route::get('/', function () { return Inertia::render('Home'); }); // 或 Route::inertia('/', 'Home'); <!-- resources/js/pages/Home.vue --> <template> <h1>首頁</h1> </template> use InertiaInertia; Route::get('/about', function () { return Inertia::render('About', [ 'name' => 'Lucas', ]); }); <!-- resources/js/pages/About.vue --> <template> <h1>關於</h1> <div>你好~ 我是 {{ name }}</div> </template> <script> export default { props: { name: String, }, } </script>
- 29. Layout <template> <div>...</div> </template> <script> import Layout from '@/Layout.vue' export default { layout: Layout, ... } </script>
- 30. 會員登入 use InertiaInertia; class LoginController extends Controller { public function loginView() { return Inertia::render('Auth/Login'); } public function login(Request $request) { // Auth::attempt()... } public function logout(Request $request) { // Auth::logout()... } }
- 31. 會員登入 <template> <h1>會員登入</h1> <form @submit.prevent="form.post('/login')"> <div class="input-group"> <label>E-mail：</label> <input type="text" v-model="form.email"> <div v-if="form.errors.email" class="invalid"> {{ form.errors.email }} </div> </div> <div class="input-group"> <label>密碼：</label> <input type="password" v-model="form.password"> </div> <button>送出</button> </form> ... </template> <script> import { useForm } from '@inertiajs/inertia-vue3' export default { // ... setup() { const form = useForm({ email: '', password: '', }) return { form } }, } </script>
- 32. 留言板-留言列表 跟資料庫拿資料 class CommentController extends Controller { public function index() { return Inertia::render('Comments', [ 'comments' => Comment::all() ->transform(fn (Comment $comment) => [ 'id' => $comment->id, 'name' => $comment->name, 'content' => $comment->content, 'created_at' => $comment ->created_at ->format('Y/m/d H:i'), ]), ]); } } <template> <h1>留言</h1> ... <ul> <li v-for="comment in comments"> <h2>姓名：{{ comment.name }}</h2> <div>{{ comment.created_at }}</div> <div>內容：{{ comment.content }}</div> </li> </ul> </template> <script> export default { props: { comments: Array, }, // ... } </script>
- 33. 留言板-表單送出 <template> <h1>留言</h1> <form @submit.prevent="storeComment"> <div class="input-group"> <label>姓名：</label> <input type="text" v-model="form.name"> <div v-if="form.errors.name" class="invalid"> {{ form.errors.name }} </div> </div> <div class="input-group"> <label>留言：</label> <textarea v-model="form.content"></textarea> <div v-if="form.errors.content" class="invalid"> {{ form.errors.content }} </div> </div> <button>送出</button> </form> ... </template> <script> import { useForm } from '@inertiajs/inertia-vue3' export default { // ... setup() { const form = useForm({ name: '', content: '', }) const storeComment = () => { form.post('/comments', { onSuccess: () => form.reset(), }) } return { form, storeComment } }, } </script>
- 34. 留言板-表單送出 class CommentController extends Controller { public function store(Request $request) { $data = $request->validate([ 'name' => 'required', 'content' => 'required', ], [ 'name.required' => '請輸入姓名', 'content.required' => '請輸入留言', ]); Comment::create($data); return back(); } }
- 35. 錯誤處理
- 37. SSR(服務端渲染)-優化SEO 測試階段 1. 發送請求進入後端框架-Laravel 2. Inertia將Page物件發送給本地SSRServer， 使用Node.js將當前頁面的前端組件渲染為HTML-Node.js 3. 將HTML插入到響應中並回傳給用戶 4. SSR模式下啟動前端框架-vue-server-renderer (Vue、React、Svelte都有處理SSR的工具) 5. SSR渲染只會在進頁面時執行，之後就會以SPA模式運作 PingCRM-SSRDemo
- 41. LivewirevsInertia.js Livewire Inertia.js 框架 Laravel 支援Inertia的框架 視圖(View) Blade、PHP、Alpine.js 前端框架Vue、React… SEO 易 難 總結 用PHP寫出JavaScript的效果 前後端框架的膠水