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使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
详解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的 gitHub 地址 不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因,废话不多说: 基本的封装要求: 统一 url 配置 统一 api 请求 request (请求)拦截器,例如:带上token等,设置请求头 response (响应)拦截器,例如:统一错误处理,页面重
-
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的封装问题(简易版拦截,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 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
-
详解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新手实践实现登陆的示例代码
其实像这类的文章网上已经有很多很好的,写这篇文章,相当于是做个笔记,以防以后忘记 用到的: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(
-
vue2.0学习之axios的封装与vuex介绍
一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击 跳转, 不过我还是建议看文档比较好.os: Vue文档是非常详细的 二.准备 做vue单页应用都需要会什么? 1. vue的脚手架,直接帮你建好项目.再看看自己想要啥,补充啥! os: Git 上有很多成品项目,可以找一个好点的拉下来 注:路由按需加载.热加载 等这些都是基础功能,在这不多说.os
-
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如何配合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前端框架搭建过程
目录 一.安装 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框架,自己以后用也方便吧,但是最近的事真的是很多,很多事情都没有去干,有时候自己会怀疑一下人生自己该不该去做程序员,我是一个没毕业的学生,找工作真的是四处碰壁,感觉自己好难混,一个暑假换了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环境的详细教程
目录 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系统中可以看到环境变量也已经自动配置好
随机推荐
- Ext JS框架中日期函数的用法及日期选择控件的实现
- codeigniter框架批量插入数据
- bootstrap3使用bootstrap datetimepicker日期插件
- python实现给字典添加条目的方法
- 举例讲解Go语言中函数的闭包使用
- 使用python获取CPU和内存信息的思路与实现(linux系统)
- Android开发悬浮按钮 Floating ActionButton的实现方法
- JavaScript通过setTimeout实时显示当前时间的方法
- 关于ajax网络请求的封装实例
- jQuery实现的浮动层div浏览器居中显示效果
- 响应鼠标变换表格背景或者颜色的代码
- 最新统计排名前十的SQL和NoSQL数据库排行榜
- C语言中strcmp的实现原型
- iOS实现百度地图拖拽后更新位置以及反编码
- ubuntu中配置pyqt4环境教程
- 软件测试-MySQL(六:数据库函数)
- 微信小程序实现获取自己所处位置的经纬度坐标功能示例
- cordova+vue+webapp使用html5获取地理位置的方法
- java 对称加密算法实现详解
- C++生成不重复的随机整数