博主原创,未经许可请勿转载 哦

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的更多相关文章

  1. Vue+node.js+express+mysql实例---对图书信息进行管理

    一个简单的 CURD 实例 ---对图书信息进行管理 目录 1 开发环境 1.1 前端开发环境 1.2 后端开发环境 2 数据库设计和创建 2.1 数据库和表设计 2.2 book 表设计 2.3 s ...

  2. vue 集成 axios 发送post请求 payload导致后台无法接收到数据问题

    vue 集成axios之后,发送的post请求默认为payload 方式. 如果想改为正常的方式,需要增加headers头,并且将发送是数据json格式改为 querystring的方式. 安装依赖 ...

  3. Vue框架axios请求(类似于ajax请求)

    Vue框架axios get请求(类似于ajax请求) 首先介绍下,这个axios请求最明显的地方,通过这个请求进行提交的时候页面不会刷新 <!DOCTYPE html> <html ...

  4. vue中axios 配置请求拦截功能 及请求方式如何封装

    main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...

  5. vue 中axios 的基本配置和基本概念

    axios的基本概念及安装配置方法   ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 a ...

  6. Vue用axios跨域访问数据

    Vue用axios跨域访问数据axios是vue-resource的替代品,vue-resource不再维护.安装axios:npm install axios使用vue-cli开发时,由于项目本身启 ...

  7. vue中axios的安装和使用

    有很多时候你在构建应用时需要访问一个 API 并展示其数据.做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种. 安装包:如果没有安装cnpm ...

  8. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  9. vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)

    16319 1.首先axios不支持vue.use()方式声明使用,看了所有近乎相同的axios文档都没有提到这一点建议方式 在main.js中如下声明使用 import axios from 'ax ...

随机推荐

  1. 一些Python黑客脚本

    [Github项目地址] https://github.com/threeworld/Python

  2. 宜人贷PaaS数据服务平台Genie:技术架构及功能

    上篇:架构及组件 一.数据平台的发展 1.1 背景介绍 随着数据时代的到来,数据量和数据复杂度的增加推动了数据工程领域的快速发展.为了满足各类数据获取/计算等需求,业内涌现出了诸多解决方案.但大部分方 ...

  3. ReactiveCocoa入门教程——第二部分【转载】

    ReactiveCocoa是一个框架,它能让你在iOS应用中使用函数响应式编程(FRP)技术.在本系列教程的第一部分中,你学到了如何将标准的动作与事件处理逻辑替换为发送事件流的信号.你还学到了如何转换 ...

  4. Space is not allowed after parameter prefix ':'

    问题:在hibernate中执行mysql语句,如果mysql语句中含有@a := 1 之类的变量,回报这个错误 语句类似于“set @rownum=0, @preval=null; select @ ...

  5. smarty静态缓存

    缓存能让程序访问起来更加快速,调数据库的数量变少,不能实时的跟数据库同步, 一般缓存文件都放在smarty文件下cach文件夹中: 建立缓存的PHP和HTML文件: 先编辑PHP文件来查询显示数据库当 ...

  6. 【BZOJ4519】[Cqoi2016]不同的最小割 最小割树

    [BZOJ4519][Cqoi2016]不同的最小割 Description 学过图论的同学都知道最小割的概念:对于一个图,某个对图中结点的划分将图中所有结点分成两个部分,如果结点s,t不在同一个部分 ...

  7. EasyNVR H5直播流媒体解决方案前端构建之:如何播放自动适配RTMP/HLS直播播放

    之前在进行EasyNVR多屏开发的时候,由于多屏功能不需要在手机端展示出来(pc多播放为RTMP,手机端播放为HLS),因此只注意到了引用videojs来进行rtmp的播放.由于不同项目需求不同,对h ...

  8. css jquery 实现轮播效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. new 和 make 均是用于分配内存

    the-way-to-go_ZH_CN/06.5.md at master · Unknwon/the-way-to-go_ZH_CN https://github.com/Unknwon/the-w ...

  10. TVirtualStringTree的Minimal例子学习

    预步骤第一步,定义数据结构type PMyRec = ^TMyRec; TMyRec = record Caption: WideString; end;预步骤第二步,规定取得节点数据时候的大小pro ...