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 ...
随机推荐
- Elasticsearch 5.4.3实战--Java API调用：搜索
ES有多种查询方式,我自己的业务是需要对多个字段进行查询,具体实现类代码如下. package com.cs99lzzs.elasticsearch.service.imp; import java. ...
- [Jenkins]CentOS7下Jenkins搭建
最近在倒腾Kubernetes的一些东西,这次需要用到Jenkins来实现自动化构建.来讲一讲搭建的整个过程. Jenkins是什么 Jenkins提供了软件开发的持续集成服务.它运行在Servlet ...
- linux添加swap分区【转】
概述 添加交换分区主要是因为安装oracle时碰到交换分区太小时无法安装的情况,这时候就需要添加交换分区了. 操作简介 增加swap分区方法: 1.新建磁盘分区作为swap分区 2.用文件作为swap ...
- sort和uniq去重操作【转】
去除重复行 sort file |uniq 查找非重复行 sort file |uniq -u 查找重复行 sort file |uniq -d 统计 sort file | uniq - ...
- Ubuntu 关闭触摸板
1.关闭 sudo modporbe -r psmouse 2.开启 sudo modprobe psmouse
- $Django content_type组件 缓存组件
1 content_type组件(只能方便插入添加) 需求:课程,学位课(不同的课程字段不一样),价格策略 #免费课 class Free_classes (models.Model): id = ...
- $Django 表设计，登陆图片验证
pip3 install pillow #PIL登陆图片验证(未实现局部刷新)详细:https://www.cnblogs.com/qiangyuge/p/8025168.htmldef get_co ...
- windows IDEA注册码激活方法（2018.4.8）靠谱可用！
简介 intellij idea 2018注册码是针对intellij idea 2018软件研发推出,它的使用需要和激活补丁一起使用,安装包里面也拥有破解补丁, 所有无需在进行单独的下载:不过如果选 ...
- python的生成器（斐波拉契数列（Fibonacci））
代码: 函数版本: #斐波拉契数列(Fibonacci) def fib(max): n=0 a,b=0,1 while n < max: a,b = b,a+b n = n+1 return ...
- Netflix正式开源其API网关Zuul 2
5 月 21 日,Netflix 在其官方博客上宣布正式开源微服务网关组件 Zuul 2.Netflix 公司是微服务界的楷模,他们有大规模生产级微服务的成功应用案例,也开源了相当多的微服务组件(详见 ...