- ArthurSlog
- SLog-34
- Year·1
- Guangzhou·China
- Aug 10th 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
开始编码
- 在Slog33里，使用了 vue.js 框架让 html 文件里的元素和 js 文件里的代码互相关联，以便于在 js 文件里使用 js 代码对 html 文件里的元素进行控制；
- 在 js 文件里，使用 vue.js 的规则编写 js 代码，在这里就有个问题了，api是参考 webAPI 还是 vue.js 框架的 API？这个问题，留着在开发过程中解决
- 在 js 里编写的 js 代码，其实做的事情就是 “获取 html 文件里元素的数据”、“获取 html 文件里元素的数据，并对数据进行处理”、“获取 html 文件里元素的数据，并传送给服务端”、“获取 html 文件里元素的数据，并传送给服务端，等待接收服务端传来的数据” 等这些操作
- 上面说的这些东西不需要背（因为你也背不住），只要在开发过程中参照 vue.js官方文档 并结合 web规范就可以编写需要的功能，一般情况下，这些文档都是类似于说明说或者字典的存在，然而....，并不是每个人都会按照这样的思路去做，如果你觉得有更适合你自己的方法，何妨一试，不过请记得控制你的时间成本
- 如果你根据我Slog33中的 html 文件修改，最终的结果是数据关联会有一点问题，所以先让我们把问题先解决（目前为止，我们说的只是前端的 html 和 js）
signup.html
signup_ArthurSlog
- 再看一下 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', 'null']
},
methods: {
addUser: function () {
var xhr = new XMLHttpRequest()
xhr.open('GET', host + 'name=' + this.name + '&password=' + this.password + '&firstname=' +
this.firstname + '&lastname=' + this.lastname + '&birthday=' + this.birthday
+ '&sex=' + this.currentSex + '&age=' + this.currentAge + '&wechart=' + this.wechart
+ '&qq=' + this.qq + '&email=' + this.email + '&contury=' + this.contury
+ '&address=' + this.address + '&phone=' + this.phone + '&websize=' + this.websize
+ '&github=' + this.github + '&bio=' + this.bio, true)
xhr.send()
}
}
})- 注意看到 html 文件里的 form 部分
- 在这里 v-on:submit 属于 vue.js 的模版语法，作用是 “可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码”
- 像上面这样，在 js 文件里的 “method” 里创建一个 addUser 的方法，当你在 html 上点击完成注册的按钮的时候，就会调用 addUser 这个方法，方法就会执行你自己编写的逻辑
- 我们现在需要让这个 addUser 方法把我们填写的注册信息，传送给服务端，并等待服务端的执行结果（成功或者失败），然后在页面上显示出来执行的结果
- 去哪里找到这样的方法呢？首先想到的是 webAPI，试着去官网找一下
- 再来看看，根据 vue.js 框架的介绍中，vue 的 js 文件结构，因此在方法中：
methods: {
addUser: function () {
var xhr = new XMLHttpRequest()
xhr.open('GET', host + 'name=' + this.name + '&password=' + this.password + '&firstname=' +
this.firstname + '&lastname=' + this.lastname + '&birthday=' + this.birthday
+ '&sex=' + this.currentSex + '&age=' + this.currentAge + '&wechart=' + this.wechart
+ '&qq=' + this.qq + '&email=' + this.email + '&contury=' + this.contury
+ '&address=' + this.address + '&phone=' + this.phone + '&websize=' + this.websize
+ '&github=' + this.github + '&bio=' + this.bio, true)
xhr.send()
}
}- XMLHttpRequest标准定义了一个API，它提供脚本客户端功能，用于在客户端和服务器之间传输数据；其中的 xhr.open() 方法，其实就是给服务端发送 http 请求，所以使用这个方法的时候，会生如下这样的请求，并发送给服务端：
http://127.0.0.1:3000/signup?name=???&password=???... 这后面的依此类推，我就不写了，因为很长- 上面的请求中，需要包含用户输入的数据，比如name、password等等，其中的 ？？？三个问号，就是代表用户输入的具体的值，在方法中，我们使用 this.name 这样的语法来获取用户输入的值，为什么不能直接使用 name 呢？因为我试过了，不行，哈哈，以后会解释的
xhr.open('GET', host + 'name=' + name + '&password=' + password + '&firstname=' +
firstname + '&lastname=' + lastname + '&birthday=' + birthday
+ '&sex=' + currentSex + '&age=' + currentAge + '&wechart=' + wechart
+ '&qq=' + qq + '&email=' + email + '&contury=' + contury
+ '&address=' + address + '&phone=' + phone + '&websize=' + websize
+ '&github=' + github + '&bio=' + bio, true)- 再来看一下 xhr.send() 方法，参考 官方说明
XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。
如果没有使用setRequestHeader（）方法设置 Accept 头部信息，则会发送带有* / *的Accept 头部。- ok，现在启动你的服务器（server路径下）
node index.js
- 然后，打开浏览器，输入 127.0.0.1:3000，进入注册界面，填写完你的注册信息，点击“完成注册”按钮
- 现在，返回主页，进入登陆界面，填写你刚刚注册的账号和密码，点击登陆，正常情况下，登陆成功后会返回一串 json 字符串
- 至此，我们在使用 vue.js 框架的情况下，实现了前后端的数据交互。
欢迎关注我的微信公众号 ArthurSlog