Combinez vue+axios+php+mysql pour mettre à jour la dynamique des données de l'interface frontale

Le contenu de cet article est de combiner vue+axios+php+mysql pour mettre à jour la dynamique des données de l'interface front-end. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Implémentation de vue Les principales méthodes de données dynamiques incluent vue-resource et axios Cependant, à partir de Vue2.0, vue-resource n'a pas été mise à jour Par conséquent, cet article utilise principalement axios pour le fonctionnement.

1. Installer axios

npm install axios --save

2. Écrire des composants dans les composants Vue-cli

<span style="font-size:14px;"><template>  
  <p class="count">  
    <table cellspacing="0" border="1px">  
      <tr>  
        <th>id</th>  
        <th>name</th>  
        <th>age</th>  
        <th>intro</th>  
      </tr>  
      <tr v-for="user in users">  
        <td>{{user.id}}</td>  
        <td>{{user.name}}</td>  
        <td>{{user.age}}</td>  
        <td>{{user.intro}}</td>  
      </tr>  
    </table>  
  </p>  
</template>  
  
<script>  
import Vuex from "vuex";  
import axios from "axios";  
  
  export default{  
    name:&#39;count&#39;,  
    data(){  
      return{  
        users: []//预先创建一个数组，用于存放请求得到的数据  
      }  
    },  
    created(){ //此处用created相当于对前端页面数据进行初始化  
      axios.get("http://xxxx/axios.php").then(res=>{  //这里是ES6的写法，get请求的地址，是小编自己在网站上存放的php文件，后面将介绍其编写，也可以自己定义  
        this.users=res.data;//获取数据  
        console.log(&#39;success&#39;);  
        console.log(this.users);  
      })  
    }  
  }  
</script>  
  
<style scoped>  
  table{  
    width:600px;   
    height:300px;   
    margin:100px  
  }  
</style></span>

3. Création de base de données

Les informations de la table de données créées dans cet article comprennent principalement l'identifiant, l'utilisateur, le nom et l'intro

Vous pouvez le créer vous-même selon vos propres besoins. Il existe de nombreuses méthodes de création spécifiques sur Internet et ne seront pas décrites en détail ici. Les données créées sont les suivantes :

4. PHP requis

1. <span style="font-size:14px;"><?php  
       header("Access-Control-Allow-Origin: *");//这个必写，否则报错  
       $mysqli=new mysqli(&#39;localhost&#39;,&#39;root&#39;,&#39;passwd&#39;,&#39;table&#39;);//根据自己的数据库填写  
     
       $sql="select * from users";  
       $res=$mysqli->query($sql);  
     
       $arr=array();  
       while ($row=$res->fetch_assoc()) {  
           $arr[]=$row;  
       }  
       $res->free();  
       //关闭连接  
       $mysqli->close();  
         
       echo(json_encode($arr));//这里用echo而不是return  
     
   ?></span>

Le résultat final de sortie sur la surface du liquide est également affiché dans l'image du tableau de données ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!