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 ...
随机推荐
- SSIS服务无法登录的解决方案
现象1:登录SSIS报权限认证失败. 授予对 Integration Services 服务的访问权限 运行 Dcomcnfg.exe. Dcomcnfg.exe 提供用于修改注册表中的某些设置的用户 ...
- Elasticsearch 5.4.3实战--Java API调用：批量写入数据
这个其实比较简单,直接上代码. 注意部分逻辑可以换成你自己的逻辑 package com.cs99lzzs.elasticsearch.service.imp; import java.sql.Tim ...
- vim块编辑删除、插入、替换【转】
删除列 1.光标定位到要操作的地方. 2.CTRL+v 进入“可视 块”模式,选取这一列操作多少行. 3.d 删除. 插入列 插入操作的话知识稍有区别.例如我们在每一行前都插入"() & ...
- ES6学习笔记五（promise异步）
知识点1:rosolve是执行下一步then() // Promise { let ajax=function(){ console.log('执行2'); return new Promise(fu ...
- html单选按钮用jQuery中prop()方法设置
模拟单选按钮时用jQuery,prop方法来设置. 赋默认选中值:$("#" + id).find("input:radio[value='" + state ...
- boost 文件系统
第 9 章 文件系统 目录 9.1 概述 9.2 路径 9.3 文件与目录 9.4 文件流 9.5 练习 该书采用 Creative Commons License 授权 9.1. 概述 库 Boo ...
- 题解-USACO18DEC Balance Beam详细证明
(翻了翻其他的题解,觉得它们没讲清楚这个策略的正确性) Problem 洛谷5155 题意概要:给定一个长为\(n\)的序列,可以选择以\(\frac 12\)的概率进行左右移动,也可以结束并得到当前 ...
- html5 - drag 拖拽
参考资料: 张鑫旭 : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B% ...
- nginx 403 forbidden
2018年3月9日14:11:59 总结一下: 1. 查看目录或者文件是否是可读可执行 2. 查看nginx配置的server -> location -> index指令, 看其列出的入 ...
- mysql 命令行常用命令
1.显示数据库列表. show databases; 2.显示库中的数据表: use mysql; show tables; 3.显示数据表的结构: describe 表名; 4.建库: cr ...