Slog34_Dominationvue框架初级项目博客站点-注册页面-前后端数据交互
ArthurSlogSLog-34年·1广州·中国2018年8月10日GitHub掘金主页简书主页segmentfault沉睡的狮子即将苏醒，世界将开发环境MacOS(HighSierra10.13.5)所需信息和信息来源：HTTP概述HTTP互联网如何工作万维网如何工作统一资源定位符(URL)什么是超链接创建超链接AJAX是异步的JavaScript和XML（异步JavaScriptAndXML)XMLHttpRequestUsingfilesfromwebapplicationsbeginningtocodedinSlog33，使用vue.js框架让html文件中的元素和js文件中的代码相互关联，这样就可以使用js代码js文件中对html文件中的元素进行控制；在js文件中，js代码是使用vue.js的规则编写的。这里有一个问题。api指的是webAPI还是vue.js框架的API？这个问题留给开发过程中用js写的js代码来解决。其实我们做的就是“获取html文件中元素的数据”、“获取html文件中元素的数据，并对数据进行处理”、“获取html文件中元素的数据并进行处理”发送给服务器”，”获取html文件中元素的数据，发送给服务器，等待从服务器接收数据”，等等，上面说的这些东西不用死记硬背（因为你也记不住），只要在开发过程中参考vue.js官方文档，结合web规范，就能写出需要的功能。一般来说，这些文件类似于说明书或字典。然而，...，不是每个人都会遵循这种思路，如果你觉得有更适合你的方法，何乐而不为呢，但请记得控制好你的时间成本如果你根据我的html文件修改Slog33，最后的结果是数据关联会有点问题，先解决问题吧（目前只说前端html和js）signup.html
<元字符集=utf-8">
signup_ArthurSlog这是ArthurSlog的注册页面
Singup
帐户：{{name}}
密码：{{password}}
再次密码：{{repassword}}
名字：{{firstname}}
姓氏：{{lastname}}
生日：{{birthday}}
性别：{{currentSex}}
男
女
年龄：{{currentAge}}
选择{{age}}
微信：{{wechart}}
QQ：{{qq}}
邮箱：{{email}}
Contury:{{contury}}
地址：{{地址}}
电话：{{电话}}
网站大小：{{websize}}
Github:{{github}}
简介：{{简介}}
返回索引页面
/body>再看一下js文件signup.jsvarhost='http://127.0.0.1:3000/signup?';varsignup_container=newVue({el:'#signup-container',data:{姓名：''，密码：''，重新密码：''，名字：''，姓氏：''，出生日期：''，性别：['男'，'女']，currentSex：'男'，年龄：['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:'',提交：['null','null']},方法：{addUser:function(){varxhr=newXMLHttpRequest()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文件中的表单部分
...这里的v-on:submit属于vue.js的模板语法，作用是“可以使用v-on命令来监听DOM事件，并在触发时运行一些JavaScript代码。”如上，在js文件中的“方法”中创建一个addUser方法。当你在html上点击按钮完成注册时，会调用addUser方法，该方法会执行你写的逻辑。现在我们需要让addUser方法将我们填写的注册信息发送给服务器，并等待服务器的执行结果（成功或失败），然后对显示的执行结果显示WherecanIfindsuchamethod屏幕上？首先想到的是webAPI，试着去官网找找看一下。根据vue.js框架的介绍，vue的js文件结构，所以在方法中：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='+地址+'&phone='+phone+'&websize='+websize+'&github='+github+'&bio??='+bio,true)再看xhr.send()方法，参考官方说明XMLHttpRequest.send()方法是用来发送HTTP请求，如果是异步请求（默认为异步请求），请求发送后该方法会立即返回；如果是同步请求，这个方法直到响应到达才会返回。XMLHttpRequest.send()方法接受一个可选参数，即请求主体；如果请求方法是GET或HEAD，则请求主体应设置为null。如果没有使用setRequestHeader()方法设置Accept头信息，则发送带*/*的Accept头。好了，现在启动你的服务器（在服务器路径下）nodeindex.js然后，打开浏览器，输入127.0.0.1:3000，进入注册界面，填写你的注册信息，点击“完成注册”按钮现在，返回进入首页，进入登录界面，填写刚才注册的账号和密码，点击登录。一般情况下，登录成功后会返回一串json字符串。至此，我们使用vue.js框架实现了前后端数据交互。欢迎关注我的微信公众号ArthurSlog喜欢我的文章请点赞留言谢谢
