博客
关于我
第十章:vue2中axios请求服务端数据
阅读量:132 次
发布时间:2019-02-26

本文共 1597 字,大约阅读时间需要 5 分钟。

一、关于axios的安装

  • 1、利用npm安装npm install axios --save
  • 2、利用bower安装bower install axios --save
  • 3、直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

二、关于get请求数据

  • 1、直接请求数据

    axios.get('/static/data.json').then(res=>{    console.log(res);    ....}).catch(error=>console.log(error));
  • 2、带参数的请求方式

    axios.get('/static/data.json',{params:{id:123}}).then(res=>{    console.log(res);    ....}).catch(error=>console.log(error));

二、关于post请求数据

  • 1、直接请求

    axios.post('/user', {    firstName: 'Fred',    lastName: 'Flintstone'}).then(function (response) {         console.log(response);}).catch(function (error) {         console.log(error);});

三、vue-cli构建项目中利用axios请求数据处理跨域的问题

  • 1、vue-cli构建项目
  • 2、服务器数据接口

    'use strict';const express = require("express");const app = express();let obj = {    info:'success',    code:200,    booknames:[        {id:0,bookname:'三国演义',author:'罗贯中'},        {id:1,bookname:'水浒传',author:'施耐庵'},        {id:2,bookname:'西游记',author:'吴承恩'},        {id:3,bookname:'红楼梦',author:'曹雪芹'},    ]};app.get('/',(req, res) => {    res.json(obj);})app.get('/book',(req, res) => {    res.json(obj);})app.listen(3000);
  • 3、设置代理(在config->index.js)中

    // 配置代理  proxyTable: {    '/api':{  // api为匹配项        target:'http://localhost:3000/', // 设置代理目标        changeOrigin: true,        pathRewrite: {  // 重写路径          '^/api': '/'        }    }},
  • 4、请求数据

    import axios from 'axios';export default {    name: 'app',    mounted(){        axios.get('/api/book').then(res=>{            console.log('第一条数据:',res);        })        axios.get('/api').then(res=>{            console.log('第二条数据:',res);        })    }}

转载地址:http://aavf.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(5)——MySql常用函数大全讲解
查看>>
Mysql学习总结(60)——并发量大、数据量大的互联网业务数据库设计规范总结
查看>>
Mysql学习总结(61)——MySQL优化之DBA级优化整理汇总
查看>>
Mysql学习总结(62)——MySQL连接com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link问题
查看>>
Mysql学习总结(63)——Mysql数据库架构方案选择与分析
查看>>
Mysql学习总结(64)——Mysql配置文件my.cnf各项参数解读
查看>>
Mysql学习总结(65)——项目实战中常用SQL实践总结
查看>>
Mysql学习总结(66)——设置MYSQL数据库编码为UTF-8
查看>>
Mysql学习总结(67)——MYSQL慢查询日志
查看>>
Mysql学习总结(68)——MYSQL统计每天、每周、每月、每年数据 SQL 总结
查看>>
Mysql学习总结(69)——Mysql EXPLAIN 命令使用总结
查看>>
Mysql学习总结(6)——MySql之ALTER命令用法详细解读
查看>>
Mysql学习总结(70)——MySQL 优化实施方案
查看>>
Mysql学习总结(71)——MySQL 重复记录查询与删除总结
查看>>
Mysql学习总结(71)——数据库介绍(MySQL安装 体系结构、基本管理)再回顾
查看>>
Mysql学习总结(72)——MySQL 开发者开发,设计规范再总结
查看>>
Mysql学习总结(73)——MySQL 查询A表存在B表不存在的数据SQL总结
查看>>
Mysql学习总结(74)——慢SQL!压垮团队的最后一根稻草!
查看>>
Mysql学习总结(75)——并发量大、数据量大的互联网业务数据库设计军规
查看>>
Mysql学习总结(76)——MySQL执行计划(explain)结果含义总结
查看>>