精华内容
下载资源
问答
  • Vue axios

    千次阅读 2019-09-18 23:10:32
    文章目录Vue axios#0 GitHub#1 需求#2 环境#2.1 安装axios2.2 配置#3 开始#3.1 最简单的Demo#3.1 POST请求在这里插入图片描述#4 模块化处理#4.1 axios.js#4.2 api.js#4.3 开始使用20190918225302-image.png Vue ...

    Vue axios

    #0 GitHub

    https://github.com/Coxhuang/vue-axios-demo

    #1 需求

    • 点击一个按钮,前端向后端发送http请求数据,后端返回数据给前端

    #2 环境

    #2.1 安装axios

    npm install --save axios vue-axios
    

    2.2 配置

    import axios from 'axios'
    import VueAxios from 'vue-axios'
    Vue.use(VueAxios,axios);
    axios.defaults.baseURL = "http://127.0.0.1:8000/"; // 后端接口的地址 
    

    #3 开始

    #3.1 最简单的Demo

    前端向后端发送一个get请求

    • HelloWorld.vue
    <template>
    	<div @click="btnClick()">点击</div>
    </template>
    
    <script>
    export default {
    	name: 'HelloWorld',
    	data () {
    		return {}
    	},
    	methods:{
            btnClick:function(){
                this.axios.get('/api/user/list-user/').then((response)=>{
                    console.log(response.data)
                }).catch((error)=>{
                    console.log(error)
                })
            },
    	},
    }
    </script>
    
    
    • 界面

    在这里插入图片描述


    • 后端

    在这里插入图片描述

    本文使用的后端框架是Python的Django框架, 需要注意的是,后端接口需要配置跨域问题,如果不配置跨域,会出现以下情况:

    20190914211619-image.png

    后端返回的请求状态码仍然是200, 但是前段就是拿不到数据

    Django解决跨域如下:

    • settings.py
    ...
    
    MIDDLEWARE = [
        'django.middleware.security.SecurityMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'corsheaders.middleware.CorsMiddleware',  # 跨域,必须放在这个位置,不能放在'django.middleware.common.CommonMiddleware'后面 
        'django.middleware.common.CommonMiddleware',
        ...
    ]
    
    ...
    
    CORS_ALLOW_CREDENTIALS = True
    CORS_ORIGIN_ALLOW_ALL = True
    CORS_ORIGIN_WHITELIST = (
        '*',
    )
    
    CORS_ALLOW_METHODS = (
        'DELETE',
        'GET',
        'OPTIONS',
        'PATCH',
        'POST',
        'PUT',
        # 'VIEW',
    )
    
    CORS_ALLOW_HEADERS = (
        'XMLHttpRequest',
        'X_FILENAME',
        'accept-encoding',
        'authorization',
        'content-type',
        'dnt',
        'origin',
        'User-agent',
        'x-csrftoken',
        'x-requested-with',
        'token',
    )
    ...
    

    #3.1 POST请求

    • HelloWorld.vue
    <template>
    	<div>
    		<div @click="btnClick()">点击</div>
    		<div @click="btnClick2()">POST点击</div>
    	</div>
    </template>
    
    <script>
    export default {
    	name: 'HelloWorld',
    	data () {
    		return {}
    	},
    	methods:{
            btnClick:function(){
                this.axios.get('/api/user/list-user/').then((response)=>{
                    console.log(response.data)
                }).catch((error)=>{
                    console.log(error)
                })
            },
            btnClick2:function(){
                this.axios.post('/api/user/create-user/',{
                    "username" : "cox2",
                    "password" : "cox123456",
                }).then((response)=>{
                    console.log(response.data)
                }).catch((error)=>{
                   console.log(error.response.status)
                })
            },
    	},
    }
    </script>
    
    

    在这里插入图片描述

    #4 模块化处理

    • 将axios的相关配置放进一个文件
    • 将所有用的路由接口放进一个文件

    #4.1 axios.js

    新建 src/utils/axios.js

    import axios from 'axios' // 导入node_modules里的axios 
    
    axios.defaults.baseURL = "http://127.0.0.1:8000/"; // 后端接口 ip:port 
    
    export default axios // 导出axios 
    

    #4.2 api.js

    新建 src/api/api.js和src/api/index.js

    • index.js
    import api_all from './api'
    
    export default {
        api_all
    }
    
    • api.js
    import axios from '@/utils/axios' // 导入axios 
    
    const api_all = {
        // 获取所有用户列表
        get_user_list(token) {
            return axios({
                url: '/api/user/list-user/',
                method: 'GET',
                // data: {
                //     token: token
                // },
            })
        }
    };
    
    export default api_all // 导出 api_all 
    

    #4.3 开始使用

    • main.js
    ...
    import axios from "./api/"; // 导入axios 
    Vue.prototype.$api = axios; // 挂载到原型链上, 在vue组件里面可以通过this拿到
    
    // 使用统一化管理,将以下代码注释掉
    // import axios from 'axios'
    // import VueAxios from 'vue-axios'
    // Vue.use(VueAxios,axios);
    // axios.defaults.baseURL = "http://127.0.0.1:8000/";
    ...
    
    • HelloWorld.vue
    <template>
    	<div>
    		<div @click="btnClick()">点击</div>
    		<div @click="btnClick2()">POST点击</div>
    		<div @click="btnClick3()">api点击</div>
    	</div>
    </template>
    
    <script>
    export default {
    	name: 'HelloWorld',
    	data () {
    		return {}
    	},
    	methods:{
            btnClick:function(){
                // this.axios.get('/api/user/list-user/').then((response)=>{
                //     console.log(response.data)
                // }).catch((error)=>{
                //     console.log(error)
                // })
            },
            btnClick2:function(){
                // this.axios.post(
                //     '/api/user/create-user/',
    	        //     {
    		    //         "username" : "cox2",
    		    //         "password" : "cox123456",
    	        //     }
                // ).then((response)=>{
                //     console.log(response.data)
                // }).catch((error)=>{
                //     console.log(error.response.status)
                // })
            },
            btnClick3:function(){
                this.$api.api_all.get_user_list().then((response)=>{
                    console.log(response.data)
                }).catch((error)=>{
                    console.log(error.response.status)
                })
            },
    	},
    }
    </script>
    ...
    

    20190918225302-image.png

    我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3r4tz4ro4xkwg

    展开全文
  • vue axios封装 axios 请求

    2020-03-27 15:04:31
    vue axios封装 axios 请求
  • 通过设置访问代理,解决vue axios 跨域访问问题
  • axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,在vue中数据请求需要先安装axios。这篇文章主要介绍了vue axios数据请求及vue中使用axios的方法,需要的朋友可以参考下
  • vue axios用法教程详解

    2020-08-29 21:41:25
    axiosvue-resource后出现的Vue请求数据的插件。下面我们通过本文给大家介绍vue axios用法教程详解,感兴趣的朋友一起看看吧
  • 主要介绍了vue axios同步请求解决方案,需要的朋友可以参考下
  • 主要介绍了vue axios整合使用全攻略,需要的朋友可以参考下
  • 详解vue axios二次封装

    2020-10-18 08:35:38
    给大家分享了vue axios二次封装的相关知识点等内容以及实例代码,有兴趣的朋友可以参考学习下。
  • axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要介绍了vue axios 简单封装以及思考 ,需要的朋友可以参考下
  • 主要介绍了vue axios登录请求拦截器,判断是否登录超时,或对请求结果做一个统一处理的教程详解,需要的朋友可以参考下
  • 现在vue项目中,一般使用axios发送请求去后台拉取数据。这篇文章主要介绍了vue axios post发送复杂对象的一点思考,需要的朋友可以参考下
  • 今天小编就为大家分享一篇Vue axios设置访问基础路径方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了vue axios请求超时,设置重新请求的完美解决方法,一并给大家介绍了axios基本用法,需要的朋友可以参考下
  • 主要介绍了vue axios封装以及API统一管理 ,需要的朋友可以参考下
  • 主要介绍了Vue axios获取token临时令牌封装案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 下面小编就为大家分享一篇vue axios 表单提交上传图片的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • axios 简介 axios 是一个基于Promise 用于浏览器和 ...下面代码给大家介绍vue axios 请求拦截,具体代码如下所示: import axios from 'axios';//引入axios依赖 import { Message } from 'element-ui'; import Cookie
  • 本篇文章主要介绍了VUE axios发送跨域请求需要注意的问题,在实际项目中前端使用到vue,后端使用php进行开发。前端使用axios请求请求遇到的问题,有兴趣的可以了解一下
  • 主要介绍了vue axios请求成功却进入catch的原因分析,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了Vue axios 跨域请求无法带上cookie的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 下面小编就为大家分享一篇vue axios 在页面切换时中断请求方法 ajax,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章主要介绍了VUE axios上传图片到七牛的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了详解vue axios用post提交的数据格式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇解决vue axios的封装 请求状态的错误提示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • axios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库,常用于Ajax请求。这篇文章主要介绍了vue axios数据请求get、post方法的使用 ,需要的朋友可以参考下
  • 主要介绍了vue axios基于常见业务场景的二次封装的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了vue axios请求频繁时取消上一次请求的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇Vue axios 将传递的json数据转为form data的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章主要介绍了Vue axios 中提交表单数据(含上传文件),具有一定的参考价值,有兴趣的可以了解一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,518
精华内容 35,807
关键字:

vueaxios

vue 订阅