vue框架搭建--axios使用
前后端数据交互作为项目最基础需求(静态的除外),同时也是项目中最重要的需求。
本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步使用说明
1、安装
cnpm install axios --save-dev
2、引入
main.js 文件引入:
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框架搭建项目基本步骤
ps:初入Vue坑的小伙伴们,对于独立做一个项目可能不清楚需要使用哪些资源,这篇随笔希望对大家有所帮助. 第一步:参照vue的官方文档,建立一个vue的项目 # 全局安装 vue-cli $ npm ...
- vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)
前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...
- vue框架搭建的详细步骤(一)
在这里我们先快速的搭建一个vue的脚手架: (1).在安装vue的环境之前,安装NodeJS环境是必须的.可以使用node -v指令检查,需要保证安装了4.0版本以上的nodeJS环境. 没有安装的话 ...
- vue框架搭建--移动端
由于Vue官方提供了vue-cli手脚架,所以快速构建出个简单的项目框架.在做移动端项目时,因为移动端的特性可能会用到些比较常用的插件,就在这里简单介绍如何使用 这里只介绍怎么在项目中安装引用和简单的 ...
- 每天一点点之vue框架开发 - axios解决跨越问题
1.安装 npm install axios 或者 使用 bower: bower install axios 或者直接使用 cdn: <script src="https://unp ...
- 每天一点点之vue框架开发 - axios拦截器的使用
<script> import axios from 'axios' export default { name: 'hello', data () { return { msg: 'We ...
- vue框架搭建
1到网上下载node.js,安装,(新版node,包括了npm ).2下载Git安装.3.你需要的地方建一个文件夹.打开cmd,跳转到这个文件夹输入npm install -g vue-cli 完成 ...
- vue框架搭建的详细步骤之项目结构(二)
上一篇中简单的创建了一个脚手架,这篇简单的讲一下脚手架的项目结构: (1).build/ 此目录包含开发服务器和生产webpack构建的实际配置.通常,您不需要触摸这些文件,除非您要自定义We ...
- Vue2.0框架搭建基础操作及目录说明
一.概述 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组件和v ...
随机推荐
- 测开之路八十七:HTML之a标签的用法
初始化的HTML结构为,只需要在body里面加网页的标签和要显示的内容即可 <!DOCTYPE html><html lang="en"><head& ...
- tensorflow学习笔记二:入门基础 好教程 可用
http://www.cnblogs.com/denny402/p/5852083.html tensorflow学习笔记二:入门基础 TensorFlow用张量这种数据结构来表示所有的数据.用一 ...
- Application.Restore不起作用了
http://www.myexception.cn/delphi/695243.html Application.Restore不起作用了窗体上只有一个Button和一个Timer(1秒计时)代码如下 ...
- oracle DBID,SID,DB_NAME,DB_DOMAIN,INSTANCE_NAME,DB_UNIQUE_NAME, SERVICE_NAMES 及监听参数的说明
DBID,SID,DB_NAME,DB_DOMAIN,INSTANCE_NAME,DB_UNIQUE_NAME, SERVICE_NAMES 及监听参数的说明 DB 相关的: DBID, SIDPFI ...
- Bootstrap 学习笔记 项目实战 响应式轮播图
左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...
- oracle--约束(主键、非空、检查)
问题1:学号重复了,数据还可以插入成功 使用主键约束:学号是唯一标识一条数据的,所以必须唯一且不能为空 ---(1).在确定为主键的字段后添加 primary key关键字 ---(2).在创建表的后 ...
- python字典-基础
一.解释 像列表一样,“字典”是许多值的集合.但不像列表的下标,字典的索引可以 使用许多不同数据类型,不只是整数.字典的索引被称为“键”,键及其关联的值 称为“键-值”对. 二.列表创建方式 1. I ...
- [BZOJ 2820] YY的gcd(莫比乌斯反演+数论分块)
[BZOJ 2820] YY的gcd(莫比乌斯反演+数论分块) 题面 给定N, M,求\(1\leq x\leq N, 1\leq y\leq M\)且gcd(x, y)为质数的(x, y)有多少对. ...
- P3064 [USACO12DEC]伊斯坦布尔的帮派 (模拟)
题目传送门 题意: 一片草地,每次可以只可以让一种牛占领,问你怎样安排牛的次序 最后剩下的是1号牛,并且输出其数量 思路: 看到n到100 ,所以可以(n^3)暴力,第一重遍历次序,第二枚举是哪只牛 ...
- C# 判断文件夹与文件是否存在
//在上传文件时经常要判断文件夹是否存在,如果存在就上传文件,否则新建文件夹再上传文件 判断语句为 if (System.IO.Directory.Exists(Server.MapPath(&quo ...