2

I am quite new to web programming. Currently, I am looking to import backend data from PHP/MySQL into the vuejs application. One of them that I don't understand is how the Axios really works and how can I import data through the PHP(MySQL backend database). The backend database is created through XML.

First and foremost, I installed the vue-Axios through this link https://www.npmjs.com/package/vue-axios. Next, I continued to read on the documentation and there are various types of codes( which I am unsure of where to apply). What I am looking for is how can I import a specific component/item (which contains data) with pictures. I appreciate the help in advance.

Karma Blackshaw
  • 880
  • 8
  • 20
Nehemiah Chan
  • 41
  • 4
  • Do you mean accessing the database using the vuejs ? – Karma Blackshaw Jan 15 '20 at 08:36
  • @KarmaBlackshaw Yes. Accessing the database using the vuejs to get the specific item. – Nehemiah Chan Jan 15 '20 at 08:43
  • what you can do is make a request from your front end to your backend (PHP). You can do this by using axios. `axios.[method]([route-to-your-api], params);`. Please click [here](https://github.com/axios/axios) to learn more about **axios**. Please ask more if the answer is still vague. – Karma Blackshaw Jan 15 '20 at 08:46
  • Moreover, please post anything you've tried. – Karma Blackshaw Jan 15 '20 at 08:49
  • Once the XML data has been imported into your MySQL - it is no more XML, so you have to use SQL to query or manipulate the data. With Axios you simply make HTTP requests (either GET or POST) to your PHP scripts - and those scripts simply `echo json_encode($result)` whatever you want to send to your Vue application. – IVO GELOV Jan 15 '20 at 09:29
  • @KarmaBlackshaw Appreciate the quick reply. I do believe I am aiming for the 'GET' request. As there is a portion that looks a bit unclear (under CommonJS usage from the link), based on the coding from ".then() ... /.clear()... /.finally(). I was wondering if it is the same idea as ajax together with For example `try{var img = document.createElement("img"); img.src = $(this).find('imageURL').text(); var src = document.getElementById("image"); src.appendChild(img);}` and catch(err){} function. Apologise for the poor formatting. – Nehemiah Chan Jan 15 '20 at 09:37
  • @NehemiahChan you can do get request like `axios.get(url[, config])`. Morever, axios is very similar to jQuery's Ajax request, yes. Can you show your get request ? – Karma Blackshaw Jan 15 '20 at 10:09
  • @NehemiahChan what do you mean by error usage ? – Karma Blackshaw Jan 17 '20 at 02:13
  • @KarmaBlackshaw I have managed to identify the portion for ajax success/error/complete into axios equivalent (then/catch/finally) respectively. I am currently looking to troubleshoot my axios and jquery as my app loads successfully , it doesn't display anything. I will get back if i got anything new. – Nehemiah Chan Jan 17 '20 at 02:14
  • @NehemiahChan nice! – Karma Blackshaw Jan 17 '20 at 02:16
  • @KarmaBlackshaw My bet. I viewed the sample documentation in Axios when I compared to the sample code in ajax. – Nehemiah Chan Jan 17 '20 at 02:16
  • @NehemiahChan you can take a look at my answer [here](https://stackoverflow.com/questions/59745060/vuejs-typeerror-ajax-success-is-not-a-function?noredirect=1#comment105670468_59745060) for it is quite similar with axios. – Karma Blackshaw Jan 17 '20 at 02:17
  • @KarmaBlackshaw – Nehemiah Chan Jan 17 '20 at 06:10
  • @NehemiahChan yes ? – Karma Blackshaw Jan 17 '20 at 06:38
  • @KarmaBlackshaw sorry about that. `mounted () { $(document).ready(function() { $.axios({ method: 'get', url: 'http://128.106.100.230/bistro/get_step1_1.php', dataType: 'xml', success: (function (response) { $('Bistro', response).each(function(){ try { var img = document.createElement("img") img.src = $(this).find('imageURL').text() var src = document.getElementById("image") src.appendChild(img) } catch (error) { alert(err); } }, } }) }` – Nehemiah Chan Jan 17 '20 at 07:40
  • @KarmaBlackshaw I wanted to update you on the coding, I received an error on unexpected token on the last few closing brackets. I believe that I manage to get the jquery running. Besides that, I have enabled `const axios = require('axios')` under the script tag – Nehemiah Chan Jan 17 '20 at 07:44
  • @NehemiahChan please check my answer at the bottom. – Karma Blackshaw Jan 17 '20 at 08:01

1 Answers1

0

I will just post my answer here as a response to the comment of the OP and to provide better formatting.

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 is an object. You can obtain your result using 

response.data

or using es6's object destructuring:

let { data } = await axios('http://128.106.100.230/bistro/get_step1_1.php')
Karma Blackshaw
  • 880
  • 8
  • 20