# Laravel + Vue.js 入門筆記

###### tags: `Laravel`

## Laravel + Vue.js 入門 - CRUD - 01
### XAMPP 安裝

**XAMPP**
| 單字 |意思 |
| -------- | -------- |
| x | 作業系統 (跨3個作業系統) |
| a | apach |
| m | MariaDB |
| p | php |
| p | perl |

**這邊要注意:** 請不要將xampp作為架站工具，很容易被駭客入侵攻擊

xampp/htdocs => 可以放專案資料夾

**XAMPP下載路徑**
https://www.apachefriends.org/zh_tw/download.html

下載完成後進入安裝的目錄，
將xampp設定為管理員開啟

**Netstat：** 可以查詢port號是否被其他專案搶走，

**例如:** IIS有正在執行的專案等

如果有被搶走則要更改port號，如果有重複的port被使用，可以進到裡面修正




回到XAMPP 點選左邊panel cocnfig，進入此面板
將port設定剛剛設定的port號
儲存完成後重啟apach即可!

### 開啟phpMyAdmin
admin 可開啟mysql管理介面

**常用頁籤**

瀏覽=> 紀錄的資料

第一個欄位通常都是id => Laravel 統一規定

欄位命名都是英文, 空白用底線代替

日期 => on

時間 => at

日期+時間 => at

結構=> 多少欄位, 及欄位屬性

鑰匙=>代表主鍵 , 空值null(不可) ,AUTO_INCREMENT(自動累加1), 更多(可以看到更多)

一個表 varchar 不能超過6535 (累加) , 這是規定

**類型**

| Column 1 | Column 2 |
| -------- | -------- |
| varchar(255) | 動態儲存, 字元最大長度只有255字元 |
| text | 沒有限定字元長度 |
| datetime current_timestamp() | 當下時間碼 |

**編碼**
utf8mb4_general_ci => 可儲存表情符號


新增完左下角按儲存

匯出資料表要注意的地方


### Laravel安裝

將專案安裝在xampp/htdocs底下

開啟常用的命令提示

##### 指令
composer create-project --prefer-dist laravel/laravel="7.x" project_03

翻譯: 建立一個專案 / 想要的發行版本號 laravel=7.X / 專案名稱


### 安裝完成
開啟專案
在本機端做開啟 :
http://localhost/project_03/public/

但是通常不會有public，可以使用其他方式隱藏


**常用指令**

cd : 此資料夾

cd.. : 上一層資料夾路徑

cd xampp : 進入此資料夾

ls : 列出清單

laravel官網
https://laravel.tw/docs/5.3/installation

---
## Laravel + Vue.js 入門 - CRUD - 02

### Larvel
Laravel為"全端型MVC框架"

#### Larvel路由位置
路由放置在routes/web.php ("在這裡的路由不能隨便做刪除")

#### Larvel套件管理器
packalyst套件管理器，與前端npm套件管理器雷同
https://packalyst.com/

---

#### 進入phpmyadmin資料庫
先前有設定了新的port號，因此要用先前的port號登入

http://localhost:83/phpmyadmin/

#### laravel 登入功能

##### login

開放註冊表單: 一開出來沒有權限控管, 搜索引擎會被爬蟲抓到

##### 忘記密碼

資料庫設定上編碼:
mb4=>可以存取表情符號emoji

utf8mb4_unicode_ci=>影響關係到排序

更大的unicode的字體集

##### Laravel專案 env檔案（環境設定檔案）修改

| Column 1 | Column 2 |
| -------- | -------- |
| DB_CONNECTION=mysql | 資料庫名稱 |
| DB_HOST=127.0.0.1 | 預設location，虛擬主機 |
| DB_PORT=3306 | 預設host |
| DB_DATABASE=project_03 | 專案名稱，資料庫名稱 |
| DB_USERNAME=root | 不能這樣上線(測試可以這樣用) |
| DB_PASSWORD= | 密碼(測試可以這樣用) |

備註: 上傳到github可能**不會有**env檔案，可以從env.example檔案複製過來做修正

##### laravel 命名規則
建立資料庫的資料表，
laravel命名習慣是使用小寫複數
laravel有一個翻譯器，會自動將資料庫和Laravel的APP做連結
只要設定好env檔案，因為MVC，所以會自動去抓資料對照表並且串連起來

https://webdevetc.com/blog/laravel-naming-conventions

#### 資料庫

通常資料表這3個是固定並自動管理的，因此不需要管他


認證機制是內建的，因此users Table不需要手動增加

##### 註冊完成後密碼會加密

#### 安裝套件
##### 安裝 LaravelUI

###### 指令

composer require laravel/ui

---

**安裝上有遇到幾個問題因此做個紀錄: **
1. laravel8.x 對應 UI 3.x
但是因為安裝的laravel是7.x版本 2.x
所以要降級

降級指令: **composer require laravel/ui:2.0**

2. 遇到版本太低
使用升等命令: composer selfupdate

3. 遇到內存不足

進入php.ini修改，存檔後重啟


##### 安裝 bootstrap -- auth
php artisan => 針對app命令指令工具

###### 指令
這邊使用最單純的裝法，指令：
php artisan ui bootstrap --auth

安裝好後，需要重新編譯一次
但是這邊先引用CDN做快速開發，

laravel是MVC框架，前端框架都放在resources資料夾裡面，
並且compiler完成後會打包成一個js檔案

剛安裝的認證機制auth都放在views裡面，尚未有UI

resolve-url-loader=> 則放置(views)



laravel-mix，是用來打包前端框架

views/layouts/app.blade.php

打包好的前端框架會產生一大包的app.js，因此會掛於asset('js/app.js')

因此在laravel的前端思路是使用webpack所打包出來的
在這邊引用CDN

#### 將資料表傳進資料庫裏面(將資料表建立起來)

**註冊表單**

指令: php artisan migrate
migrate在laravel裡面意旨: 把資料表建立起來
位於: database/migrations，將裡面的資料轉換成sql語言並傳送至資料庫


routes: laravel路由


**網址連結**

命名規則: https://webdevetc.com/

官方網站: https://laravel.com/docs/7.x/frontend

## Laravel + Vue.js 入門 - CRUD - 03
https://www.facebook.com/Arthur.ShengBo.Chen/videos/10224374148718216/

查詢php版本:
開啟命令提示字元

指令: php -v


**Laravel**
MVC框架(module view controller)

1. 屬於restful Json架構
2. 上面的網址都是API(路由)

**傳統的呼叫模式 (查詢字串)**


**現在的呼叫模式 restful (/格式設計)**

用斜線分隔名跟值


因此laravel使用路由Route設計(網址 = api)，所以要先設計路由

**大專案流程：**
資料庫>資料表先設計好再談route

**設計四大方向：**
路由/資料模型/視圖/控制
模組module、路由router、視圖view、控制器controller

**Larvral 自動化技術：**
laravel命名規則方式必須要注意，因為有半自動化的機制，因此大小寫、單複數如果下錯，都會報錯

XAMPP要與php 同版本，否則會出錯

php artisan：查詢指令

compose 是作為管理php套件

**route**

列出內建路由:
php artisan route:list

URI/Name: 半自動化機制命名

Action: 到Controller裡面的function

Middleware: 認證機制是否有擋掉

**routes/web.php 為例: **


Auth:routes();

位置:


在此處單複數一定要相同，在此處User是一個特殊資料表，laraval指定要將它額外提出

從User.php檔案編譯後(php artisan migrate migrate)傳送至資料庫

如果要新建立的話，可以新建一個資料夾為Models，將新建的controller放置在此處，不要放在app底下，會很難管理

建立Models指令語法範例: php artisan make:model Http\Models\Person


<br/>

laravel目前使用blade樣板引擎，因此切板會在blade進行

storage: 快取檔案


<br/>

**Laravel使用的引擎**

Eloquent ORM: 自動串聯資料表資料庫，也就是說建立資料庫的連結，一種包裝語法

https://laravel.com/docs/8.x/eloquent

Query Builder: 不管資料庫連結到哪個資料引擎，都是一模一樣
因此對SQL要有一定的基礎

**VSCODE外掛介紹**
Favorites

參考文章
[MVC維基百科](https://zh.wikipedia.org/zh-tw/MVC)

---
<br/>

## Laravel + Vue.js 入門 - CRUD - 04

**建立Controller**

1. 這邊以Person為範例，先在routes定義方法

2. 建立控制器Controller

指令：php artisan make:controller PersonController (建立完成後會發現是空的頁面，此處指令要自己手動在Controller輸入)

指令：php artisan make:controller PersonController --resource (將7種方法都建立)



定義參數的寫法，參考
https://github.com/laravel/framework/issues/19477

查詢是id是否有命名成功，指令：php artisan route:list

**views**:
resources/views

要新增頁面的話建議要新增資料夾，
在這邊以persons為例子，
常例來說如果要新增方法(函式)則以方法命名


laravel是動態樣板
laravel以blade為樣板引擎
樣板語言小抄: https://gist.github.com/CiprianSpiridon/f4d7fe0d8a51f0714b62
https://shortcode.dev/blade-cheatsheet
https://learninglaravel.net/cheatsheet/

**補充:**

vue,angule => javascript動態合併樣板

php => php動態合併樣板

pug => 靜態合併樣板

laravel動態合併樣版效能比較慢，所以會有快取機制，位於storage，將樣板做動態合併之後，放入storage/framework/cache裡面，才做上線，
所以執行的時候不見得是執行樣板檔案，執行的時候是執行樣板被快取之後的檔案，做為執行增加效率

如果是在views出錯，除錯的訊息都是放在storage裡面，指向會比較不明顯
如果是controller出錯，會比較明顯，會有行數提示

laravel流程:

從route呼叫網址=>
第一個順序會前往controller的Index，

---

## Laravel + Vue.js 入門 - CRUD - 05

laravel 為全端型的框架，
網站入口點從route進入，因此一開始都先從路由做設定，每一個路由都是一個網址
重心點都會在Controller，Models最少，
第二低是Views

blade樣板引擎會將前端工程師撰寫的翻譯成php檔案

laravel 中文文檔 7.x
https://learnku.com/docs/laravel/7.x

<br/>

**blade語法**

@extends('layouts.app') => 套用母版

@section('content') => 填充 , @endsection(關閉@section，一定要有)

@yield('content') => 套用內頁

if end if寫法:
@if (session('success'))
{{ session('success') }}
@endif

補充: laravel裡面put/patch/delete是沒有頁面，使用的是post，並且是模擬出來的，因此如果是delete，則要使用form表單，並且使用偽造方法
@method('DELETE')



{{}} => 會被laravel引擎翻譯成字串，等同php echo的語法

{{ route('persons.destroy', [route指定的參數 => 指定id])}}

route('函式', route指定的參數)

[]=>陣列簡寫
[''=>''] => 胖箭頭代表，陣列裡面的其中單一個元素

如果有兩個以上 => ['id'=>'123', 'id'=>'456']

指定完成後F12會看到翻譯成字串


route文件: https://laravel.com/docs/8.x/helpers#methods-route

補充: action="導回指定的頁面"，但是delete不能做導回自己的方法，只有get, head, post


@csrf => _token 產生一組與伺服端做比對的亂碼，讓安全性提升一些

## Laravel + Vue.js 入門 - CRUD - 06

controller有三個功能:
1. 帶入model
2. 如何將model建立出一個資料集
3. 把資料集變成一個物件集合做一個顯示

controller是使用物件導向型的寫法

model載入至controller

指定要串聯資料庫的名稱，這邊是強制示範

提取資料帶入新變數並顯示在頁面上

blade語法套用在table表格

laravel，loop迴圈文件:

https://laravel.com/docs/8.x/blade#loops

route定義方式文件參考:

https://laravel.com/docs/7.x/controllers#restful-partial-resource-routes

---

## Laravel + Vue.js 入門 - CRUD - 07

helpers文件連結: https://laravel.com/docs/7.x/helpers
https://laravel.com/docs/7.x/helpers#method-route

blade 連結寫法

middleware登入判斷

route文件連結: https://laravel.com/docs/7.x/routing#route-groups

第一種群體包法的方式:

第二種方式:

## Laravel + Vue.js 入門 - CRUD - 08

將接收到的值傳到前台
可以使用all())


**laravel已經有內建多國語系**

多國語系文件:
https://laravel.com/docs/8.x/localization

自訂錯誤訊息文件:
https://laravel.com/docs/7.x/validation#custom-error-messages

$validator = Validator::make($input, $rules, $messages);

input=> request表單所有的欄位，驗證的欄位傳入

rules=> 驗證的規則

message=> 回傳訊息

驗證邏輯:
https://laravel.com/docs/7.x/validation#quick-writing-the-validation-logic


顯示驗證訊息: https://laravel.com/docs/7.x/validation#quick-displaying-the-validation-errors

舊的值: https://laravel.com/docs/7.x/helpers#method-old

驗證流程寫法:

1. 控制器裡面載入驗證

2. 新建寫法

3. blade前端接收

4. 修改語言

laravel 語言包位置:


改變整個網站語系:

laravel語言設定位置

laravel語言定義位置

::attribute=> 代表會帶入前端name定義的值

**laravel語言變換**

第一種方法: 新建一個中文資料夾，並新建定義的語言
第二種方法: 沿用英文的去做修改
第三種方法: 沿用英文，並用validation $message 去做修改

驗證通過存進資料庫

驗證方法2: 不需要使用參數，作法更簡單

### 存入資料庫遇到問題點

原因: laravel在mysql驗證中預設是嚴格模式
方法一: 如果不需要嚴格的驗證方式的話，可以在config/database.php將strict改為false

## Laravel + Vue.js 入門 - CRUD - 09

### 編輯
編輯作法，編輯與新增差不多，blade模板方式可以直接複製create，只需要改依些地方

update需要攜帶personId，要知道要編輯的是哪一個id，並且要注意php都使用單引號
@method('PUT'): 為偽造方法

所有清單列表編輯按鈕

find()尋找文件:
https://laravel.com/docs/7.x/eloquent#retrieving-single-models

where get
如果搜尋很多筆資料，帶回來的會是多維的

前端做資料的綁定，將資料傳到欄位上面，old('','物件->key')

更新controller

新增資料庫文件:
https://laravel.com/docs/7.x/eloquent#inserting-and-updating-models

### 刪除

回到前端，將真實資料帶入

F12可以看到偽造及參數已經帶入

刪除controller

## Laravel + Vue.js 入門 - CRUD - 10

新建一個專案，框架改為vue，流程跟前面差不多:

1. 複製資料庫

2. 新建一個laravel專案
composer create-project --prefer-dist laravel/laravel:^7.0 project_04

3. 安裝laravel UI 套件
指令: composer require laravel/ui:^2.4，
補充: laravel版本: 第7版支援2，第8版支援３

4. 架構出一個後端登入驗證介面 指令：　php artisan ui bootstrap --auth

5. 建立一個Models，建議建立在Http底下，Http新增Models資料夾，
指令: php artisan make:model Http/Models/Person

6. 建立control，這邊比較不一樣的做法：
指令: php artisan make:controller PersonController --api

在這邊要注意一個地方，選擇api，所建立的fucntion跟使用resource少了create/edit，預設上是因為假設全部都做在同一頁面

api文件: https://laravel.com/docs/7.x/controllers

---

## Laravel + Vue.js 入門 - CRUD - 11

api路由出現方式:
這邊範例會先隱藏不做複雜的，只做一班後台驗證，會先將middleware('api')隱藏

新增一般後台驗證api，不需要煩惱token部分
closer=>閉包

取得聯絡簿人員列表:
直接引用model取得列表

定義上uri和name盡量一致，在呼叫上會使用name，action運用會在route裡面


**新增/刪除/修改都寫在web.php，修正簡易寫法: 批次載入**

新增


修改


刪除


相關文件:
https://laravel.com/docs/7.x/eloquent#mass-assignment

## Laravel + Vue.js 入門 - CRUD - 12

laravel csrf: 跨站請求偽造
防止有心人士做重複地請求去竊取重要的資料

https://laravel.com/docs/7.x/csrf
https://ithelp.ithome.com.tw/articles/10208593?sc=iThelpR

x-xsrf-token: csrf token擋頭，放在xsrf-token裡面cookie裡面，
https://laravel.com/docs/7.x/csrf#csrf-x-xsrf-token

放置位置:

可以看到與cookie作連動
xsrf-token是laravel的token，建立UI的時候就會自動加入，並且每一頁面都會有，如果沒有的話可以自動加入

如果沒有加入token，可以照文件手動強制將token寫入cookie，如果是使用jquery可以使用$.ajaxSetup加入
https://laravel.com/docs/7.x/csrf#csrf-x-csrf-token

引用axios套件後，會自動去抓取x-csrf-token，不需要再手動強制去加入

postman 傳遞x-xsrf-token
https://ivanagyro.medium.com/%E7%94%A8postman-6-0-7%E5%82%B3%E9%81%9Ex-xsrf-token-6104e94d6424

## Laravel + Vue.js 入門 - CRUD - 13

引入vue
在組件上面新增@section('script')~@endsection 區塊，用來寫vue

使用上前面必須要加上一個@，因為與php有衝突

相關文件: https://laravel.com/docs/7.x/blade#blade-and-javascript-frameworks

---

laravel 錯誤編號意思:

400 Bad request：通常是因為參數錯誤，沒有傳遞請求必須夾帶的參數或是參數類型不匹配
401 Unauthorized：沒有帶認證資料或者帶了錯誤的認證資料
403 Forbidden：用戶端帶了正確的參數,，但傳遞參數的用戶沒有權限訪問此站，伺服器收到請求但拒絕提供服務

419 => token沒有對應

422 => 代表有欄位沒有填寫

500 =>

502 => bad gateway，錯誤網關，指上游伺服器和網關／代理不同意的協議交換數據，通常是網站本身的問題不是用戶端的問題，這段代碼是HTTP狀態代碼之一，他警告web伺服器管理員網站出了問題
1. 伺服器超載: 如果伺服器耗盡內存，伺服器可能會崩潰，原因是站點上有大量訪問者或DDOS攻擊
2. 防火牆阻止請求: 防火牆可能會阻止邊緣伺服器和上游伺服器之間的通信。某些DDoS保護系統可能會過度反應並阻止來自內容傳送系統的請求。
3. 編程錯誤:有時網站代碼中的一個錯誤可能意味著請求不能得到正確的響應，從而導致出現這個錯誤。
4. 網路錯誤: DNS問題、路由問題和ISP相關的問題也可以導致錯誤網關。
5. 伺服器軟體超時: 當Web伺服器需要更多時間來完成並且緩存工具達到其超時值時，也會發生此錯誤。慢查詢也會導致此問題。
解決方法:

要釐清

1. ajax傳輸機制原理是甚麼
2. 為什麼會有header
3. head和header是不一樣
4. request和response的擋頭是甚麼

---

## Laravel + Vue.js 入門 - CRUD - 14

api url:
https://laravel.com/docs/7.x/helpers#method-route

下方指令確認api url表格: 最主要看Name欄位

api引用介接: url下({{route('api.persons')}})

dom元素介接上要記得在花掛號上面寫上@

## Laravel + Vue.js 入門 - CRUD - 15

serialize使用方式DOM元素:
可將編碼串起來

https://api.jquery.com/serialize/

https://www.w3school.com.cn/jquery/ajax_serialize.asp


中文編碼修正: https://cythilya.github.io/2020/07/24/encode-decode/

const encodedStr = encodeURI('這是中文字串'); // encodedStr 得到 %E9%80%99%E6%98%AF%E4%B8%AD%E6%96%87%E5%AD%97%E4%B8%B2

---

補充 :

Schema => 可以想成是與資料庫做對換

migrate => 以應用程式為導向, 記錄對資料庫所做過的動作, 只紀錄結構, 但是如果一來一往刪除,　資料會消失

artisan 指令 => php .\artisan

---

其他連結:

laraval 教學:https://www.youtube.com/watch?v=pSuVgTp2Ovg&list=PL2SrkGHjnWcyOquWJIEd7AYAJGMAUdp-a&index=29

IT幫幫忙:
https://ithelp.ithome.com.tw/users/20120326/ironman/2463

php後端debug:

https://medium.com/pvt5r486/%E5%88%9D%E6%8E%A2%E5%BE%8C%E7%AB%AF-no-2-%E4%BD%BF%E7%94%A8vs-code-%E9%96%8B%E7%99%BCphp-%E7%9A%84-debug-%E8%A8%AD%E5%AE%9A%E8%88%87-composer-%E5%A5%97%E4%BB%B6%E7%AE%A1%E7%90%86-f0b45955aa9b

課程共筆連結: https://docs.google.com/document/d/1adZSaeq7BXMRsvKmSsgRECO2ap3c9PPV4DmxAz0ZpYQ/edit?fbclid=IwAR1-VniCsJM0VlruvwflOA86Ligwb7gwIm73EH7BPyu19ieCVybWOc3mnq0