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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈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