Slog35_支配vue框架初阶项目之博客网站-注册页面-展示注册结果

news/2024/4/28 2:29:47/文章来源:https://blog.csdn.net/weixin_34318272/article/details/88749766

ArthurSlog
SLog-35
Year·1
Guangzhou·China
Aug 11th 2018

关注微信公众号“ArthurSlog”

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 框架，同时参考了 webAPI
然后在 js 文件里使用 XMLHttpRequest 对象
js 文件操作浏览器通过 http协议向服务器传递用户输入的信息数据，这样实现了一个用户注册的功能
服务端把客户端（浏览器）传送过来的数据，存储进数据库，然后给客户端（浏览器）返回一个执行结果
本篇就是从服务端获取注册功能的执行结果，然后在页面上显示出来
下面给出修改后的代码

signup.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>signup_ArthurSlog</title>
</head><body><div id="signup-container"><div>This is signup's page by ArthurSlog</div><p>Singup</p><form id="form" 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><a href="./index.html">Return index's page</a><br><br><div>{{ commits }}</div></div><script src="./js/signup.js"></script>
</body></html>

再看一下 js 文件

signup.js

var host = 'http://127.0.0.1:3000/signup?';var signup_container = new Vue({el: '#signup-container',data: {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},methods: {addUser: function () {var xhr = new XMLHttpRequest()var self = thisxhr.open('GET', host + '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()}}})

注意看到 html 文件里新添加的部分

<div>{{ commits }}
</div>

我们根据 vue.js 框架，在这里双大括号里的 commits 与 js 文件里的 commits 相关联
然后我们希望当服务端把执行结果完整的返回的客户端（浏览器）之后，把这个返回的值赋予 commits 这个对象，然后重新渲染页面（vue.js 做的事情），这样我们在页面上就可以看到执行了结果了，也就知道注册是成功或者失败了
当然，在这里，我们之前编写服务端代码的时候，在逻辑里写了“如果注册成功，返回‘Signup Successful！’这样的字符串”，所以，当注册成功的时候，我们在页面上看到的，就会出现 “Signup Successful！”
现在，我们看下 js 文件里的改动：

methods: {addUser: function () {var xhr = new XMLHttpRequest()var self = thisxhr.open('GET', host + '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()}
}

其中，把 xhr.open() 这个函数执行完的返回值赋予 self 这个对象
然后，根据 webAPI，可知：

XMLHttpRequestEventTarget.onload 是 XMLHttpRequest 请求成功完成时调用的函数。callback 是请求成功完成时要执行的函数。它接收一个 ProgressEvent 对象作为它的第一个参数。this 的值(即上下文)与此回调的 XMLHttpRequest 相同。

使用示例：

XMLHttpRequestEventTarget.onload

var xmlhttp = new XMLHttpRequest(),method = 'GET',url = 'https://developer.mozilla.org/';xmlhttp.open(method, url, true);
xmlhttp.onload = function () {// 处理取回的数据(在 xmlhttp.response 中找到)
};
xmlhttp.send();