Vue、Laravel 項目初始化命令對比 / curl 命令/ CORS 機制總結與案例

前言

一個疑問衍生出另一個疑問再衍生出又一個疑問，于是有了這篇文章。

一、Vue 項目初始化命令

  1. 基于 Vite 創建 Vue 項目
    • 命令：npm create vite@latest my-project -- --template vue
    • 適用場景：需輕量級、高速開發環境
    • 關鍵點：使用 Vite 作為構建工具，--template vue 指定 Vue 模板
  2. 基于 Vue CLI 創建項目
    • 命令：npm create vue@latest
    • 適用場景：企業級應用，需成熟工具鏈
    • 關鍵點：交互式選擇功能（如 Router、Pinia 等），使用 Webpack 構建
  3. Vite 初始化項目（項目名不同）
    • 命令：npm init vite@latest frontend -- --template vue
    • 功能：與第一個命令功能一致，僅項目名改為 frontend
  4. Laravel 項目混合編譯依賴安裝
    • 命令：npm install laravel-mix vue@latest @vitejs/plugin-vue --save-dev
    • 適用場景：Laravel 項目混合使用新舊編譯工具
    • 關鍵點：安裝 laravel-mix（傳統編譯）和 @vitejs/plugin-vue（Vite 插件）

二、Laravel 項目初始化命令

  1. 手動創建 Laravel 項目并使用 Sail 啟動 Docker 容器
    • 命令：
      composer create-project --prefer-dist laravel/laravel my-laravel-project
cd my-laravel-project
./vendor/bin/sail up -d
    • 適用場景：需要完全控制項目結構和配置的場景
  2. 使用 Laravel 在線構建服務創建項目并啟動 Docker 容器
    • 命令：
      curl -s "https://laravel.build/my-project?with=mysql,redis" | bash
cd my-project && ./vendor/bin/sail up -d
    • 適用場景：需要快速啟動并包含特定服務的場景，如 MySQL 和 Redis

三、curl 命令詳解

  1. 作用
    • curl 是一個命令行工具，用于在命令行界面下執行數據傳輸。支持多種協議，包括 HTTP、HTTPS、FTP 等。
  2. 常用選項
    • -s 或 --silent：靜默模式，不顯示進度條或下載速度等信息，常用于腳本中避免輸出不必要的信息。
  3. 使用場景
    • 通過 curl 從指定 URL 下載數據并執行。例如，Laravel 在線構建服務通過 curl 下載并執行 shell 腳本，自動化創建 Laravel 項目并配置依賴。
  4. 結合 Bash 使用
    • | 是管道符號，用于將前一個命令的輸出作為后一個命令的輸入。curl 下載的數據（通常是 shell 腳本）傳遞給 bash 執行。
  5. Laravel 在線構建服務示例
    • 命令：curl -s "https://laravel.build/myapp?with=mysql,redis" | bash
    • 功能：靜默下載并執行 Laravel 在線構建服務的 shell 腳本，自動化創建包含 MySQL 和 Redis 服務的 Laravel 項目。

四、CORS 策略解析與實際案例

1. CORS 核心機制：預檢請求與響應頭
  • 通俗解釋：
    當網頁發起跨域請求（如 AJAX 請求其他域名的 API，如 example.com 訪問 api.com），
    瀏覽器會先派“偵察兵”（OPTIONS 預檢請求）問服務器：“我允許訪問嗎？”
    服務器返回響應頭明確規則，瀏覽器才放行實際請求。
    CORS 則是網站主動告訴瀏覽器“允許誰訪問我”，避免安全隱患。
前端瀏覽器后端發起跨域 API 請求發送 OPTIONS 預檢請求返回 CORS 響應頭根據響應頭決定是否放行前端瀏覽器后端
  • 解決方案（二選一）
    • 中間件手動配置：創建 Cors 中間件添加頭部，適用于簡單場景。
    • 專用擴展包：使用 fruitcake/laravel-cors 自動處理預檢請求和動態配置。
  • 關鍵響應頭
    頭字段作用示例Laravel 配置方式
    Access-Control-Allow-Origin* 或 https://your-domain.com中間件設置
    Access-Control-Allow-MethodsGET,POST,PUT,DELETE配置 config/cors.php
    Access-Control-Allow-HeadersAuthorization, Content-Type插件自動處理（如 fruitcake/laravel-cors）
  • 實際案例（PHP 處理預檢請求）：
    // 檢測到 OPTIONS 請求（瀏覽器派出的“偵察兵”）
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {header('Access-Control-Allow-Origin: https://client.com'); // 只允許 client.com 訪問header('Access-Control-Allow-Methods: GET, POST, DELETE'); // 允許的 HTTP 方法header('Access-Control-Allow-Headers: Content-Type, Authorization'); // 允許的請求頭header('Access-Control-Max-Age: 86400'); // 緩存規則24小時，減少重復預檢exit; // 結束腳本，無需處理實際數據
}
  • 作用：此代碼攔截預檢請求，明確告訴瀏覽器后續請求的權限。否則，跨域請求會被瀏覽器直接阻止。
2. 域名白名單：精準控制訪問權限
  • 通俗解釋：
    CORS 支持域名白名單，就像“VIP 名單”：服務器只響應名單內域名的請求，其他一律拒絕，防止惡意網站盜取數據。
  • 實際案例（Nginx 動態白名單配置）：
    # 只允許 x1.domain.com 和 x2.domain.com 訪問
set $cors_origin "";
if ($http_origin ~* "^https://(x1.domain.com|x2.domain.com)$") {set $cors_origin $http_origin;
}
add_header Access-Control-Allow-Origin $cors_origin;
add_header Access-Control-Allow-Methods "GET, POST";
add_header Access-Control-Allow-Headers "Content-Type";
  • 作用：正則匹配請求來源，非白名單域名返回 403 錯誤，保障接口安全。
3. 帶 Cookie 的跨域請求：特殊處理

  • 通俗解釋：
    若跨域請求需攜帶 Cookie（如用戶登錄狀態），服務器必須明確指定域名（不能用 * 通配符），同時前端設置 withCredentials: true。

  • 實際案例（Laravel 中間件配置）：

    // 創建中間件 app/Http/Middleware/CorsMiddleware.php
public function handle($request, Closure $next) {$response = $next($request);$response->header('Access-Control-Allow-Origin', 'http://localhost:3000') // 指定前端域名->header('Access-Control-Allow-Credentials', 'true'); // 允許攜帶 Cookiereturn $response;
}

  • 注冊中間件（在 app/Http/Kernel.php 添加）：

    protected $middleware = [\App\Http\Middleware\CorsMiddleware::class,
];

  • 作用：讓 localhost:3000 的前端安全調用 Laravel API 并傳遞用戶憑證。

五、CORS 問題延申

GET, POST, DELETE我似乎在PHP代碼的表單里見過，印象中每個代表一個方法？這里和表單里有什么不一樣？

GET、POST、DELETE 是 HTTP 協議定義的請求方法，它們在 PHP 表單和 HTTP 請求中的角色既有聯系又有區別。

1. 表單中的方法 vs HTTP 方法

  1. 表單中的 method 屬性
    在 HTML 表單中，method 屬性通常只支持 GET 或 POST，用于指定數據提交方式：

    • GET：數據通過 URL 參數傳遞（如 ?key=value），適合非敏感數據（如搜索）。
    • POST：數據隱藏在請求體中，適合敏感信息（如密碼）或大數據量提交。
      表單默認不支持 DELETE，需通過 JavaScript 或隱藏字段模擬。

  2. HTTP 方法的完整語義
    HTTP 協議定義了更多方法，如 DELETE、PUT 等，用于 RESTful API 設計：

    • DELETE：刪除服務器資源（如刪除用戶數據）。
    • PUT：更新資源（如修改用戶信息）。
      這些方法需通過 AJAX 或 API 調用實現，傳統表單無法直接使用。
2. 核心區別與適用場景
  1. 數據傳遞方式
    • GET：參數暴露在 URL 中，長度受限（約 2KB），可被緩存/收藏。
    • POST：數據在請求體，無長度限制，更安全但不可緩存。
    • DELETE：通常通過 URL 標識資源（如 /users/123），無請求體。
  2. 冪等性與安全性
    • GET 和 DELETE 是冪等的（多次執行結果相同），POST 不是（如重復提交訂單）。
    • POST 和 DELETE 可能修改服務器數據，GET 僅用于查詢。
  3. PHP 中的處理差異
    • GET 數據通過 $_GET 獲取，POST 通過 $_POST，DELETE 需解析原始輸入（如 file_get_contents('php://input')）。
3. 實際案例對比

  1. 表單提交（傳統方式）

    <!-- GET 表單 -->
<form method="get" action="search.php"><input type="text" name="keyword"><button>搜索</button>
</form><!-- POST 表單 -->
<form method="post" action="login.php"><input type="password" name="pwd"><button>登錄</button>
</form>

    GET 適合搜索，POST 適合登錄。

  2. RESTful API 調用（現代應用）

    // 使用 cURL 發送 DELETE 請求
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://api.example.com/users/123");
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "DELETE");
curl_exec($ch);

    需通過編程方式實現非表單方法。

4. 總結
  • 表單：僅支持 GET/POST，用于頁面數據提交。
  • HTTP 方法：包含 DELETE/PUT 等，用于完整資源操作（需結合 API 使用）。
  • 選擇依據：根據操作類型（查詢/修改/刪除）和數據敏感性決定方法。

七、Laravel Mix 與 Vite 編譯對比

  1. Laravel Mix（傳統編譯）
    • 原理：基于 Webpack 的封裝層，提供簡化配置的 API。
    • 編譯流程：資源文件 → Webpack 編譯 → 合并/壓縮/版本哈希 → public 目錄生成編譯文件。
    • 特點：配置簡單但構建速度較慢，適合傳統 Laravel 項目。
  2. Vite 編譯
    • 原理：利用瀏覽器原生 ES 模塊，開發階段免打包。
    • 編譯流程：瀏覽器請求 → Vite 服務器按需編譯 → 實時返回單文件。
    • 優勢：熱更新快（毫秒級），生產構建用 Rollup 優化。

八、Laravel 實操建議

  • Laravel 項目優化：移除混合編譯，統一使用 Vite。
    npm remove laravel-mix
npm install vite laravel-vite-plugin --save-dev
  • Laravel 集成 Vite：使用官方插件并配置腳本，實現自動資源版本化和深度整合 Laravel 路由與視圖系統。

九、Laravel Sail 是否需要安裝？

1. 概述

Laravel Sail 不需要單獨安裝，但它依賴于 Docker 和 Docker Compose。在使用 Laravel Sail 之前，你需要確保你的系統上已經安裝了 Docker 和 Docker Compose。一旦這些依賴項安裝完畢，你就可以通過 Laravel 項目中的預配置腳本或手動添加的方式使用 Laravel Sail了。

2. 詳細說明
  1. 依賴項安裝：
    • Docker：一個開源平臺，用于自動化應用程序的部署為輕量級、可移植的容器。
    • Docker Compose：用于定義和運行多容器 Docker 應用程序的工具。
      在安裝 Laravel Sail 之前，請確保你的系統上已經安裝了這兩個工具。
  2. Laravel Sail 的使用：
    • Laravel Sail 是 Laravel 官方提供的一個用于管理 Docker 容器的輕量級工具。
    • 它通過項目根目錄下的 docker-compose.yml 文件來定義應用程序所需的服務（如 PHP、MySQL、Redis 等）。
    • 使用 Laravel Sail，你可以輕松地啟動、停止和管理這些容器。
  3. Laravel 項目中的 Laravel Sail：
    • 當你通過 Laravel 的在線構建服務或使用 Composer 創建一個新的 Laravel 項目時，如果你選擇了包含 Laravel Sail 的選項，項目中將自動包含所需的 docker-compose.yml 文件和 sail 命令。
    • 在這種情況下，你不需要進行額外的安裝步驟即可使用 Laravel Sail。
  4. 手動添加 Laravel Sail：
    • 如果你的 Laravel 項目中沒有包含 Laravel Sail，你也可以手動添加它。這通常涉及將 laravel/sail 包作為開發依賴項添加到項目的 composer.json 文件中，并創建或更新 docker-compose.yml 文件以定義所需的服務。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/88287.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/88287.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/88287.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Jenkins 流水線配置

Jenkins 流水線配置

Jenkinsfile dsl文件:pipeline {// 指定任務在哪個集群節點執行agent any// 聲明全局變量environment {keyvalueAPPLICATION_NAMEspringboot-demo // 項目名稱HOST_PORT7777 // 宿主機暴露服務端口CONTAINER_PORT8080 // 容器內部服務端口…
閱讀更多...
服務器重裝后如何“復活”舊硬盤上的 Anaconda 環境？—— 一次完整的排錯與恢復記錄

服務器重裝后如何“復活”舊硬盤上的 Anaconda 環境？—— 一次完整的排錯與恢復記錄

目錄 摘要 一、 背景&#xff1a;熟悉的陌生人 二、 問題浮現&#xff1a;一次次失敗的嘗試 問題一&#xff1a;source activate 失效&#xff0c;被寫死的舊路徑 問題二&#xff1a;官方安裝器修復失敗&#xff0c;神秘的“進程池損壞” 問題三&#xff1a;核心腳本也“背…
閱讀更多...
Redis的多并發實際業務場景下的使用分析：布隆過濾器

Redis的多并發實際業務場景下的使用分析：布隆過濾器

文章目錄前言什么是布隆過濾器項目中引入布隆過濾器與緩存結合的最佳實踐場景&#xff1a;高并發用戶訪問商品詳情頁&#xff08;防止緩存穿透&#xff09;總結&#xff1a;前言 okok 我們已經學完了 所有的redis中的常用的數據結構 下面就是進階 我會用一系列的例子 去講解 如…
閱讀更多...
【AI】人工智能領域關鍵術語全解析

【AI】人工智能領域關鍵術語全解析

一、前言 人工智能&#xff08;AI&#xff09;作為當今最熱門的技術領域之一&#xff0c;正在深刻改變著我們的生活和工作方式。然而&#xff0c;對于初學者或非技術背景的人士來說&#xff0c;理解AI領域的專業術語可能是一項挑戰。本文旨在全面解析人工智能領域的關鍵術語&a…
閱讀更多...
【Linux基礎知識系列】第四十三篇 - 基礎正則表達式與 grep/sed

【Linux基礎知識系列】第四十三篇 - 基礎正則表達式與 grep/sed

在Linux系統中&#xff0c;正則表達式是一種強大的文本處理工具&#xff0c;廣泛用于文本搜索、替換和批量處理。通過掌握基礎正則表達式的語法&#xff0c;結合grep和sed命令&#xff0c;用戶可以高效地完成復雜的文本處理任務。無論是數據分析師、軟件開發者還是系統管理員&a…
閱讀更多...
SIMATIC S7-1200的以太網通信能力：協議與資源詳細解析

SIMATIC S7-1200的以太網通信能力：協議與資源詳細解析

SIMATIC S7-1200的以太網通信能力&#xff1a;協議與資源解析 在工業自動化領域&#xff0c;PLC的通信能力往往直接影響著整個控制系統的靈活性與高效性。西門子SIMATIC S7-1200系列PLC作為一款廣泛應用的中小型控制器&#xff0c;其強大的以太網通信功能是其核心優勢之一。本文…
閱讀更多...
什么是高防 IP？從技術原理到實戰部署的深度解析

什么是高防 IP？從技術原理到實戰部署的深度解析

目錄 前言 一、高防 IP 的定義與核心價值 二、高防 IP 的技術原理與架構 2.1 流量牽引技術 2.2 流量清洗引擎 2.3 回源機制 三、高防 IP 的核心防護技術詳解 3.1 DDoS 攻擊防御技術 3.2 高防 IP 的彈性帶寬設計 四、實戰&#xff1a;基于 Linux 的高防 IP 環境配置 …
閱讀更多...
NW710NW713美光固態閃存NW719NW720

NW710NW713美光固態閃存NW719NW720

美光NW系列固態閃存深度解析&#xff1a;技術、性能與市場洞察一、技術架構與核心創新美光NW系列固態閃存&#xff08;包括NW710、NW713、NW719、NW720&#xff09;的技術根基源于其先進的G9 NAND架構。該架構通過5納米制程工藝和多層3D堆疊技術&#xff0c;在單位面積內實現了…
閱讀更多...
JVM匯總

JVM匯總

1.什么是JVM&#xff1f;Java虛擬機&#xff0c;Java具有自動內存管理等一系列特性&#xff0c;為實現Java跨平臺&#xff0c;一次編譯處處執行。2.JVM結構圖3.類加載器-入口加載class文件&#xff0c;將類信息存放到運行時數據區的方法區內存空間中通過魔數和文件格式來判斷是…
閱讀更多...
2024.09.20 leetcode刷題記錄

2024.09.20 leetcode刷題記錄

# 前言 昨天發布了第一遍博客&#xff0c;感覺很好&#xff0c;趁著我現在還是很感興趣就多發幾遍&#xff0c;希望能堅持下去&#xff0c;在這里記錄下自己學習成長的經歷。 今天是周五&#xff0c;下周一就又要去實習啦&#xff0c;距離上一段實習剛結束一個月&#xff0c;之…
閱讀更多...
SQLite3 中列(變量)的特殊屬性

SQLite3 中列(變量)的特殊屬性

在 SQLite3 中&#xff0c;列的特殊屬性通常通過約束&#xff08;Constraints&#xff09;和數據類型修飾符來定義。這些屬性可以在創建表時指定&#xff0c;用于限制數據的完整性或定義特殊行為。以下是 SQLite3 支持的主要特殊屬性及其說明&#xff1a; 1. 主鍵約束&#xff…
閱讀更多...
Datawhale AI 夏令營：用戶洞察挑戰賽 Notebook（2）

Datawhale AI 夏令營：用戶洞察挑戰賽 Notebook（2）

針對文本聚類優化 優化TF-IDF特征工程# 調整ngram_range&#xff1a;設置為(1, 2)&#xff0c;捕捉單字和雙字詞&#xff08;如“不錯”“不滿意”&#xff09;。 # 限制特征數量&#xff1a;通過max_features5000保留高信息密度特征&#xff0c;降低維度。 # 過濾低頻/高頻詞&…
閱讀更多...
【博主親測可用】PS2025最新版：Adobe Photoshop 2025 v26.8.1 激活版（附安裝教程）

【博主親測可用】PS2025最新版：Adobe Photoshop 2025 v26.8.1 激活版（附安裝教程）

軟件簡介 Adobe Photoshop 2025是Adobe公司開發的一款圖像處理軟件。作為行業標準的數字圖像編輯工具&#xff0c;其核心定位是創意設計、后期攝影、3D建模和AI驅動創作&#xff0c;適用于專業設計師、攝影師、插畫家和多媒體創作者。界面設計簡單直觀&#xff0c;易于操作&…
閱讀更多...
unity A星尋路

unity A星尋路

算法 fCost gCost hCost gCost 是當前節點到移動起始點的消耗&#xff0c;hCost是當前節點到終點的消耗 網格為變成為1的矩形&#xff0c;左右相鄰的兩個網格直接的gCost為1&#xff0c;斜對角相鄰的兩個網格的gCost為1.4 hCost 當前網格到終點網格的 水平距離 垂直距離 比如…
閱讀更多...
十一 Javascript的按值傳遞

十一 Javascript的按值傳遞

你將知道&#xff1a;“傳遞” 值是什么意思什么是按值傳遞傳遞物品JavaScript 中沒有傳遞引用&#xff01;介紹當需要在 JavaScript 中分配或簡單地將一個值傳遞給其他標識符時&#xff0c;我們就會看到通常所說的 按值傳遞 。嚴格來說&#xff0c;JavaScript 中傳遞值的方式只…
閱讀更多...
SpringBoot ThreadLocal 全局動態變量設置

SpringBoot ThreadLocal 全局動態變量設置

需求說明&#xff1a; 現有一個游戲后臺管理系統&#xff0c;該系統可管理多個大區的數據&#xff0c;但是需要使用大區id實現數據隔離&#xff0c;并且提供了大區選擇功能&#xff0c;先擇大區后展示對應的數據。需要實現一下幾點&#xff1a; 1.前端請求時&#xff0c;area_i…
閱讀更多...
如何解決pip安裝報錯ModuleNotFoundError: No module named ‘logging’問題

如何解決pip安裝報錯ModuleNotFoundError: No module named ‘logging’問題

【Python系列Bug修復PyCharm控制臺pip install報錯】如何解決pip安裝報錯ModuleNotFoundError: No module named ‘logging’問題 摘要&#xff1a; 在使用 PyCharm 2025 控制臺通過 pip install 安裝第三方庫時&#xff0c;常會遇到諸如 ModuleNotFoundError: No module name…
閱讀更多...
打破技術債困境：從“保持現狀”到成為變革的推動者

打破技術債困境：從“保持現狀”到成為變革的推動者

相信許多在科技行業的同行都面臨過類似的挑戰&#xff1a;明知系統存在“技術債”&#xff0c;卻因為溝通成本、團隊壓力和短期KPI等原因&#xff0c;難以推動改進&#xff0c;最終陷入“想做卻不敢做”的矛盾心態。這不僅影響個人心情&#xff0c;更重要的是&#xff0c;它像一…
閱讀更多...
Spring Boot 整合 RabbitMQ

Spring Boot 整合 RabbitMQ

Spring Boot 整合 RabbitMQ 一、概述&#xff1a;RabbitMQ 是什么&#xff1f; 你可以把 RabbitMQ 想象成一個「快遞中轉站」。 比如你在網上買了一本書&#xff0c;賣家&#xff08;生產者&#xff09;把包裹&#xff08;消息&#xff09;交給快遞站&#xff08;RabbitMQ&…
閱讀更多...
Unity Demo-3DFarm詳解-其一

Unity Demo-3DFarm詳解-其一

我們來拆解一個種田游戲&#xff0c;這個游戲種類內部的功能還是比較模板化的&#xff0c;我們來一點點說。我們大體上分為這么幾個部分&#xff1a;農場運營玩法角色與玩家互動物品與背包存檔和進度管理用戶界面系統農場運營可以大體上分為&#xff1a;種植系統&#xff1a;支…
閱讀更多...
最新文章

Copyright @ 2022~2023