Federated Vue+axios+php+mysql Update front-end Interface Data dynamics

This article to share the content is the joint vue+axios+php+mysql update front-end Interface data dynamic, has a certain reference value, the need for friends can refer to

The way vue implements Dynamic data is mainly Vue-resource and Axios, but since Vue2.0, Vue-resource has not been updated, so this article mainly uses Axios to operate.

1, installation Axios

NPM Install Axios--save

2. Composing components in 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: ' Count ', data () {return{users: []//pre-Creates an array to hold the requested data}}, Created () {///here created is equivalent to initializing the front-end page data axios.get ("http://xxxx/axios.php"). Then (res=>{//Here is ES6 's notation, GET request address, is a small part of the PHP file you store on the site, the following will be introduced to write, you can also define this.users=res.data;//to obtain data Console.loG (' success ');        Console.log (this.users);       })}} </script> <style scoped> table{width:600px;       height:300px; margin:100px} </style></span>

3, the creation of the database

The data table information created by this article is mainly composed of ID, user, name, intro, and several

You can create it yourself according to your own needs. The specific way of creation, many online, is no longer described in detail here. The data is created as follows:

4. php that needs to be requested

1. <span style= "FONT-SIZE:14PX;" ><?php      Header ("Access-control-allow-origin: *");//This must write, otherwise error      $mysqli =new mysqli (' localhost ', ' root ', ' passwd ', ' table ');//fill in your database with        $sql = "SELECT * from users";      $res = $mysqli->query ($sql);        $arr =array ();      while ($row = $res->fetch_assoc ()) {          $arr []= $row;      }      $res->free ();      Close connection      $mysqli->close ();            Echo (Json_encode ($arr));//use echo instead of return    ?></span>

The result of the final output on the liquid level is also shown in the above data sheet.