-
ArthurSlog
-
SLog-38
-
1 Year,
-
Through China,
-
Aug 14th 2018
It is because of the darkness of reality that we long for an ideal life. What do we long for when we lack it
Development Environment MacOS(High Sierra 10.13.5)
Required information and information sources:
-
HTTP overview
-
HTTP
-
How does the Internet work
-
How does the Web work
-
Uniform Resource Locator (URL)
-
What is a hyperlink
-
Creating hyperlinks
-
AJAX is Asynchronous JavaScript And XML
-
XMLHttpRequest
-
Using files from web applications
Start coding
- This time, we realized the page jump after registration and login, which used to jump to a static page we wrote, now we use vue.js framework to achieve a single page application, rendering the data returned by the server on the original page
client/app.html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<! -- Development environment version, including helpful command line warnings -->
<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="Login">
</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="[email protected]">
</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="Complete registration">
</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>
Copy the code- The following part of the code is modified
client/app.html
<template id="returnResult" v-else-if="pagestate === '3'">
{{ commits }}
</template>
Copy the code-
We use the template syntax v-if of the vue.js framework to determine which parts to render
-
The rendering logic is changed by 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 () {
// When clicking login, render the data returned from the server on the page and hide the rest of the page
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 () {
// When registering, render the data returned from the server on the page and hide the rest of the page
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()
}
}
})
Copy the code-
Now, open your browser and type 127.0.0.1:3000/app.html
-
Click signin button, enter account: ArthurSlog password: ArthurSlog, normal execution, the page will only render the data results returned by the server
-
So far, we have realized the login, registration page jump.
Please follow my wechat account ArthurSlog