Skip to content

Commit ce92761

Browse files
keepfoolkeepfool
committed
Vue.js tutorial with vue-resource source code, based on Vue.js v1.0.25
1 parent 5ab8bf6 commit ce92761

23 files changed

+3298
-326
lines changed

‎03.Ajax/jquery-zepto/account-vue.html

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
10+
<body>
11+
12+
<div id="app">
13+
<div class="container">
14+
<span>User Name:{{ userName }}</span>
15+
</div>
16+
<div class="container">
17+
<div class="left">
18+
<div class="form-group">
19+
<label>Email</label>
20+
<input type="text" v-model="registerModel.email" />
21+
</div>
22+
<div class="form-group">
23+
<label>Password</label>
24+
<input type="text" v-model="registerModel.password" />
25+
</div>
26+
27+
<div class="form-group">
28+
<label>Confirm Password</label>
29+
<input type="text" v-model="registerModel.confirmPassword" />
30+
</div>
31+
32+
<div class="form-group">
33+
<label></label>
34+
<button id="register" @click="register">Register</button>
35+
</div>
36+
<div class="message">
37+
{{ msg }}
38+
</div>
39+
</div>
40+
<div class="right">
41+
<div class="form-group">
42+
<label>Email</label>
43+
<input type="text" v-model="loginModel.username" />
44+
</div>
45+
<div class="form-group">
46+
<label>Password</label>
47+
<input type="text" v-model="loginModel.password" />
48+
</div>
49+
<div class="form-group">
50+
<label></label>
51+
<button @click="login">Login</button>
52+
</div>
53+
<div>
54+
Access Token: <span id="accessToken"> {{ accessToken }}</span>
55+
</div>
56+
</div>
57+
</div>
58+
59+
<div class="container">
60+
<div class="form-group">
61+
<button @click="callApi">Call API</button>
62+
</div>
63+
</div>
64+
</div>
65+
<template id="dialog-template">
66+
<div class="dialogs">
67+
<div class="dialog" v-bind:class="{ 'dialog-active': show }">
68+
<div class="dialog-content">
69+
<div class="close rotate">
70+
<span class="iconfont icon-close" @click="close"></span>
71+
</div>
72+
<slot name="header"></slot>
73+
<slot name="body"></slot>
74+
<slot name="footer"></slot>
75+
</div>
76+
</div>
77+
<div class="dialog-overlay"></div>
78+
</div>
79+
</template>
80+
</body>
81+
<script src="js/vue.js"></script>
82+
<script src="js/zepto.js"></script>
83+
<script src="js/ajax-helper.js"></script>
84+
<script>
85+
Vue.component('modal-dialog', {
86+
template: '#dialog-template',
87+
props: ['show'],
88+
methods: {
89+
close: function() {
90+
this.show = false
91+
}
92+
}
93+
})
94+
95+
var ajaxHelper = new AjaxHelper()
96+
var demo = new Vue({
97+
el: '#app',
98+
data: {
99+
show: false,
100+
registerUrl: 'http://localhost:64474/api/Account/Register',
101+
loginUrl: 'http://localhost:64474/token',
102+
apiUrl: 'http://localhost:64474/api/values',
103+
registerModel: {
104+
email: '',
105+
password: '',
106+
confirmPassword: ''
107+
},
108+
loginModel: {
109+
username: '',
110+
password: '',
111+
grant_type: 'password'
112+
},
113+
msg: '',
114+
accessToken: '',
115+
userName: ''
116+
},
117+
methods: {
118+
register: function() {
119+
var vm = this
120+
callback = function() {
121+
vm.msg = "register successfully!"
122+
}
123+
ajaxHelper.post(vm.registerUrl, vm.registerModel, callback)
124+
},
125+
login: function() {
126+
127+
var vm = this
128+
callback = function(data) {
129+
console.log(data)
130+
vm.userName = data.userName
131+
vm.accessToken = data.access_token
132+
vm.msg = "login successfully!"
133+
}
134+
ajaxHelper.post(vm.loginUrl, vm.loginModel, callback)
135+
},
136+
callApi: function() {
137+
var vm = this
138+
headers = {}
139+
headers.Authorization = 'Bearer ' + vm.accessToken;
140+
141+
$.ajax({
142+
type: 'get',
143+
dataTye: 'json',
144+
url: vm.apiUrl,
145+
headers:headers,
146+
success: function(data){
147+
alert(data)
148+
console.log(data)
149+
},
150+
error: function(xhr, errorType, error){
151+
alert('Ajax request error!')
152+
}
153+
})
154+
}
155+
}
156+
})
157+
</script>
158+
159+
</html>

‎03.Ajax/jquery-zepto/account.html

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title></title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
10+
<body>
11+
<div class="container">
12+
13+
<div class="left">
14+
<div class="form-group">
15+
<label>Email</label>
16+
<input type="text" id="regEmail" />
17+
</div>
18+
<div class="form-group">
19+
<label>Password</label>
20+
<input type="text" id="regPassword" />
21+
</div>
22+
23+
<div class="form-group">
24+
<label>Confirm Password</label>
25+
<input type="text" id="regConfirmPassword" />
26+
</div>
27+
28+
<div class="form-group">
29+
<label></label>
30+
<button id="register">Register</button>
31+
</div>
32+
</div>
33+
<div class="right">
34+
<div class="form-group">
35+
<label>Email</label>
36+
<input type="text" id="logEmail" />
37+
</div>
38+
<div class="form-group">
39+
<label>Password</label>
40+
<input type="text" id="logPassword" />
41+
</div>
42+
<div class="form-group">
43+
<label></label>
44+
<button id="login">Login</button>
45+
</div>
46+
<div>
47+
Access Token: <span id="accessToken"></span>
48+
</div>
49+
</div>
50+
</div>
51+
52+
</body>
53+
<script src="js/vue.js"></script>
54+
<script src="js/zepto.js"></script>
55+
<script src="js/ajax-helper.js"></script>
56+
57+
<script>
58+
$(function() {
59+
60+
var ajaxHelper = new AjaxHelper()
61+
var feature = {
62+
configs: {
63+
registerUrl: 'http://localhost:64474/api/Account/Register',
64+
loginUrl: 'http://localhost:64474/token'
65+
},
66+
registerDone: function(data) {
67+
alert('register successfully!')
68+
},
69+
getRegisterData: function() {
70+
return {
71+
email: $('#regEmail').val(),
72+
password: $('#regPassword').val(),
73+
confirmPassword: $('#regConfirmPassword').val()
74+
}
75+
},
76+
register: function() {
77+
$('#register').click(function() {
78+
ajaxHelper.post(feature.configs.registerUrl, feature.getRegisterData(), feature.registerDone)
79+
})
80+
},
81+
getLoginData() {
82+
return {
83+
grant_type: 'password',
84+
username: $('#logEmail').val(),
85+
password: $('#logPassword').val(),
86+
}
87+
},
88+
loginDone: function(data) {
89+
$('#accessToken').text(data.access_token)
90+
},
91+
login: function() {
92+
$('#login').click(function() {
93+
ajaxHelper.post(feature.configs.loginUrl, feature.getLoginData(), feature.loginDone)
94+
})
95+
},
96+
setup: function() {
97+
feature.register()
98+
feature.login()
99+
}
100+
}
101+
feature.setup()
102+
})
103+
</script>
104+
105+
</html>

‎03.Ajax/vue-resource/fonts/demo.css

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
*{margin: 0;padding: 0;list-style: none;}
2+
/*
3+
KISSY CSS Reset
4+
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
5+
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
6+
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
7+
特色：1. 适应中文；2. 基于最新主流浏览器。
8+
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
9+
*/
10+
11+
/** 清除内外边距 **/
12+
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
13+
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
14+
pre, /* text formatting elements 文本格式元素 */
15+
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
16+
th, td /* table elements 表格元素 */ {
17+
margin: 0;
18+
padding: 0;
19+
}
20+
21+
/** 设置默认字体 **/
22+
body,
23+
button, input, select, textarea /* for ie */ {
24+
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
25+
}
26+
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
27+
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
28+
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
29+
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
30+
31+
/** 重置列表元素 **/
32+
ul, ol { list-style: none; }
33+
34+
/** 重置文本格式元素 **/
35+
a { text-decoration: none; }
36+
a:hover { text-decoration: underline; }
37+
38+
39+
/** 重置表单元素 **/
40+
legend { color: #000; } /* for ie6 */
41+
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
42+
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
43+
/* 注：optgroup 无法扶正 */
44+
45+
/** 重置表格元素 **/
46+
table { border-collapse: collapse; border-spacing: 0; }
47+
48+
/* 清除浮动 */
49+
.ks-clear:after, .clear:after {
50+
content: '\20';
51+
display: block;
52+
height: 0;
53+
clear: both;
54+
}
55+
.ks-clear, .clear {
56+
*zoom: 1;
57+
}
58+
59+
.main {padding: 30px 100px;}
60+
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
61+
62+
.helps{margin-top:40px;}
63+
.helps pre{
64+
padding:20px;
65+
margin:10px 0;
66+
border:solid 1px #e7e1cd;
67+
background-color: #fffdef;
68+
overflow: auto;
69+
}
70+
71+
.icon_lists li{
72+
float:left;
73+
width: 100px;
74+
height:180px;
75+
text-align: center;
76+
}
77+
.icon_lists .icon{
78+
font-size: 42px;
79+
line-height: 100px;
80+
margin: 10px 0;
81+
color:#333;
82+
-webkit-transition: font-size 0.25s ease-out 0s;
83+
-moz-transition: font-size 0.25s ease-out 0s;
84+
transition: font-size 0.25s ease-out 0s;
85+
86+
}
87+
.icon_lists .icon:hover{
88+
font-size: 100px;
89+
}

0 commit comments

Comments
 (0)