axios 讲解 和vue搭建使用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
</head> <body>
<div id="app">
<h2>{{title}}</h2>
<a href="javascript:void(0);" @click="get">get请求</a>
<a href="javascript:void(0);" @click="post">post请求</a>
<a href="javascript:void(0);" @click="http">http请求</a>
<p>{{msg}}</p>
</div> <script>
new Vue({
el: "#app",
data: {
msg: "",
title: "axios讲解"
},
mounted: function() {
axios.interceptors.request.use(function(config) {
console.log("request");
return config;
})
axios.interceptors.response.use(function(response) {
console.log("reques11t");
return response;
})
},
methods: {
get: function() {
axios.get("package.json", {
params: {
userId: "999",
page: 5
},
headers: {
toKen: 'jack',
sb: 'aaa'
},
before: function() {
console.log("before aaa");
}
}).then(res => {
this.msg = res.data;
}).catch(function(error) {
console.log("error init" + error)
})
},
post: function() {
axios.post("package.1.json", {
userId: 888
}, {
headers: {
toKen: "tom"
}
}).then(res => {
this.msg = res.data
})
},
http: function() {
axios({
url: "package.json",
method: "get",
data: {
userId: 11
},
params: {
userId: "999",
page: 5
},
headers: {
toKen: 'http-test'
}
}).then(res => {
this.msg = res.data
})
}
}
})
</script>
</body> </html>
package.json
{
"result": [
["卫衣女", ""],
["卫衣2017新款女", ""],
["卫衣男", ""],
["卫衣女韩版潮学生 宽松 bf ulzzang", ""],
["卫衣女秋", ""],
["卫衣女 宽松", ""],
["卫衣oversize", ""],
["卫衣女连帽", ""],
["卫衣男连帽", ""],
["卫衣女薄款", ""]
]
}
需要开静态服务器比如用f2e-server 或express || koa || tomcat || nginx || apache 挑一个吧。
我喜欢用f2e-server
axios 讲解 和vue搭建使用的更多相关文章
- vue搭建项目之设置axios
首先要下载axios: npm install axios -S 要注意的是,axios不支持Vue.use();这种方式,可以改写原型链. 第二步就是新建axios存放位置: 在项目中src中单独建 ...
- 一篇文章带你了解axios网络交互-Vue
来源:滁州SEO 1 **什么是axios呢?**了解,并去使用它,对于axios发送请求的两种方式有何了解,以及涉及axios跨域问题如何解决. 对于axios网络交互,去使用axios的同时,首先 ...
- 02 . 处理axios的三个问题 ：设置基路径/axios挂载到vue原型/请求时自动携带token
//使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...
- 把axios封装为vue插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- vue搭建前端相关命令
Vue搭建.新建工程并打开浏览器调试的指令: 这四行命令就是我们接下来工作了. 1.npm install –global vue-cli 我们在安装好nodejs后就可以用到“npm”这个前缀指令, ...
- 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)
深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...
- webpack4+Vue搭建自己的Vue-cli
前言 最近在看webpack4,深感知识浅薄,这两天也一直在思考cli的配置,借助一些别人的实践,尝试自己搭建vue的项目,这里使用webpack4版本,之前我在网上查找别人的vue项目搭建,但是都是 ...
- vue搭建骨架屏步骤配置
1．什么是骨架屏幕? 在页面加载数据之前,有一段空白时间,要么用loading加载,要么就用骨架屏. 在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loa ...
- 「开源」SpringCloud+vue搭建的商城项目
最近在研究SpringCloud,看到一个基于SpringCloud+vue搭建的模拟商城项目.用来辅助学习SpringCloud企业级开发还是很有帮助的.强烈推荐!! 源码地址在最后. spring ...
随机推荐
- 从库函数解析STM32地址映射
STM32的存储映射是靠基地址和地址偏移实现的. 32位的M3有4GB的寻址空间,其中用于片上外设的有512MB,基地址为0x40000000. M3各外设基地址,包括片上外设.片上静态RAM和FLA ...
- 使用jQuery重用form表单并异步提交到其它action
在做页面开发的时候,有时候要重用表单的数据,并异步请求提交到其它的链接中,这个时候就能够使用jquery去改动表单的action值(记得使用后改动回来).并调用submit方法,当然后台的链接acti ...
- （4.7）sql server2008 中的merge
简介 Merge关键字是一个神奇的DML关键字.它在SQL Server 2008被引入,它能将Insert,Update,Delete简单的并为一句.MSDN对于Merge的解释非常的短小精悍:”根 ...
- 七牛云 如何配置域名的 CNAME
CNAME 简介 CNAME 即指别名记录,也被称为规范名字.这种记录允你将多个名字映射到同一台计算机. 当需要将域名指向另一个域名,再由另一个域名提供 ip地址,就需要添加 CNAME 记录. 为什 ...
- Hadoop的分布式架构改进与应用
1. 背景介绍 谈到分布式系统,就不得不提到Google的三驾马车:GFS[1],MapReduce[2]和BigTable[3]. 虽然Google没有开源这三个技术的实现源码,但是基于这三篇开源 ...
- javaEE中的spring配置笔记
0 JavaEE的工程目录 0.1 WebContent 项目的主目录,在eclipse新建工程时可以自己命名,部署时会把该文件夹的内容发布到tomcat的webapps里. 该目录下可以建立 ...
- nohup- Shell后台运行
&方式: Unix/Linux下一般想让某个程序在后台运行,很多都是使用 & 在程序结尾来让程序自动运行.比如我们要运行mysql在后台: /usr/local/my ...
- @RequestBody和@ResponseBody的使用情形以及RestTemplate的http报文转换
@RequestBody和@ResponseBody两个注解,分别完成请求报文到对象和对象到响应报文的转换. @RequestBody 1.@requestBody注解常用来处理content-typ ...
- 存储库之mongodb，redis，mysql
一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性 ...
- 20145219 《Java程序设计》实验五 Java网络编程及安全实验报告
20145219 <Java程序设计>实验五 Java网络编程及安全实验报告 实验内容 1．掌握Socket程序的编写: 2．掌握密码技术的使用: 3．设计安全传输系统. 实验步骤 我和2 ...