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

零到壹度
Libérer: 2023-03-23 15:38:02
original
2886 Les gens l'ont consulté

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>
Copier après la connexion

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>
    Copier après la connexion

    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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal