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 ...
随机推荐
- 高并发的socket的高性能设计【转】
转自:https://blog.csdn.net/quincyfang/article/details/44654351 高性能数据传输系统的框架设计 1 引言 随着互联网和物联网的高速发展,使用网络 ...
- cu命令
选项: -b:仅显示行中指定直接范围的内容: -c:仅显示行中指定范围的字符: -d:指定字段的分隔符,默认的字段分隔符为“TAB”: -f:显示指定字段的内容: -n:与“-b”选项连用,不分割多字 ...
- 发布自己的类库到NuGet
NuGet是一个为大家所熟知的Visual Studio扩展,通过这个扩展,开发人员可以非常方便地在Visual Studio中安装或更新项目中所需要的第三方组件,同时也可以通过NuGet来安装一些V ...
- Apollo 框架的剖析1
百度Apollo 自动驾驶开源模块分析 从今天开始研究学习apollo的源码,apollo 3.0源码. apollo 3.0的系统框图 文件目录简介 apollo根目录 ├── .github/IS ...
- 如何将Tomcat添加到服务中【笔记】
tomcat中自带有添加服务的批处理,所以只需要从命令行界面进入到需要添加到服务的tomcat目录中,执行service.bat install 命令就可以自动添加默认名称的tomcat服务了. 该批 ...
- daemon.debug hostapd: wlan0: WPA rekeying GTK
现象描述:client连接上AP后,切换接口(譬如lan口的)模式,静态地址和dhcp模式切换后,一段时间后断开连接,再也连接不上,ap侧日志如下: Wed Nov 8 14:39:31 2017 ...
- dig常用命令
Dig是域信息搜索器的简称(Domain Information Groper),使用dig命令可以执行查询域名相关的任务. ###1. 理解dig的输出结果 $ dig chenrongrong.i ...
- LabVIEW版本控制（转）
原文转自https://www.cnblogs.com/EltonLiang/p/7105034.html 在我们工作中,必然会遇到代码的多个版本问题,也必然会遇到版本控制问题.如果所在的公司具有良好 ...
- 彻底删除mysql服务（清理注册表）
前言 由于安装某个项目的执行文件,提示要卸载MySQL以便它自身MySQL安装,然后我禁用了MYSQL服务,再把这个文件夹删除后,发现还是提示请卸载MYSQL服务. ----------------- ...
- shiro使用
web.xml配置 <filter> <filter-name>shiroFilter</filter-name> <filter-class>org. ...