---
# System prepended metadata
title: Laravel + Vue.js 入門筆記
tags: [Laravel]
---
# 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
laravel目前使用blade樣板引擎，因此切板會在blade進行
storage: 快取檔案
**Laravel使用的引擎**
Eloquent ORM: 自動串聯資料表資料庫，也就是說建立資料庫的連結，一種包裝語法
https://laravel.com/docs/8.x/eloquent
Query Builder: 不管資料庫連結到哪個資料引擎，都是一模一樣
因此對SQL要有一定的基礎
**VSCODE外掛介紹**
Favorites
參考文章
[MVC維基百科](https://zh.wikipedia.org/zh-tw/MVC)
---
## 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
**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