vue之axios+php+mysql
博主原创,未经许可请勿转载 哦
1.axios配置请看上篇
2.mysql数据库编写,表名为area_list

3.json.php文件在notebeans中编写
<?php
header('Content-type:text/html;charset=UTF-8');//utf-8编码格式
header('Access-Control-Allow-Origin:http://localhost:8888');//为项目写跨域头
$pdo = new PDO('mysql:host=localhost;dbname=redis', 'root', 'password');//pdo连接数据库 扩展:pdo为PHP访问数据库定义了一个轻量级的一致接口
$sql = "select mingcheng from area_list"
$stm = $pdo->query($sql);
if ($stm) {
$arr = $stm->fetchAll(PDO::FETCH_ASSOC);
if ($arr) {
echo json_encode($arr,JSON_UNESCAPED_UNICODE);//json_encode有中文时返回\u5317\u4eac格式,JSON_UNESCAPED_UNICODE转为中文
} else {
echo 0;
}
} else {
echo 0;
}
4.component.vue
this.$http.get('http://localhost:8000/json.php') //url为php运行于自带服务器的浏览器地址
.then(res=>{console.log(res)})
.catch(err=>{console.log(err)})
5.服务器返回结果为

vue之axios+php+mysql的更多相关文章
- Vue+node.js+express+mysql实例---对图书信息进行管理
一个简单的 CURD 实例 ---对图书信息进行管理 目录 1 开发环境 1.1 前端开发环境 1.2 后端开发环境 2 数据库设计和创建 2.1 数据库和表设计 2.2 book 表设计 2.3 s ...
- vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题
vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...
- Vue框架axios请求(类似于ajax请求)
Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- vue 中axios 的基本配置和基本概念
axios的基本概念及安装配置方法 ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 a ...
- Vue用axios跨域访问数据
Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...
- vue中axios的安装和使用
有很多时候你在构建应用时需要访问一个 API 并展示其数据.做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种. 安装包:如果没有安装cnpm ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...
随机推荐
- com.opensymphony.xwork2.ognl.OgnlValueStack - Error setting expression 'customer.applyRate' with value '[Ljava.lang.String;@7d3fae2c'
出错的3个最可能的原因:我是第二种错误 1.action配置错误 <action name="doCreateMeetingInfo" class="meeting ...
- Uboot的串口下载文件命令:loads / loadb / loady
1. loads loads [ off ] 通过串口,下载S-Rec文件到off位置 loads命令可以通过串口线下载S-Record格式文件. 2. loadb loadb [ off ] [ b ...
- 【selenium+Python WebDriver API】之复选框顺序正选和顺序反选
from selenium import webdriver from selenium.webdriver.common.by import By import os,time driver = w ...
- 修复open-ssl漏洞,升级open-ssl版本
升级openssl环境至openssl-1.0.1g 1.查看源版本 [root@zj ~]# openssl version -a OpenSSL 0.9.8e-fips-rhel5 01 Jul ...
- 02 redis通用命令操作
set hi hello 设置值 get hi 获取值 keys * 查询出所有的key memcached 不能查询出所有的key keys *h 模糊查找key keys h[ie] 模糊查找 k ...
- CPI和GDP有什么关系
CPI反映消费价格变化情况,是一个相对数.GDP反映国民经济生产总量,是一个绝对数.CPI的变动反映经济运行过程中物价变动情况,是观察通货膨胀程度的重要指标,GDP的变化则反映经济的增长情况.经济增长 ...
- PHP进阶知识
关于PHP程序员技术职业生涯规划:http://rango.swoole.com/ Micro Service Framework For PHP:https://github.com/pinguo/ ...
- Android中List循环遍历性能对照
在android开发中仅仅要是列表式风格界面我们差点儿都须要用到List来存放数据,在数量非常少的List的话差点儿不论什么一种循环遍历方式总体性能都无区别.可是当我们遇到数据量稍大的时候有必要考虑用 ...
- 【分享】自己写的一个可空的DateTimePicker控件-附源码
最近这段时间在重构以前的一个项目,其中有一项就是要把DateTimePicker控件值可空.大家都知道的DateTimePicker值为DateTime类型,DateTime类型值不能等于Null.但 ...
- 九度OJ 1053:互换最大最小数 (基础题)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6613 解决:2676 题目描述: 输入一个数n,然后输入n个数值各不相同,调换数组中最大和最小的两个数,然后输出. 输入: 测试数据有多组 ...