清明連假開始了，在上上禮拜提前掃墓了，為了避免車潮，所以我們家都會提早掃，所以連假會有比較空閒的時間去研究一些技術的東西，看來前言廢話太多，進入正題吧。這章節要介紹MVC架構裡面的View，這章其實有點像是延續上篇的Route(路由)，因為其實每一章節都是有相關的，只是需要先稍微做個介紹，才能一直往更複雜的做延伸介紹。
檢視(View)
View的意思就是呈現我們所看到的HTML靜態畫面，也可以稱之為前端，但如果搭配Route(路由)、Controller(控制器)、Model(模組)就可以呈現動態的一面。
Laravel專案中View位於 resources/views/，在每一個View的命名，一定要加上blade，laravel在執行上才會讀到xxx.blade.php的View。
1、製作第一個View
View
在 resources/views/ 建立 test.blade.php 檔案
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html>
<html lang="zh-Hunt-Tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 專案練習</title>
</head>
<body>
<h1>大家好</h1>
</body>
</html>
|
Route
在route對應到view的某一個檔案，可以省略blade.php。
設定網址 routes/web.php ，新增一組route
1
2
3
| Route::get('test/', function () {
return view('test');
});
|
Terminal
在專案book檔案下輸入執行
結果
瀏覽器輸入 http://127.0.0.1:8000/test
是不是很簡單呢？
2.延伸上面View(參數傳值)
在路由裡宣告一段變數，將值傳到View頁面
Route
1
2
3
4
5
6
7
8
9
| Route::get('test/', function () {
$data = array('about' => '關於我們',
'news' => '最新消息',
'book' => '書籍庫',
'ebook' => '電子書',
'contact' => '聯絡我們'
);
return view('test',$data);
});
|
View
延伸上一個View test.blade.php 檔案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="zh-Hunt-Tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 專案練習</title>
</head>
<body>
<h1>大家好</h1>
<ul>
<li><?php echo $about; ?></li>
<li><?php echo $news; ?></li>
<li><?php echo $book; ?></li>
<li><?php echo $ebook; ?></li>
<li><?php echo $contact; ?></li>
</ul>
</body>
</html>
|
OR
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="zh-Hunt-Tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 專案練習</title>
</head>
<body>
<h1>大家好</h1>
<ul>
<li>{{ $about }}</li>
<li>{{ $news }}</li>
<li>{{ $book }}</li>
<li>{{ $ebook }}</li>
<li>{{ $contact }}</li>
</ul>
</body>
</html>
|
結果
3.延伸第1點的View(加入CSS及JS)
在專案中，我們在專案中的 public 資料夾裡，建立assets資料夾，裝放JS及CSS等套件。
jQuery官網
twitter - Bootstrap
先安裝以上套件
View
延伸上一個View test.blade.php 檔案，加入jQuery、Bootstrap
※ 引入的JS檔案 加上defer，等頁面載入完畢才會做執行。
參考文章 [HTML5] script 的新增屬性 defer, async
1
2
3
4
5
| {{-- JQuery 3.4.1 --}}
<script src="/assets/js/jquery-3.4.1.min.js" defer></script>
{{-- Bootstrap 4.4.1 --}}
<script src="/assets/js/bootstrap-4.4.1-dist/bootstrap.min.js" defer></script>
<link rel="stylesheet" href="/assets/css/bootstrap-4.4.1-dist/bootstrap.min.css">
|
完整頁面
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
| <!DOCTYPE html>
<html lang="zh-Hunt-Tw">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 專案練習</title>
{{-- JQuery 3.4.1 --}}
<script src="/assets/js/jquery-3.4.1.min.js" defer></script>
{{-- Bootstrap 4.4.1 --}}
<script src="/assets/js/bootstrap-4.4.1-dist/bootstrap.min.js" defer></script>
<link rel="stylesheet" href="/assets/css/bootstrap-4.4.1-dist/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>大家好</h1>
<ul>
<li>{{ $about }}</li>
<li>{{ $news }}</li>
<li>{{ $book }}</li>
<li>{{ $ebook }}</li>
<li>{{ $contact }}</li>
</ul>
</div>
</body>
</html>
|
Terminal
在專案下輸入執行
結果
瀏覽器輸入 http://127.0.0.1:8000/test ，在頁面下右鍵檢視原始碼，點連結代表有成功載入。
標籤: w3HexSchool PHP Laravel