-
ArthurSlog
-
SLog-38
-
Year·1
-
Guangzhou·China
-
Aug 14th 2018
因为现实的黑暗 所以才渴望理想的人生 缺少什么 才会渴望什么 人往往都是后知后觉 所以才会后悔
开发环境MacOS(High Sierra 10.13.5)
需要的信息和信息源：
-
HTTP概述
-
HTTP
-
互联网是如何工作的
-
万维网是如何工作的
-
统一资源定位符(URL)
-
什么是超链接
-
创建超链接
-
AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）
-
XMLHttpRequest
-
Using files from web applications
开始编码
- 这一次，我们实现注册和登陆之后的页面跳转，以前是跳转到一个我们写好的静态页面，现在我们使用 vue.js 框架来实现单页应用，在原来的页面上渲染出服务端返回的数据
client/app.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>signin_ArthurSlog</title>
</head>
<body>
<div id="signup-container">
<template class="container" v-if="pagestate === '0'">
<div>This is index's page by ArthurSlog</div>
<br>
<button v-on:click="signin_index">Signin</button>
<br>
<button v-on:click="signup_index">Signup</button>
</template>
<template id="Signin" v-else-if="pagestate === '1'">
<div>This is signin's page by ArthurSlog</div>
<p>Singin</p>
<form id="form1" v-on:submit.prevent="signin">
<br>
<div>
Account: {{ name_signin }}
<br>
<input type="text" v-model="name_signin" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password_signin }}
<br>
<input type="text" v-model="password_signin" placeholder="password">
</div>
<br>
<input type="submit" value="登陆">
</form>
<br>
<button v-on:click="return_index">ReturnIndex</button>
</template>
<template id="Signup" v-else-if="pagestate === '2'">
<div>This is signup's page by ArthurSlog</div>
<p>Singup</p>
<form id="form2" v-on:submit.prevent="addUser">
<br>
<div>
Account: {{ name }}
<br>
<input type="text" v-model="name" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password }}
<br>
<input type="text" v-model="password" placeholder="password">
</div>
<br>
<br>
<div>
Again Password: {{ repassword }}
<br>
<input type="text" v-model="repassword" placeholder="repassword">
</div>
<br>
<br>
<div>
First Name: {{ firstname }}
<br>
<input type="text" v-model="firstname" placeholder="firstname">
</div>
<br>
<br>
<div>
Last Name: {{ lastname }}
<br>
<input type="text" v-model="lastname" placeholder="lastname">
</div>
<br>
<br>
<div>
Birthday: {{ birthday }}
<br>
<input type="text" v-model="birthday" placeholder="2000/08/08">
</div>
<br>
<br>
<div>
<span>Sex: {{ currentSex }}</span>
<br>
<input type="radio" id="sex" value="male" v-model="currentSex">
<label for="sex">male</label>
<br>
<input type="radio" id="sex" value="female" v-model="currentSex">
<label for="sex">female</label>
</div>
<br>
<br>
<div>
<span>Age: {{ currentAge }}</span>
<br>
<select v-model="currentAge" id="age">
<option disabled value="">Select</option>
<option v-for="age in ages">{{ age }}</option>
</select>
</div>
<br>
<br>
<div>
Wechart: {{ wechart }}
<br>
<input type="text" v-model="wechart" placeholder="wechart's name">
</div>
<br>
<br>
<div>
QQ: {{ qq }}
<br>
<input type="text" v-model="qq" placeholder="12345678">
</div>
<br>
<br>
<div>
Email: {{ email }}
<br>
<input type="text" v-model="email" placeholder="12345678@qq.com">
</div>
<br>
<br>
<div>
Contury: {{ contury }}
<br>
<input type="text" v-model="contury" placeholder="China">
</div>
<br>
<br>
<div>
Address: {{ address }}
<br>
<input type="text" v-model="address" placeholder="Guangzhou">
</div>
<br>
<br>
<div>
Phone: {{ phone }}
<br>
<input type="text" v-model="phone" placeholder="138********">
</div>
<br>
<br>
<div>
Websize: {{ websize }}
<br>
<input type="text" v-model="websize" placeholder="xxx.com">
</div>
<br>
<br>
<div>
Github: {{ github }}
<br>
<input type="text" v-model="github" placeholder="Github's URl">
</div>
<br>
<br>
<div>
Bio: {{ bio }}
<br>
<input type="text" v-model="bio" placeholder="This is the world~">
</div>
<br>
<br>
<input type="submit" value="完成注册">
</form>
<button v-on:click="addUser">addUser</button>
<br>
<button v-on:click="return_index">ReturnIndex</button>
<br>
</template>
<template id="returnResult" v-else-if="pagestate === '3'">
{{ commits }}
</template>
</div>
<script src="./js/signup.js"></script>
</body>
</html>
复制代码- 修改的是下面这部分代码
client/app.html
<template id="returnResult" v-else-if="pagestate === '3'">
{{ commits }}
</template>
复制代码-
我们使用 vue.js 框架的模版语法 v-if，来判断渲染哪些部分
-
其中通过 pagestate 来改变渲染逻辑
client/js/signup.js
var host = 'http://127.0.0.1:3000/';
var signup_container = new Vue({
el: '#signup-container',
data: {
name_signin: '',
password_signin: '',
name: '',
password: '',
repassword: '',
firstname: '',
lastname: '',
birthday: '',
sexs: ['male', 'female'],
currentSex: 'male',
ages: ['1', '2', '3', '4', '5', '6', '7', '8',
'9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
currentAge: '18',
wechart: '',
qq: '',
email: '',
contury: '',
address: '',
phone: '',
websize: '',
github: '',
bio: '',
commits: null,
pagestate: '0'
},
methods: {
return_index: function() {
this.pagestate = '0'
},
signin_index: function () {
this.pagestate = '1';
},
signup_index: function () {
this.pagestate = '2'
},
signin: function () {
//当点击登陆的时候，在页面上渲染从服务端返回的数据，把其他的部分隐藏掉
this.pagestate = '3'
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', host + 'signin?' + 'name=' + self.name_signin + '&password=' + self.password_signin, true)
xhr.onload = function () {
self.commits = xhr.responseText
}
xhr.send()
},
addUser: function () {
//当点击注册的时候，在页面上渲染从服务端返回的数据，把其他的部分隐藏掉
this.pagestate = '3'
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', host + 'signup?' + 'name=' + self.name + '&password=' + self.password + '&firstname=' +
self.firstname + '&lastname=' + self.lastname + '&birthday=' + self.birthday
+ '&sex=' + self.currentSex + '&age=' + self.currentAge + '&wechart=' + self.wechart
+ '&qq=' + self.qq + '&email=' + self.email + '&contury=' + self.contury
+ '&address=' + self.address + '&phone=' + self.phone + '&websize=' + self.websize
+ '&github=' + self.github + '&bio=' + self.bio, true)
xhr.onload = function () {
self.commits = xhr.responseText
}
xhr.send()
}
}
})
复制代码-
现在，打开浏览器，输入 127.0.0.1:3000/app.html
-
点击 signin 按钮，输入 账号： ArthurSlog 密码： ArthurSlog，正常执行，页面只会渲染服务端返回的数据结果
-
至此，我们实现了登陆、注册的页面跳转。