您现在的位置是：主页 > news > 数据做图网站/百度seo sem

数据做图网站/百度seo sem

admin2025/6/18 3:50:18【news】

简介数据做图网站,百度seo sem,创网中国的网站,企业级网站开发技术vue实现动态数据的方式主要有vue-resource和axios，但是从Vue2.0开始，已经不对vue-resource进行更新，因此，本文主要利用axios进行操作。 1、安装axios npm install axios --save2、在Vue-cli的components中编写组件[plain] view pl…

数据做图网站,百度seo sem,创网中国的网站,企业级网站开发技术vue实现动态数据的方式主要有vue-resource和axios，但是从Vue2.0开始，已经不对vue-resource进行更新，因此，本文主要利用axios进行操作。 1、安装axios npm install axios --save2、在Vue-cli的components中编写组件[plain] view pl…

vue实现动态数据的方式主要有vue-resource和axios，但是从Vue2.0开始，已经不对vue-resource进行更新，因此，本文主要利用axios进行操作。

1、安装axios

npm install axios --save


2、在Vue-cli的components中编写组件

[plain] view plaincopy
  1. <span style="font-size:14px;"><template>  
  2.   <div class="count">  
  3.     <table cellspacing="0" border="1px">  
  4.       <tr>  
  5.         <th>id</th>  
  6.         <th>name</th>  
  7.         <th>age</th>  
  8.         <th>intro</th>  
  9.       </tr>  
  10.       <tr v-for="user in users">  
  11.         <td>{{user.id}}</td>  
  12.         <td>{{user.name}}</td>  
  13.         <td>{{user.age}}</td>  
  14.         <td>{{user.intro}}</td>  
  15.       </tr>  
  16.     </table>  
  17.   </div>  
  18. </template>  
  19.   
  20. <script>  
  21. import Vuex from "vuex";  
  22. import axios from "axios";  
  23.   
  24.   export default{  
  25.     name:'count',  
  26.     data(){  
  27.       return{  
  28.         users: []//预先创建一个数组，用于存放请求得到的数据  
  29.       }  
  30.     },  
  31.     created(){ //此处用created相当于对前端页面数据进行初始化  
  32.       axios.get("http://xxxx/axios.php").then(res=>{  //这里是ES6的写法，get请求的地址，是小编自己在网站上存放的php文件，后面将介绍其编写，也可以自己定义  
  33.         this.users=res.data;//获取数据  
  34.         console.log('success');  
  35.         console.log(this.users);  
  36.       })  
  37.     }  
  38.   }  
  39. </script>  
  40.   
  41. <style scoped>  
  42.   table{  
  43.     width:600px;   
  44.     height:300px;   
  45.     margin:100px  
  46.   }  
  47. </style></span>  


3、数据库的创建

本文创建的数据表信息主要由id、user、name、intro几个

可以根据自己的需求，自己创建。具体的创建方式，网上很多，此处不再详细描述。创建的数据如下：


4、需要请求的php

[php] view plaincopy
  1. <span style="font-size:14px;"><?php  
  2.     header("Access-Control-Allow-Origin: *");//这个必写，否则报错  
  3.     $mysqli=new mysqli('localhost','root','passwd','table');//根据自己的数据库填写  
  4.   
  5.     $sql="select * from users";  
  6.     $res=$mysqli->query($sql);  
  7.   
  8.     $arr=array();  
  9.     while ($row=$res->fetch_assoc()) {  
  10.         $arr[]=$row;  
  11.     }  
  12.     $res->free();  
  13.     //关闭连接  
  14.     $mysqli->close();  
  15.       
  16.     echo(json_encode($arr));//这里用echo而不是return  
  17.   
  18. ?></span>  
则最终在液面上输出的结果也为上面数据表那张图所示。

相关文章

最新文章