使用小皮【phpstudy】运行Vue+MySql项目

最新推荐文章于 2025-06-19 11:12:57 发布
最新推荐文章于 2025-06-19 11:12:57 发布
阅读量1.6k 收藏 13
点赞数 3
CC 4.0 BY-SA版权
文章标签： vue.js mysql 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_58017233/article/details/137056014

现在的情况是我扒到了一个开源的项目，现在想要实现一下前端对应的功能，后端是完备的，但是需要调用数据库将数据跑起来，这里可以使用到MySql数据库，这里我还发现了一个比较好用的软件小皮【phpStudy】
官网

一 安装软件

到对应的官网进行安装

二 安装之后的操作

①进入页面之后打开MySQL 数据库
这里需要注意如果电脑安装了MySQL数据库可以直接使用MySql，并且电脑之前安装的MySql会和小皮冲突导致不能运行
在这里插入图片描述
②这里是服务器默认的数据库名称和密码可以进行修改，但是修改密码之后需要
到vue_api_server 里面的config文件里面修改登录密码为你x修改之后的密码
在这里插入图片描述
③ 点击管理之后进入在线的phpMyAdmin 网站，输入账号名和密码
在这里插入图片描述
④ 在小皮的文件夹目录下的WWW文件夹，要把需要运行的源码放到这个目录下
在这里插入图片描述
⑤ 将Sql文件导入到数据库当中

最低0.47元/天 解锁文章

200万优质内容无限畅学
婷宝_知萌
关注
phpstudy 8.1小皮配置vue项目本地域名访问
qq_42221321的博客
11-18 5365
phpstudy 8.1小皮配置vue项目本地域名访问1、安装phpstudy2、phpstudy配置3、问题排查 1、安装phpstudy 1、先下载安装小皮，这里就不做赘述 官网下载地址 2、phpstudy配置 因为我这里只是一个网页的显示，就只启动了apache服务 注意这里的路径，如果是vue项目，要先打包,然后指向dist生成的文件路径，我这里是把dist打包好的文件复制到小皮下 文件目录，注意一定是index.php或者是 index.html 配置完成后，来到设置里检验配置的端口是否可
小皮软件PHPStudy搭建Laravel 10.X框架
qq_54050785的博客
03-08 4549
小皮软件PHPStudy搭建Laravel 10.X 框架详细步骤
将vue3打包后用phpstudy部署到本电脑上
最新发布
Mr_jioker的博客
06-19 160
如果只想在自己的电脑上看本地项目，可以将vue3打包后用phpstudy部署到本电脑上。3.配置网站，选择网站，点击管理，选择修改。4.选择文件夹，找到打包的dist文件。2.安装完成后打开phpstudy。1下载phpstudy。可以打开本地网址访问啦。
vue部署phpStudy
lv657780329的博客
07-21 533
server {.+)$;
【小皮(PHPstudy】
weixin_46252229的博客
04-23 541
一款非常好用的数据库工具，胜过于Navicat，小皮可以轻松完成Mysql的安装和配置，满足一机兼容、一键切换MySQL版本的功能。可视化界面清晰简洁。
小皮面板 phpstudy(nginx模式)搭建vue 项目 使用 history模式配置详解
qq_21115567的博客
09-02 6131
小皮面板配置vue history
通过小皮面板启动后端php项目和数据库
weixin_40412060的博客
10-26 9723
我在传输过程中一直报错0000-00-00日期格式不对，在 mysql的安装路径里的my.ini中添加一句话就好了。相关设置-->站点管理-->Apache2.4站点管理。导入好数据后,在后端代码中修改本地连接的数据库信息即可。此时后端服务就搭建好了 前端连接这个网站即可访问。可用Navicat连接数据库 实现数据库的可视化。注意网站目录写到php文件的public目录下。可去官网下载 下载后就能使用了。可启动Apache和mysql。创建一个php项目的网站。管理 ----》打开网站。
基于php+vue+mysql的中小型酒店管理系统
q_2781179521的博客
09-09 376
基于php+vue+mysql的中小型酒店管理系统
【完整源码+数据库+运行指导】基于SpringBoot+Vue+mysql在线家政服务平台前后端分离
11-05
项目都经过严格调试，确保可以运行！ 二、技术实现 开发语言：Java 使用框架：spring boot 前端技术：JavaScript、Vue 、css3 开发工具：IDEA/MyEclipse/Eclipse、Visual Studio Code 数据库：MySQL 5.7/8.0 数据库...
node+vue+phpstudy= C+V+M=全栈？
qq_28473235的博客
10-25 880
学好数理化，走遍天下都不怕。那学不好的，怎么办 一：概念 1.1 node简介 Node.js 是一个基于 Chrome V8 引擎的JavaScript运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。[1] Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScr...
PHP+phpStudy+MySQL NBA湖人网站系统
12-21
phpStudy是一个集成的PHP运行环境，它包括了Apache服务器、PHP、MySQL等组件，为开发者提供了便捷的本地开发环境。通过phpStudy，开发者可以在自己的计算机上快速搭建并测试网站应用，而无需复杂的配置过程。 MySQL...
php小皮风格 php小皮风格
08-09
php小皮风格 php小皮风格 php小皮风格 php小皮风格
小皮面板(phpstudy) - 基本使用
qq_32381773的博客
05-27 2172
小皮面板（phpstudy）是一款功能强大且易用的服务器管理面板，由老牌免费公益软件 phpStudy 团队开发，自 2007 年诞生以来，始终秉持永久免费的公益理念，在全球范围内积累了良好口碑，成为众多站长和开发者的首选工具。​
PhpStudy小皮面板服务搭建
QuJJan的博客
03-12 2584
系统：Rocky Linux 8.6搭建目的：实现web服务的简单切换与应用安装条件：虚拟机（VMware 17 Pro）能联网，能ping通phpstudy是一个php运行环境的集成包，用户不需要去配置运行环境，就可以使用，phpstudy不仅是一款比较好用的php调试环境工具，并且还包括了开发工具和常用手册，是国内12年老牌公益软件，集安全，高效，功能与一体，已获得全球用户认可安装，运维也高效。支持一键LAMP,LNMP,集群,监控,网站,FTP,数据库,JAVA等100多项服务器管理功能。
php小白使用php集成环境（小皮），并使用vscode调试代码
qq_68262470的博客
03-08 1万+
来到公司接手了一个thinkPHP7.3后台，vue3前端的一个项目，然后开始了解php环境语法等。也看了很多的介绍，其实嗷比较的杂，对于一个前端的哥们来说习惯了使用vscode所以就还是比较难以接受，所以我讲一下我在使用小皮面板（phpstudy_pro）来调试代码的过程和其中踩的坑。
phpstudy小皮（PHP集成环境）下载及使用
m0_62481980的博客
12-10 2810
打开小皮（phpstudy）,点击左侧管理-》创建网站，自己起一个域名，根目录必须是public,确认后重启小皮（关闭所有服务）再进入打开服务，点击管理-》打开网站，就进入到安装页面，安装完之后就可以进入到管理后台或前台页。这里咱们启动这两个，有时候mysql启动不了，是因为你的电脑已经有mysql在运行了，可以打开任务管理器服务里面将其关掉，然后这个MySQL5.7.26就可以启动了。直接官网下载即可，下载完解压是个.exe程序，直接点击安装就可以，它会自动在D盘目录为D:\phpstudy_pro。
【数据库】基于小皮(PHPstudy）面板集成环境 MySQL数据库环境配置
qq_52611686的博客
10-24 1万+
一款非常好用的数据库工具，phpstudy（小皮）可以不从官网上面下载和配置Mysql，当然感兴趣的也可以试试去官网下载MySQL的原始方法（本来想写那个的，但发现已经有太多完备的blog来进行说明了），而且我更喜欢小皮胜过于Navicat。输入【用户名】：root 【密码】：root（默认密码），进行登录，就可以成功访问数据库了，并且可以图形化查询数据库、数据表等，进行增删改查。安装完成之后，在【首页】开启MySQL服务，之后点击【数据库工具】打开，选择【phpMyAdmin】，进入管理页面。
应用工具推荐phpStudy（小皮面板）
热门推荐
Muscleheng的博客
03-22 2万+
推荐应用：官网地址 xp.cn 小皮面板(PhpStudy)真是一个好东西，集成了各种常用应用，一般当我们拿到一台全新的电脑，为了满足日常本地使用，都会安装一堆应用，例如：MySQL，Redis，Nginx、ftp客户端等等。 这个时候，安装一个小皮面板(PhpStudy)应用就相当于安装了一批我们常用的应用，例如： MySQL、Redis、Nginx、Apache、ftp客户端、PHP、HeidiSQL数据库客户端等等,而且可以随意选择版本进行安装 大致界面如下： 1.主界面 PhpS..
phpstudy小皮面板下载安装及启动MySQL的报错解决
m0_75167824的博客
02-28 1523
phpstudy小皮面板下载安装及启动MySQL的报错解决
phpstudy配合vue3使用
12-31
### PHPStudy环境下Vue3开发配置与集成教程 #### 一、PHPStudy环境准备 在开始之前，确保已经安装并启动了PHPStudy。此工具允许轻松管理和部署Web应用程序所需的服务器组件，如Apache、Nginx、MySQL等[^2]。 对于前端框架的开发工作来说，重点在于设置好Node.js以及npm/yarn这些包管理器来处理JavaScript依赖项。虽然PHPStudy本身并不直接涉及这部分内容，但是可以在同一台机器上独立安装它们而不影响现有的LAMP/WAMP堆栈结构。 #### 二、创建Vue3项目 为了在一个新的或现有目录中初始化一个新的Vue应用，可以通过命令行运行如下指令： ```bash # 安装vue-cli (如果尚未全局安装的话) npm install -g @vue/cli # 创建新项目 vue create my-vue-app ``` 这将会引导用户完成一系列选项的选择过程，比如选择预设功能或是手动挑选特性——这里建议至少启用`Router`以便于后续页面间的导航操作；另外也可以考虑加入Vuex用于状态管理模式下的复杂业务逻辑处理[^4]。 #### 三、调整Nginx配置以适应单页应用(SPA) 当构建的是一个SPA(single page application)，则需要特别注意web server如何响应来自客户端发出的不同路径请求。通常情况下，默认配置可能会返回404错误而不是让前端路由接管未知URL的情况。因此，在PHPStudy内置的Nginx站点配置文件里添加下面这段规则即可解决这个问题: ```nginx server { listen 80; server_name localhost; location / { root html/my-vue-app/dist; # 这里的dist指的是打包后的静态资源所在位置 index index.html index.htm; try_files $uri $uri/ /index.html?/$request_uri; # 关键修改点 } } ``` 上述更改使得任何未匹配到实际存在的文件夹或文件时都会重定向至根级别的HTML入口文档，并附带原始查询字符串参数传递给前端JS解析[^5]。 #### 四、API接口对接 考虑到前后端分离架构的应用场景，后端服务往往由PHP编写并通过RESTful API的形式对外提供数据交互能力。此时可利用Axios库发起HTTP请求并与远端服务器通信获取所需信息。记得要根据实际情况调整baseURL指向正确的主机名和端口号。 ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: '/api', // 假定API位于同域下相对路径/api/ }); export default instance; ``` 最后一步就是按照常规流程编译打包Vue工程并将生成的结果放置于适当的位置供访问测试啦！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值