CODEWITHSUNDEEP
phpmysqlvue.jsfrontendbackend
Nehemiah Chan
Nehemiah Chan

Reputation: 41

How do I import backend data from PHP(My SQL) into vuejs application

I am currently working on a food ordering mobile web-based application as my project. As this is my very first project in web programming, I do hope that I am able to obtain some clarity. At the moment, I have managed to finalize the design portion of the project. I am looking on how to import the backend data from PHP and MySQL into the vuejs application(as the frontend/user side). I have looked for various posts regarding it, but I still unable to understand.

What do I need to look for when importing the data from PHP with MySQL into the VueJS application? In the backend data, it contains data such as nutrients, cholesterol, and fats, etc, plus pictures, as the backend data(will be controlled by the chefs, as each day the food will be different and updated compared to other days). Therefore, with this data, I do plan to import these data into the application.

I appreciate the advice in advance to approach this obstacle.

Upvotes: 0

Views: 1387

Answers (2)

Hardik Raval
Hardik Raval

Reputation: 3641

Vue.js is a front-end javascript framework so it only renders HTML, CSS, and Javascript in browsers. You really can't import data like in the backend we do.

So that means you need to consume an API/Service and fetch the data and display it.

You can use Vue Axios, Vue-Resource to make HTTP/Ajax requests and get the result.

Example:

    <ul>
       <li v-for="user in users">{{ user.first_name }}</li>
    </ul>

    getUsers(){
        this.axios.get("https://reqres.in/api/users").then((response) => {
            this.users = response.data.data;
        });
    }

Upvotes: 1

salman
salman

Reputation: 314

you need to make restapi to call on the frontend side(vuejs) using axios library. you can see a basic example of PHP, MySQL and vuejs web app. https://morioh.com/p/7a2ac36f37cc or if you want it with laravel then you can check this link https://vuejsdevelopers.com/2018/02/05/vue-laravel-crud/

Upvotes: 0

Related Questions