vue框架搭建之axios使用教程

前后端数据交互作为项目最基础需求（静态的除外），同时也是项目中最重要的需求。

本文重点介绍axios如何配合vue搭建项目框架，而axios的详细使用介绍请移步 使用说明

1、安装

cnpm install axios --save-dev

2、引入

main.js 文件引入：

import Vue from 'vue'//引入vue
import axios from 'axios'//引入axios
Vue.prototype.$axios = axios;//把axios挂载到vue上

3、使用

　　　　　getStore(){
      let that = this
      that.$axios({
        method: "post",//指定请求方式
        url: "/business-app/getCityShopList.cgi",//请求接口（相对接口，后面会介绍到）
        data: {
          cityId: cityId,
          data:{},
          isDebug:"1",
          longitude: "",
          latitude: ""
        }
      })
      .then(function(res){
        //接口成功返回结果执行
      })
      .catch(function(err){
　　　　　　　　　　//请求失败或者接口返回失败或者.then()中的代码发生错误时执行
      })
    }

4、跨域与代理

在vue本地开发时请求总是发生跨域

解决方案：配置代理

config 下的index.js 文件

proxyTable: {
    '/business-app/*': {
      target: 'http://****:8080',//被代理的接口

      changeOrigin: true,
      secure:true // 如果是https接口，需要配置这个参数
    }
  },

　　当URL以 '/business-app/'层级开端时，把 'http://****:8080' 代理成本地IP

5、 baseURL与代理

两者用途不一样，

baseUrl会附加到你绑定的axios实例（如果是全局的，那就是所有实例）上，即如果get/post的url参数是相对路径（如） /api/c/xx，那就会执行 baseUrl + '/api/c/xx',如果未指定baseUrl，那就走浏览器地址栏里的base + baseUrl。

webpack里的proxyTable是测试环境为了避免浏览器下的跨域访问，而以nodejs代理成同前端页面（即浏览器地址栏）同域的一种处理。指定proxyTable后， axios就不需要指定baseUrl了。proxyTable会把base + '/api/c/xx'代理到【base baseUrl + '/api/c/xx'】的接口地址上。

当然工程发布时，后端和前端也需要发布到同一个域下。

6、axios与vue-axios

先看两者的用法

Vue.prototype.$axios = axios
和
import Vueaxios from ‘vue-axios'
Vue.use(VueAxios,axios)

解释：使用vue-axios更多是为了符合规范，并且方便协作

7、其他待补充

对于跨域的处理，除了采用代理外，也可用JSONP或者Qs（axios官方推荐）方案，待详细研究后再来补充

总结

以上所述是小编给大家介绍的vue框架搭建之axios使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • vue结合axios与后端进行ajax交互的方法

    vue结合axios与后端进行ajax交互的方法

    以前vue官方推荐的ajax库是vue-resource, 现在改为axios axios的github仓库 实现的效果: 异步请求 页面异步发出get请求获取数据,提交表单异步post数据到服务端 客户端 客户端代码 代码解析: // 服务端请求地址 let url = 'http://local.php.com/index.php'; let vm = new Vue({ el: "#app", data: { list: [], name: '', saying: '', },

  • Vue二次封装axios为插件使用详解

    照例先贴上 axios的 gitHub 地址 不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因,废话不多说: 基本的封装要求: 统一 url 配置 统一 api 请求 request (请求)拦截器,例如:带上token等,设置请求头 response (响应)拦截器,例如:统一错误处理,页面重

  • vue中axios的封装问题(简易版拦截,get,post)

    第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const token = getCookie('名称')

  • 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper

    1.vue-cli 构建项目 //全局安装 vue-cli npm install - g vue- cli //创建一个基于 webpack 模板的新项目 vue init webpack my- project //cd 进入刚新建的项目文件(my-project) cd my- project // 运行 npm run dev 2.vue-cli 使用axios //1.先安装axios npm install axios //2.main.js中引入并放在Vue的原型上 import

  • vue axios整合使用全攻略

    惯例先安装axios,不多说! cnpm install axios 1.axios配置 我的目录结构src/axios/index.js,axios配置都在该文件下 src/axios/index.js 如下: import axios from 'axios' import qs from 'qs' // axios 配置 axios.defaults.timeout = 5000; axios.defaults.headers.post['Content-Type'] = 'applica

  • vue2.0学习之axios的封装与vuex介绍

    vue2.0学习之axios的封装与vuex介绍

    一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击  跳转,  不过我还是建议看文档比较好.os: Vue文档是非常详细的 二.准备 做vue单页应用都需要会什么? 1.  vue的脚手架,直接帮你建好项目.再看看自己想要啥,补充啥!  os:  Git 上有很多成品项目,可以找一个好点的拉下来 注:路由按需加载.热加载 等这些都是基础功能,在这不多说.os

  • vue 实现axios拦截、页面跳转和token 验证

    第一步: 路由 多添加一个自定义字段 requireAuth path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 }, component: Repository 第二步: router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (store.sta

  • vue+axios新手实践实现登陆的示例代码

    其实像这类的文章网上已经有很多很好的,写这篇文章,相当于是做个笔记,以防以后忘记 用到的:1. vuex 2.axios 3.vue-route 登陆流程为: 1.提交登陆表单,拿到后台返回的数据 2.将数据存入vuex vuex配置 这里直接跳过安装之类的,百度一大堆,我直接上代码 // store index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 初始化时用sessionStore.getItem(

  • 详解vue中axios的封装

    第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const to

  • vue框架搭建之axios使用教程

    前后端数据交互作为项目最基础需求(静态的除外),同时也是项目中最重要的需求. 本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步 使用说明 1.安装 cnpm install axios --save-dev 2.引入 main.js 文件引入: import Vue from 'vue'//引入vue import axios from 'axios'//引入axios Vue.prototype.$axios = axios;//把axios挂载到vue上 3

  • vue 系列——vue2-webpack2框架搭建踩坑之路

    react.vue.angular代表了3种前端工程化的思想,学习三大框架主要是理解它们的核心概念,比如组件.生命周期.单向数据流.双向绑定等.这些概念在非框架开发中,很少人会去这样系统化的思考,对于新手来说,很多概念都没有接触过,不知道从何入手一个react.vue或者是angular项目,下面我将会从零搭建vue项目,边做项目边学习vue的思想. 1.想要使用vue,我首先该怎么做? 想要学习vue,我第一件事是去vue官网看简介:https://cn.vuejs.org/v2/guide.

  • Vue前端框架搭建过程

    Vue前端框架搭建过程

    目录 一.安装 NodeJS 二.安装 vue-cli 三.创建项目 一.安装 NodeJS 见 Windows下安装NodeJS. 二.安装 vue-cli 1.vue-cli 2.x 升级到 3.x (1)卸载 2.x 版本 npm uninstall -g vue-cli (2)安装 npm install -g @vue/cli (3)查看版本 vue -V vue -V@vue/cli 5.0.8 三.创建项目 1.vue-cli 2.x 项目 (1)创建 vue init webpa

  • vue+koa2搭建mock数据环境的详细教程

    前段时间写了一篇前端vue项目实现mock数据方式的文章,主要是在vue项目里使用mock数据,数据和项目耦合在一起,不太优雅,作为一个有追求的前端,怎么能容忍这种方法呢?特以此篇,记录利用koa2搭建服务端,提供mock数据的方法. 初始化vue项目 这里以vue项目为主,当然别的类型项目依然可以使用这种mock数据的方式. vue create vue-koa2-demo 前提是安装了vue-cli的脚手架,我电脑安装的是vue-cli3的版本.按照要求一步一步选择后,记得选择安装vuex,

  • vue axios用法教程详解

    axios是vue-resource后出现的Vue请求数据的插件.vue更新到2.0之后,作者尤大就宣告不再对vue-resource更新,而是推荐的axios. 下面我们来使用axios npm install axios --save-dev import axios from "axios" 这时候如果在其它的组件中,是无法使用 axios 命令的.但如果将 axios 改写为 Vue 的原型属性,就能解决这个问题 1 1.    Vue.prototype.$ajax=axio

  • SSM框架搭建图文教程(推荐)

    SSM框架搭建图文教程(推荐)

    好久就想着好好搭建一个ssm框架,自己以后用也方便吧,但是最近的事真的是很多,很多事情都没有去干,有时候自己会怀疑一下人生自己该不该去做程序员,我是一个没毕业的学生,找工作真的是四处碰壁,感觉自己好难混,一个暑假换了3个公司.我其实就想找一个公司能干自己想干的技术,能学到自己想学到的东西,可是我发现太难了,几乎没有这样的公司.所以说在你不是很牛逼的时候,人得适应公司,而不是公司适应你.第一个公司的一个老程序员和我去公司必须能吃上饭,能吃上饭再想其他的东西,而我是个90后,我明白我的性格,一遇到难

  • vue cli 3.0 搭建项目的图文教程

    1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9

  • Python+unittest+requests 接口自动化测试框架搭建教程

    一.Python+unittest+requests+HTMLTestRunner 完整的接口自动化测试框架搭建_00--框架结构简解 首先配置好开发环境,下载安装Python并下载安装pycharm,在pycharm中创建项目功能目录.如果不会的可以百度Google一下,该内容网上的讲解还是比较多比较全的! 大家可以先简单了解下该项目的目录结构介绍,后面会针对每个文件有详细注解和代码. common: --configDb.py:这个文件主要编写数据库连接池的相关内容,本项目暂未考虑使用数据库

  • Vue3组件库框架搭建example环境的详细教程

    Vue3组件库框架搭建example环境的详细教程

    目录 1 搭建 example 开发环境 1.1 创建 example 项目 1.2 修改 package.json 1.3 修改 vite 配置文件 1.4 多环境支持 1.5 测试启动服务 2 测试 foo 组件 2.1 安装依赖 2.2 引入组件库 2.3 使用组件 2.4 运行查看效果 3 example 打包构建 前面用了大量篇幅介绍组件库的开发环境搭建,包括:创建组件.创建组件库入口.组件库样式架构.组件库公共包,做了一大堆工作,还不能预览示例组件 foo,本文便搭建 example

  • Vue环境搭建+VSCode+Win10的详细教程

    一.安装Node.js(js的运行环境) 1.在Node.js官网https://nodejs.org/en/download/ 下载安装包. 2.下载后进行安装. 3.打开命令行,输入node -v可以查看到版本号.输入npm –v可看到npm版本号. 新版的Node.js已自带npm(类似.net中的nuget包管理器),安装Node.js时会一起安装.(将来要更新npm可用这个命令npm intall npm@latest -g) 4.在我的win10系统中可以看到环境变量也已经自动配置好

随机推荐