Vue.js with pure PHP

Question

Vue.js with pure PHP

Navigation

#1 by (1 votes)

0

I'm starting in Vue.js and now I'm in a moment that I can not do. I need to for example connect in PHP and make a select in MySQL to bring some data. But I do not know how to proceed in Vue.js , I'll put the code here.

I tried to do so through an internet tutorial but I think it did not work.

My PHP:

<?php

$conn = mysql_connect("127.0.0.1","root","");
$db   = mysql_select_db("techall14");

$sql = mysql_query("SELECT * FROM estoque_filial");

$i = 0;
while ($resposta = mysql_fetch_array($sql))
{

    $ret[$i]["Id"]=$resposta['Id'];
    $ret[$i]["filial"]=$resposta['filial'];
    $ret[$i]["descricao"]=$resposta['descricao'];
    
    $ano = substr($resposta['data_cad'],0,4);
    $mes = substr($resposta['data_cad'],5,2); 
    $dia = substr($resposta['data_cad'],8,2); 
    $data_cad = $dia."/".$mes."/".$ano;
    
    $ret[$i]["data_cad"]=$data_cad;
    $ret[$i]["operador"]=$resposta['operador'];
    $ret[$i]["status"]=$resposta['status'];
$i ++;

}

header("Content-type: application/json");
echo json_encode($ret);
        
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue2</title>
    <script src="vueJS/vue.min.js"></script>
    
  </head>
  <body>
    <div id="root">
        <table border="1" cellpadding="0" cellspacing="0" >
            <tr>
                <th width="162">Teste (1)</th>
                <th width="144">Teste (2)</th>
                <th width="124">Teste (3)</th>
                <th width="120">Teste (4)</th>
            </tr>
            <tr v-for="user in users">
                <th>{{user.filial}}</th>
                <th>sadasd</th>
                <th>asda</th>
                <th>asda</th>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
          el: '#root',
          data:{
                  users: [],
                newUser:{ username: "", email:""}
             },
             mounted: function(){
                console.log("mounted");
                this.getAllUsers();
            },
            
            methods:{
            
                getAllUsers: function(){
                    
                    axios.get("http://127.0.0.1/VUEJS/teste.php")
                    .then(function(response){
                        console.log(response);
                        if(response.data.error){
                            app.errorMessage = response.date.message;    
                        }else{
                            app.users = response.data.users
                        }    
                        
                    });
                
                    
                }    
                
            }
            
            
        })
    </script>
  </body>
</html>

<?php

$conn = mysql_connect("127.0.0.1","root","");
$db   = mysql_select_db("techall14");

$sql = mysql_query("SELECT * FROM estoque_filial");

$i = 0;
while ($resposta = mysql_fetch_array($sql))
{

    $ret[$i]["Id"]=$resposta['Id'];
    $ret[$i]["filial"]=$resposta['filial'];
    $ret[$i]["descricao"]=$resposta['descricao'];

    $ano = substr($resposta['data_cad'],0,4);
    $mes = substr($resposta['data_cad'],5,2); 
    $dia = substr($resposta['data_cad'],8,2); 
    $data_cad = $dia."/".$mes."/".$ano;

    $ret[$i]["data_cad"]=$data_cad;
    $ret[$i]["operador"]=$resposta['operador'];
    $ret[$i]["status"]=$resposta['status'];
$i ++;

}

header("Content-type: application/json");
echo json_encode($ret);

?>

My HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue2</title>
    <script src="vueJS/vue.min.js"></script>

  </head>
  <body>
    <div id="root">
        <table border="1" cellpadding="0" cellspacing="0" >
            <tr>
                <th width="162">Teste (1)</th>
                <th width="144">Teste (2)</th>
                <th width="124">Teste (3)</th>
                <th width="120">Teste (4)</th>
            </tr>
            <tr v-for="user in users">
                <th>{{user.filial}}</th>
                <th>sadasd</th>
                <th>asda</th>
                <th>asda</th>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
          el: '#root',
          data:{
                  users: [],
                newUser:{ username: "", email:""}
             },
             mounted: function(){
                console.log("mounted");
                this.getAllUsers();
            },

            methods:{

                getAllUsers: function(){

                    axios.get("http://127.0.0.1/VUEJS/teste.php")
                    .then(function(response){
                        console.log(response);
                        if(response.data.error){
                            app.errorMessage = response.date.message;    
                        }else{
                            app.users = response.data.users
                        }    

                    });


                }    

            }


        })
    </script>
  </body>
</html>

vue.js

asked by anonymous 31.07.2017 / 20:44

1 answer

How can I write the command to input external data in Java? Redirect to specific folder as soon as user accesses domain

score 1 · Accepted Answer

Your error is in using the app variable. It does not represent anything in your code. To feed the users data, you must use this.users or, if it is within another context, store this, and then use the + users variable. Example of what your code would look like:

new Vue({
  el: '#root',
  data: {
    users: [],
    newUser: {
      username: "",
      email: ""
    },
    errorMessage: ""
  },
  mounted: function() {
    console.log("mounted");
    this.getAllUsers();
  },

  methods: {

    getAllUsers: function() {

      var self = this; // Armazena a instância do Vue em self

      axios.get("http://127.0.0.1/VUEJS/teste.php")
        .then(function(response) {
          console.log(response);
          if (response.data.error) {
            self.errorMessage = response.date.message;
          } else {
            // Faz referência a data.users
            self.users = response.data.users;
          }
        });
    }
  }

})