如何使用 Vuejs 前端框架使用 MySQL/PHP 从服务器获取数据

Posted 2023-02-22

【中文标题】如何使用 Vuejs 前端框架使用 MySQL/PHP 从服务器获取数据

【英文标题】：How do I fetch data from server using MySQL/PHP using Vuejs frontend framework

【发布时间】：2020-05-01 20:45:48

【问题描述】：

我对网络编程很陌生。目前，我希望将后端数据从 php/mysql 导入到 vuejs 应用程序中。其中一个我不明白的是 Axios 是如何工作的，以及如何通过 PHP（MySQL 后端数据库）导入数据。后端数据库是通过 XML 创建的。

首先，我通过这个链接https://www.npmjs.com/package/vue-axios安装了vue-Axios。接下来，我继续阅读文档，并且有各种类型的代码（我不确定在哪里申请）。我正在寻找的是如何导入带有图片的特定组件/项目（包含数据）。提前感谢您的帮助。

【问题讨论】：

你的意思是使用vuejs访问数据库吗？

@KarmaBlackshaw 是的。使用vuejs访问数据库获取具体的item。

您可以做的是从前端向后端发出请求 (PHP)。您可以通过使用 axios 来做到这一点。 axios.[method]([route-to-your-api], params);。请点击here了解更多关于axios的信息。如果答案仍然模糊，请询问更多。

此外，请发布您尝试过的任何内容。

一旦 XML 数据被导入您的 MySQL - 它不再是 XML，因此您必须使用 SQL 来查询或操作数据。使用 Axios，您只需向 PHP 脚本发出 HTTP 请求（GET 或 POST） - 这些脚本只需 echo json_encode($result) 发送任何您想发送到 Vue 应用程序的内容。

【参考方案1】：

我将在此处发布我的答案作为对 OP 评论的回应并提供更好的格式。

import axios from 'axios'

export default 
  name: 'home',

  async mounted () 
    let response = await axios('http://128.106.100.230/bistro/get_step1_1.php')
    // do something with the response here...
  ,

response 是一个对象。您可以使用

获得结果

response.data

或者使用es6的对象解构：

let  data  = await axios('http://128.106.100.230/bistro/get_step1_1.php')