Slog38_支配vue框架初阶项目之博客网站-单页-登陆和注册的跳转

news/2024/4/27 18:49:38/文章来源:https://blog.csdn.net/weixin_34124651/article/details/88754061

ArthurSlog
SLog-38
Year·1
Guangzhou·China
Aug 14th 2018

GitHub
掘金主页
简书主页
segmentfault

因为现实的黑暗所以才渴望理想的人生缺少什么才会渴望什么人往往都是后知后觉所以才会后悔

开发环境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 = thisxhr.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 = thisxhr.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()}}
})