node.js vue-axios和vue-resource
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-resource</title>
<script src="../../node_modules/"></script>
<script src="../../node_modules/vue-resource/dist/vue-resource.js"></script>
</head>
<body>
<div id="app">
<h2>vue-resource演示</h2>
<a href="#" @click="sendGet">发送Get请求</a>
<a href="#" @click="sendPost">发送Post请求</a>
<a href="#" @click="sendJsonp">发送Jsonp请求</a>
<a href="#" @click="send">全局函数</a>
<p v-text="response"></p>
</div> <script> new Vue({
el:"#app",
data:{
response:'',
msg:''
},
methods:{
sendGet: function () {
var _this = this;
//http://www.imooc.com/course/ajaxskillcourse?cid=796
this.$http.get("/login",{
params:{
userId:"123"
},
headers:{
access_token:"abcded"
}
}).then(function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
}, function (error) {
console.log("error:"+error);
_this.response = error;
});
},
sendPost: function () {
var _this = this;
var params = {
username:"sunnyboysoft@163.com",
password:"hdeeciu4ZauaDaWF/g+92R8FqNMVA8zoX0UWHinjRM6ND8PMFP9Bt2dr0vGUzZPKXDkzhOJbn3Le0ZcbCiQ1Nx7AIvsrwMzjcSStWNzdyBftzsJS0xsUrtmhqzqaWquXKQoEYgDrP+mNrv0C2ITSpbs+QOql4fPvNSWeAVu54XE=",
remember:"1",
pwencode:"1",
browser_key:"c1eafecb03c5ef07651fb7bd9a7f4b72",
referer:"http://www.imooc.com"
}
//http://www.imooc.com/passport/user/login
this.$http.post("/login",params).then(function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
}, function (error) {
console.log("error:"+error);
_this.response = error;
});
},
sendJsonp: function () {
var _this = this;
this.$http.jsonp("http://www.imooc.com/course/ajaxskillcourse?cid=796",{
params:{
userId:"1001"
}
}).then(function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
}, function (error) {
console.log("error:"+error);
});
},
send: function () {
var _this = this;
this.$http({
url:"package.json",
method:"get",
params:{
userId:"103"
},
headers:{
token:"123"
},
timeout:5,
before: function () {
console.log("before init")
}
}).then(function (res) {
this.msg = res.data;
});
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../node_modules/requirejs/require.js"></script>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../node_modules/axios/dist/axios.js"></script>
<script src="../../node_modules/jsonp/index.js"></script>
</head>
<body>
<div id="app">
<h2>axios演示</h2>
<a href="#" @click="sendGet">发送Get请求</a>
<a href="#" @click="sendPost">发送Post请求</a>
<a href="#" @click="sendJsonp">发送Jsonp请求</a>
<a href="#" @click="send">全局函数</a>
<p v-text="response"></p>
</div>
<script>
// Vue.use(axios);
Vue.prototype.$http = axios;
new Vue({
el:"#app",
data:{
response:''
},
methods:{
sendGet: function () {
var _this = this;
//
axios.get("/login",{
params:{
userId:"123"
},
headers:{
access_token:"abcded"
}
}).then(function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
}).catch(function (err) {
console.log("error:"+err);
});
},
sendPost: function () {
var _this = this;
var params = {
username:"sunnyboysoft@163.com",
password:"hdeeciu4ZauaDaWF/g+92R8FqNMVA8zoX0UWHinjRM6ND8PMFP9Bt2dr0vGUzZPKXDkzhOJbn3Le0ZcbCiQ1Nx7AIvsrwMzjcSStWNzdyBftzsJS0xsUrtmhqzqaWquXKQoEYgDrP+mNrv0C2ITSpbs+QOql4fPvNSWeAVu54XE=",
remember:"1",
pwencode:"1",
browser_key:"c1eafecb03c5ef07651fb7bd9a7f4b72",
referer:"http://www.imooc.com"
}
//http://www.imooc.com/passport/user/login
axios.post("/login",params).then(function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
}).catch(function (err) {
console.log("error:"+err);
});
},
sendJsonp: function () {
var _this = this;
jsonp("http://www.imooc.com/course/ajaxskillcourse?cid=796",{
params:{
userId:"1001"
}
},function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
});
},
send: function () {
var _this = this;
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(function (res) {
console.log("res:"+res.data.msg);
_this.response = res.data;
}).catch(function (err) {
console.log("error:"+err);
});;
}
}
});
</script>
</body>
</html>
ES6的一些语法：
<script>
function sum(x,y,z){
let total=0;
if(x) total+=x;
if(y) total+=y;
if(z) total+=z;
console.log(`total:${total}`)
}
sum(4,"",9); function sum2(...m) {
let total = 0;
for (var i of m) {
total+=i;
}
console.log(`total:${total}`)
}
sum2(4,8,9,10); let sum3=(...m)=>{
let total = 0;
for (var i of m) {
total+=i;
}
console.log(`total:${total}`)
}
sum3(4,8,9,10); var [x,y]=[4,8]
console.log(...[4,8]); let arr1=[1,3]; let arr2=[4,8];
console.log("concat",arr1.concat(arr2)); // [...arr1,...arr2]
// var [x,y]=[4,8]; var [x,...y]=[4,8,10,30]
let [a,b,c]="ES6";
let xy=["...ES6"];
</script>
Promise的用法：
let checkLogin=function () {
return new Promise(function (resolve,reject){
let flag=document.cookie.indexOf("userId")>-1?true:false;
if(flag=true){
resolve({
status:0,
result:true
})
}else {
reject("error");
}
})
};
let getUserInfo=()=>{
return new Promise((resolve,reject)=>{
let userInfo={
userId:"101"
}
resolve(userInfo);
});
}
checkLogin().then((res)=>{
if(res.status==0)
{
console.log("login success");
return getUserInfo();
}
}).catch((error)=>{
console.log(`error:${error}`);
}).then((res2)=>{
console.log(`userId:${res2.userId}`)
});
Promise.all([checkLogin(),getUserInfo()]).then(([res1,res2])=>{
console.log(`result1:${res1.result},result2:${res2.userId}`)
})
node.js vue-axios和vue-resource的更多相关文章
- Vue.js：安装node js到构建一个vue并启动它
ylbtech-Vue.js:从安装node js到构建一个vue并启动它 1.返回顶部 1. 1.安装node js 下载地址:http://nodejs.cn/download/2.安装完成后运行 ...
- Vue-cli+Vue.js2.0+Vuex2.0+vue-router+es6+webpack+node.js脚手架搭建和Vue开发实战
Vue.js是一个构建数据驱动的web界面的渐进式框架.在写这边文章时Vue版本分为1.0++和2.0++,这个是基于Vue2.0的项目. Vue-cli是构建单页应用的脚手架,这个可是官方的. Vu ...
- 从安装node js到构建一个vue并启动它
1.安装node js 下载地址:http://nodejs.cn/download/2.安装完成后运行Node.js command prompt(node -v查看安装版本) 3.安装npm(由于 ...
- 安装node.js、webpack、vue 和vue-cli 以及安装速度慢/不成功的解决方法
1.安装node.js 地址:https://nodejs.org/en/ 下载安装软件之后,点击下一步即可 打开dos窗口,输入cmd能快速打开,输入npm -v 和 node -v 能显示出版本 ...
- Node.js的基本操作(使用Vue前必学)
安装 Windows下不需要讲,Mac下的安装步骤: https://www.cnblogs.com/bobi1234/category/1367458.html 全局安装淘宝镜像 npm insta ...
- Node.js 【CORS(cross origin resource sharing) on ExpressJS之笔记】
app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*" ...
- Node.js、npm、vue-cli 的安装配置环境变量
我安装node.js是为了学习vue,需要用到npm,所以就把node.js安装了,安装node.js会带有npm的安装. 在安装node.js之前,我们需要了解以下三个内容. npm: Nodejs ...
- vue中axios调用接口和用node.js跨域
<script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...
- 基于Vue+node.js的个人博客
前言 作为一个年轻的程序员,而且是作为一个未来的前端工程师,怎么能没有一个属于自己的博客呢,于是乎在暑假咸鱼了一个多月后开始了我的博客的编写. 技术栈 前端 vue.js+scss 因为当时没学vu ...
- vue+node+mongoDB 火车票H5（六）---城市列表保存到MongoDB数据库并且启用node.js服务
把车站列表保存到数据库,并且从本地创建服务 node.js创建httpserver 1.搭建基于express的运行环境 全局安装express-gengerator cnpm install -g ...
随机推荐
- C++ std::pair的用法
1 pair的应用 pair是将2个数据组合成一个数据,当需要这样的需求时就可以使用pair,如stl中的map就是将key和value放在一起来保存.另一个应用是,当一个函数需要返回2个数据的时候, ...
- Linux 网卡驱动学习（五）（收发包具体过程）【转】
转自:https://blog.csdn.net/xy010902100449/article/details/47362787 版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...
- MySQL没有备份怎么恢复被drop的表(利用undrop-for-innodb)
介绍: 也许大家都难以理解,这么重要的数据为啥不备份(或者备份不可用)?而且还任性的drop table了.显然有备份是最好的,但是它们并不总是可用的.这种情况令人恐惧,但并非毫无希望.在许多 ...
- CF449C：Jzzhu and Apples
题意简述 给出正整数n,你要把1-n之间的正整数分成尽可能多组,使得每一组两个数的最大公约数大于1;输出能分成最多组的个数,并按任意顺序输出每组的两个数. 很妙的一道题. 首先我们考虑去处理每个质数的 ...
- 使用lld自动发现监控多实例redis
zabbix 可以通过常见的手段监控到各种服务,通过编写脚本来获取返回值并将获取到的值通过图形来展现出来,包括(系统.服务.业务)层面.可是有些时候在一些不固定的场合监控一些不固定的服务就比较麻烦.例 ...
- OpenStack实践系列⑥构建虚拟机实例
OpenStack实践系列⑥构建虚拟机实例 四.创建一台虚拟机图解网络,并创建一个真实的桥接网络 创建一个单一扁平网络(名字:flat),网络类型为flat,网络适共享的(share),网络提供者:p ...
- mgo mode说明
mgo 是 MongoDB 的 Golang 驱动. 连接池 我们通过 Dial 函数创建一个新的 session: session, err := mgo.Dial(url) 创建的 session ...
- 快速安装freeswitch
前不久在Centos 6.4上安装了一台Freeswitch,测试已经OK.为了测试FS 的集群效果,从新在安装一台FS,快速安装的过程如下: 方案一:快速安装前提:不用重新下载Freeswitch. ...
- .NET NPOI操作Excel 让单元格的内容换行
HSSFWorkbook workbook = new HSSFWorkbook(); // 工作簿 ISheet sheet = workbook.CreateSheet("会员列表&qu ...
- 2)实现github自动登陆获取信息
# -*- coding:utf-8 -*- # __author__ = 'lixiang' # 实现github自动登陆和获取数据 import requests from bs4 import ...