laravel学习并连接mysql数据库，给本地vue项目提供接口

  1. 下载laravel
    laravel下载地址
  2. phpstudy_pro\WWW\laravel.env文件
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=clgl  //你的数据库名称
DB_USERNAME=root  //你的账号
DB_PASSWORD=root  //你的密码
  1. 安装 Laravel CORS 包
composer require fruitcake/laravel-cors
  1. 配置 config/cors.php（如果没有，先发布配置）：
php artisan vendor:publish --tag=cors
  1. 修改phpstudy_pro\WWW\laravel\config\cors.php文件，允许前端访问
<?phpreturn ['paths' => ['api/*', 'sanctum/csrf-cookie'],'allowed_methods' => ['*'],'allowed_origins' => ['http://localhost:5173', 'http://127.0.0.1:5173'], // Vue 的地址'allowed_origins_patterns' => [],'allowed_headers' => ['*'],'exposed_headers' => [],'max_age' => 0,'supports_credentials' => true, // 如果需要携带 cookie
];
  1. 修改phpstudy_pro\WWW\laravel\app\Http\Kernel.php文件
protected $middlewareGroups = ['web' => [\App\Http\Middleware\EncryptCookies::class,\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,\Illuminate\Session\Middleware\StartSession::class,\Illuminate\View\Middleware\ShareErrorsFromSession::class,\App\Http\Middleware\VerifyCsrfToken::class,\Illuminate\Routing\Middleware\SubstituteBindings::class,],'api' => [// \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,'throttle:api',\Illuminate\Routing\Middleware\SubstituteBindings::class,\Fruitcake\Cors\HandleCors::class, //确保中间件已启用 确保这一行存在],];
  1. 在数据表中增加一个表
    在这里插入图片描述
  2. 写两个方法getQuestion和updateUsername，一个属于get请求一个属于post请求
<?php
namespace App\Http\Controllers;use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;class QuestionController extends Controller
{public function getQuestion(Request $request){// 1. 只允许 POST 请求if ($request->method() !== 'GET') {return response()->json(['status' => '405','status_message' => 'Method Not Allowed','content' => []], 405);}// 2. 获取 POST 参数$username = $request->input('username');// 3. 验证参数是否为空if (empty($username)) {return response()->json(['status' => '400','status_message' => 'Username is required','content' => []], 400);}// 4. 建立数据库连接// DB::select("SELECT * FROM question WHERE username = '$username'");$conn = mysqli_connect("127.0.0.1", "root", "root", "clgl");if (!$conn) {return response()->json(['status' => '500','status_message' => 'Database connection failed','content' => []], 500);}// 5. 设置字符集mysqli_query($conn, "SET NAMES utf8");// 6. 转义输入（防止 SQL 注入）$username = mysqli_real_escape_string($conn, $username);$sql = "SELECT * FROM question WHERE username = '$username'";$result = mysqli_query($conn, $sql);if (!$result) {mysqli_close($conn);return response()->json(['status' => '500','status_message' => 'SQL Error: ' . mysqli_error($conn),'content' => []], 500);}$data = mysqli_fetch_assoc($result);// 7. 返回 JSON 响应（使用 return 而不是 echo）if (empty($data)) {return response()->json(['status' => '404','status_message' => 'NO DATA FOUND','content' => []], 404);} else {return response()->json(['status' => '200','status_message' => 'success','content' => $data], 200);}// 8. 关闭连接（实际在 return 后不会执行，但逻辑上应确保关闭）mysqli_close($conn);}/*** 修改 username 的 POST 方法*/public function updateUsername(Request $request){// 1. 只允许 POST 请求if ($request->method() !== 'POST') {return response()->json(['status' => '405','status_message' => 'Method Not Allowed','content' => []], 405);}// 2. 获取 POST 参数：old_username 和 new_username$oldUsername = $request->input('old_username');$newUsername = $request->input('new_username');// 3. 验证参数是否为空if (empty($oldUsername) || empty($newUsername)) {return response()->json(['status' => '400','status_message' => 'old_username 和 new_username 是必填参数','content' => []], 400);}// 4. 使用 Laravel DB 门面更新数据（推荐方式）try {$affected = DB::table('question')->where('username', $oldUsername)->update(['username' => $newUsername]);if ($affected === 0) {return response()->json(['status' => '404','status_message' => '未找到匹配的记录，更新失败','content' => []], 404);}return response()->json(['status' => '200','status_message' => '用户名更新成功','content' => ['old_username' => $oldUsername,'new_username' => $newUsername]], 200);} catch (\Exception $e) {return response()->json(['status' => '500','status_message' => '数据库错误: ' . $e->getMessage(),'content' => []], 500);}}
}

  1. 下载phpstudy，要配置环境变量window+R,
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  2. 添加你自己php的版本路径，再加入你的composer软件所在位置，如果要验证composer是否安装好，输入composer --version，提示版本号就是安装成功，一般安装composer软件就行
    在这里插入图片描述

  3. 启动Apache和Mysql
    在这里插入图片描述

  4. 设置访问位置
    在这里插入图片描述

  5. 启动启动 Laravel 服务

php artisan serve
  1. 输入http://localhost即可访问到laravel界面，即为配置成功；随后在地址中输入http://localhost/getQuestion?username=小红 ；可以访问到本地数据库中的数据
    在这里插入图片描述

在这里插入图片描述
15. 在phpstudy_pro\WWW\laravel\routes\api.php添加这两个方法

<?php
use App\Http\Controllers\QuestionController;Route::post('/update-username', [QuestionController::class, 'updateUsername']);
Route::get('/get-question', [QuestionController::class, 'getQuestion']);
  1. 启动本地的vue项目尝试连接一下，测试是否存在跨域，以及post接口是否可以访问
    （未完待续）
    下面是本地vue代码，先要进行vue.config.js代理,再在页面中测试是否可以触发事件
 proxy: {"/api": {target: "http://127.0.0.1:8000", // Laravel 地址changeOrigin: true,secure: false,},},

<template><div class="box t-center"><img src="@/assets/img/snail.png" alt="" /><h1 class="home pt_20 t-center font-size-20 c-3477F2">{{ message }}</h1><el-button class="w_10" type="primary" @click="updateUsernameEvent">修改表</el-button></div>
</template><script>
import axios from "axios";
export default {name: "Home",data() {return {message: "Welcome to vue2-element-admin by running snail!",};},methods: {updateUsernameEvent() {this.updateUsername();},async updateUsername() {try {const response = await axios.post("/api/update-username", {old_username: "张三",new_username: "李四",});console.log(response.data);// 处理成功} catch (error) {console.error("请求失败:", error.response?.data || error.message);}},},
};
</script><style lang="scss" scoped>
.box {padding-top: 100px;> img {width: 100px;height: auto;margin-bottom: 20px;border-radius: 50%;}
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/97187.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/97187.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Mybatis 与 Springboot 集成过程详解

Mybatis 与 Springboot 集成过程详解

Mybatis 与 Springboot 集成过程详解一. 核心概念与优势二.Mybatis 核心类简介1.MybatisAutoConfiguration2.MapperScans3.MapperScannerRegistrar4.MapperFactoryBean5.Configuration6.MapperRegistry7.MapperProxy 与 MapperProxyFactory7.1核心定位与职责7.22. ​​MapperPr…
阅读更多...
prometheus alertmanager 对接飞书

prometheus alertmanager 对接飞书

alertmanager 直接配置 飞书 的 webhook &#xff0c;发现并不满足飞书接口的 json 格式。报错如下levelerror ts2025-08-28T04:57:02.734Z callerdispatch.go:310 componentdispatcher msg"Notify for alerts failed" num_alerts23 err"prometheusalert-webhoo…
阅读更多...
『专利好药用力心脑血管健康』——爱上古中医(28)（健康生活是coder抒写优质代码的前提条件——《黄帝内经》伴读学习纪要）

『专利好药用力心脑血管健康』——爱上古中医(28)（健康生活是coder抒写优质代码的前提条件——《黄帝内经》伴读学习纪要）

心脏血管三通康&#xff0c;古时丸药精益装。 笔记模板由python脚本于2025-08-26 18:25:03创建&#xff0c;本篇笔记适合喜欢日常保健养生知识的coder翻阅。 学习的细节是欢悦的历程 博客的核心价值&#xff1a;在于输出思考与经验&#xff0c;而不仅仅是知识的简单复述。 Pyth…
阅读更多...
在 .NET 8.0 中实现 JWT 刷新令牌

在 .NET 8.0 中实现 JWT 刷新令牌

介绍在 Web 开发领域&#xff0c;安全是重中之重。JSON Web Tokens (JWT) 已成为在各方之间安全传输信息的热门选择。然而&#xff0c;在 JWT 过期后&#xff0c;如何维护用户会话并避免频繁登录至关重要。这正是 JWT 刷新令牌应运而生的地方。在本文中&#xff0c;我们将指导您…
阅读更多...
深入解析 git push 命令

深入解析 git push 命令

1. 基础语法 git push 的基本语法如下： git push <远程仓库名> <本地分支名>:<远程分支名> [选项]<远程仓库名>: 通常是 origin（默认的远程仓库名称）。 <本地分支名>:<远程分支名>: 指定要推送的本地分支以及目标远程分支。如果省略远…
阅读更多...
UI弹出动画

UI弹出动画

简介的UI弹出动画 使用方式很简单 挂载到需要弹出的目标 即可 using UnityEngine; using DG.Tweening; using Unity.VisualScripting;/// <summary>/// 简洁的UI动画脚本/// 直接挂载到UI组件上&#xff0c;调用Play()播放缩放弹出动画/// </summary>public class …
阅读更多...
PostgreSQL诊断系列（6/6）：配置项全景解析——打造你的专属优化清单

PostgreSQL诊断系列（6/6）：配置项全景解析——打造你的专属优化清单

&#x1f517; 作为《PostgreSQL诊断系列》的收官之作&#xff0c;今天我们系统梳理 postgresql.conf 中的核心参数&#xff0c;将前5篇的“诊断”转化为“调优”&#xff0c;打造一套生产环境专属的配置模板。 你是否&#xff1a; 不知道哪些参数该调&#xff1f;害怕调错导致…
阅读更多...
Flink Slot 不足导致任务Pending修复方案

Flink Slot 不足导致任务Pending修复方案

当前有3个虚拟机节点&#xff0c;每个节点配置的slot节点数量是4&#xff0c;${FLINK_HOME}/conf/flink-conf.yaml 关于slot的配置如下&#xff1a; # The number of task slots that each TaskManager offers. Each slot runs one parallel pipeline. taskmanager.numberOfTas…
阅读更多...
亚马逊合规风控升级：详情页排查与多账号运营安全构建

亚马逊合规风控升级：详情页排查与多账号运营安全构建

2025年亚马逊掀起的大规模扫号行动&#xff0c;聚焦商品详情页合规性审查&#xff0c;标志着跨境电商合规监管进入严风控时代&#xff0c;此次行动以关键词规范与定价诚信为核心&#xff0c;大量卖家因内容违规遭遇账号停用&#xff0c;对于卖家而言&#xff0c;构建系统化的合…
阅读更多...
FISCO-BCOS-Python 模板

FISCO-BCOS-Python 模板

基于Python-SDK的FISCO BCOS区块链HelloWorld模板&#xff0c;提供了简单的问候语设置和查询功能。本项目采用现代Python开发实践&#xff0c;包含完整的配置管理、测试框架和项目结构。 快速开始 仓库地址&#xff1a;git clone https://gitee.com/atanycosts/python-fisco-te…
阅读更多...
移动端（微信等）使用 vConsole调试console

移动端（微信等）使用 vConsole调试console

本文介绍了一种在移动端真机上进行调试的方法——使用VConsole。通过简单的安装步骤和代码配置&#xff0c;开发者可以在移动端直接查看console.log输出&#xff0c;极大提升了调试效率。 摘要生成于 C知道 &#xff0c;由 DeepSeek-R1 满血版支持&#xff0c; 前往体验 >作…
阅读更多...
云计算资源分配问题

云计算资源分配问题

这里写目录标题一、云计算资源的基本类型二、资源分配的目标三、资源分配的方式四、资源分配的技术与工具五、挑战与优化方向六、实际应用场景举例总结云计算资源分配是指在云计算环境中&#xff0c;根据用户需求、应用程序性能要求以及系统整体效率&#xff0c;将计算、存储、…
阅读更多...
深度学习之第二课PyTorch与CUDA的安装

深度学习之第二课PyTorch与CUDA的安装

目录 简介 一、PyTorch 与 CUDA 的核心作用 1.PyTorch 2.CUDA 二、CUDA的安装 1.查看 2.下载安装 3.检查是否安装成功 三、PyTorch的安装 1.GPU版本安装 2.CPU版本安装 简介 在深度学习的实践旅程中&#xff0c;搭建稳定且高效的开发环境是一切实验与项目的基础&…
阅读更多...
Ubuntu22.04 安装和使用标注工具labelImg

Ubuntu22.04 安装和使用标注工具labelImg

文章目录一、LabelImg 的安装及配置1. 安装2. 配置二、使用1. 基础操作介绍2. 创建自定义标签2.1 修改 predefined_classes.txt2.2 直接软件界面新增3. 图像标注3.1 重命名排序3.2 标注3.2 voc2yolo 格式转换3.3 视频转图片Yolo系列 —— Ubuntu 安装和使用标注工具 labelImgYo…
阅读更多...
Jenkins与Docker搭建CI/CD流水线实战指南 (自动化测试与部署)

Jenkins与Docker搭建CI/CD流水线实战指南 (自动化测试与部署)

更多云服务器知识&#xff0c;尽在hostol.com你是否已经厌倦了那个“人肉”部署的重复循环&#xff1f;每一次 git push 之后&#xff0c;都像是一个庄严的仪式&#xff0c;你必须虔诚地打开SSH&#xff0c;小心翼翼地敲下一连串的 git pull, npm install, docker build, docke…
阅读更多...
【数据可视化-100】使用 Pyecharts 绘制人口迁徙图：步骤与数据组织形式

【数据可视化-100】使用 Pyecharts 绘制人口迁徙图：步骤与数据组织形式

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…
阅读更多...
5G相对于4G网络的优化对比

5G相对于4G网络的优化对比

5G网络作为新一代移动通信技术&#xff0c;相比4G实现了全方位的性能提升和架构优化。5G通过高速率、低时延和大连接三大核心特性&#xff0c;有效解决了4G网络面临的数据流量爆炸式增长和物联网应用瓶颈问题 &#xff0c;同时引入了动态频谱共享、网络切片等创新技术&#xff…
阅读更多...
AR智能巡检：智慧工地的高效安全新引擎

AR智能巡检：智慧工地的高效安全新引擎

在建筑行业，工地安全管理与施工效率的提升一直是核心议题。随着增强现实（AR）技术的快速发展，AR智能巡检系统正逐步成为智慧工地的“标配”，通过虚实结合、实时交互和智能分析，推动建筑行业迈入数字化、智能化的新阶段。本文将从技术原理、应用场景、核心优势及未来趋势等…
阅读更多...
TypeScript：枚举类型

TypeScript：枚举类型

1. 什么是枚举类型&#xff1f;枚举&#xff08;Enum&#xff09;是TypeScript中一种特殊的数据类型&#xff0c;用于定义一组命名的常量值。它允许开发者用一个友好的名称来代表数值或字符串&#xff0c;避免使用“魔法数字”或硬编码值。基本语法&#xff1a;enum Direction …
阅读更多...
Maven 编译打包一个比较有趣的问题

Maven 编译打包一个比较有趣的问题

前言最近做项目&#xff0c;发现一个比较有意思的问题&#xff0c;其实发现了问题的根源还是很好理解&#xff0c;但是如果突然看到会非常的难以理解。在Java项目中&#xff0c;明明包名错误了&#xff0c;居然可以正常编译打包&#xff0c;IDEA报错了&#xff0c;但是mvn命令正…
阅读更多...
最新文章

Copyright @ 2022~2023