Vue.js学习(五):vue+axios+php+mysql 实现前端界面数据动态更新
2018-01-13 22:24
1276 查看
网上参考了很多例子,都没有关于vue+php实现前后端的例子,后来自己总结了一个,希望大家批评指正。
vue实现动态数据的方式主要有vue-resource和axios,但是从Vue2.0开始,已经不对vue-resource进行更新,因此,本文主要利用axios进行操作。
1、安装axios
npm install axios --save
2、在Vue-cli的components中编写组件
3、数据库的创建
本文创建的数据表信息主要由id、user、name、intro几个
可以根据自己的需求,自己创建。具体的创建方式,网上很多,此处不再详细描述。创建的数据如下:
4、需要请求的php
vue实现动态数据的方式主要有vue-resource和axios,但是从Vue2.0开始,已经不对vue-resource进行更新,因此,本文主要利用axios进行操作。
1、安装axios
npm install axios --save
2、在Vue-cli的components中编写组件
<template> <div 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> </div> </template> <script> import Vuex from "vuex"; import axios from "axios"; export default{ name:'count', data(){ return{ users: []//预先创建一个数组,用于存放请求得到的数据 } }, created(){ //此处用created相当于对前端页面数据进行初始化 axios.get("http://xxxx/axios.php").then(res=>{ //这里是ES6的写法,get请求的地址,是小编自己在网站上存放的php文件,后面将介绍其编写,也可以自己定义 this.users=res.data;//获取数据 console.log('success'); console.log(this.users); }) } } </script> <style scoped> table{ width:600px; height:300px; margin:100px } </style>
3、数据库的创建
本文创建的数据表信息主要由id、user、name、intro几个
可以根据自己的需求,自己创建。具体的创建方式,网上很多,此处不再详细描述。创建的数据如下:
4、需要请求的php
<?php header("Access-Control-Allow-Origin: *");//这个必写,否则报错 $mysqli=new mysqli('localhost','root','passwd','table');//根据自己的数据库填写 $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 ?>则最终在液面上输出的结果也为上面数据表那张图所示。
相关文章推荐
- 测试代码,解决java gui swing多线程界面假死、僵死问题,实现界面动态刷新,动态同步更新数据
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表(select)
- vue.js实现数据动态响应(Vue.set的应用)
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表(select)
- Vue.js+Layer表格数据绑定与实现更新
- Vue.js实现简单动态数据处理
- php+mysqli实现批量执行插入、更新及删除数据的方法
- vue.js+elementUI学习01之后台管理登录验证实现axios和springMVC交互
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面
- Vue.js+Layer表格数据绑定与实现更新
- 【前端】vue.js实现按钮的动态绑定
- PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js)
- Vue.js+Layer表格数据绑定与实现更新
- 前端js实现动态更新进度条-7
- vue.js动态数据绑定学习
- vue.js实现数据动态响应 Vue.set的简单应用
- 前端js实现动态更新进度条(重要)
- vue.js动态数据绑定学习笔记
- vue.js通过自定义指令实现数据拉取更新的实现方法
- vue.js通过自定义指令实现数据拉取更新的实现方法