6.从零开始搭建基于SpringCloud的京东整站_用户微服务_使用Vue完成注册页面前端功能

本次目标

1.使用Vue完成表单数据的双向绑定。
1.1 表单数据的绑定。
1.2 验证码图片地址的动态绑定。
2.使用axios插件完成ajax提交。

使用Vue完成表单数据的双向绑定

没有接触vue之前，在我所了解的前端JS库中，JQuery是我使用最顺手的一个。它对传统Js操作Dom元素的方式进行了进一步地封装，可以使开发者用更加简洁的代码实现同样的功能。
但是仔细想想，无论操作dom元素方式变的多么简单，其本质上都是使用数据更新界面元素或者通过界面元素更新数据，这些都是实现目标的手段。
有没有一种方式，可以直达目标？自动帮我们实现数据到元素的绑定和展示？Vue就是在这样的背景下应用而生的，它基于MVVM模型(Model-View-ViewModel)。是一个用户创建WEB交互界面的库，创建数据驱动的UI组件。其核心是通过数据驱动界面的更新和展示而非JS通过操作DOM来改变页面的显示。

准备工作

下载/引入Vue.js、axios.js到标签中。

<script type="application/javascript" src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

指明需要被Vue管理的Html代码块：id=“vue”

<!-- 登录主体部分start -->
<div class="login w990 bc mt10 regist" id="vue">
...from表单...
</div>

表单数据和验证码图片地址的绑定

<form action="" method="post">
					<ul>
						<li>
							<label for="">用户名：</label>
							<input type="text" class="txt" v-model="userName"/>
							<p>3-20位字符，可由中文、字母、数字和下划线组成</p>
						</li>
						<li>
							<label for="">密码：</label>
							<input type="password" class="txt" name="psw" v-model="psw"/>
							<p>6-20位字符，可使用字母、数字和符号的组合，不建议使用纯数字、纯字母、纯符号</p>
						</li>
						<li>
							<label for="">确认密码：</label>
							<input type="password" class="txt" name="psw2" v-model="psw2"/>
							<p> <span>请再次输入密码</p>
						</li>
						<li class="checkcode">
							<label for="">验证码：</label>
							<input type="text"  name="valicode" v-model="valicode"/>
							<img v-bind:src="valiCodeImg" alt="验证码" @click="changeValiCode"/>
							<span>看不清？<a href="#" @click="changeValiCode">换一张</a></span>
						</li>
						<li>
							<label for="">&nbsp;</label>
							<input type="checkbox" class="chb" checked="checked" /> 我已阅读并同意《用户注册协议》
						</li>
						<li>
							<label for="">&nbsp;</label>
							<input type="button" value="" class="login_btn" @click="submit" />
						</li>
					</ul>
				</form>

使用axios插件完成ajax提交

1.vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现。
2.axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。axios的Github地址：https://github.com/axios/axios

主要代码实现：

<script type="application/javascript">
	var vm = new Vue({
		el:"#vue",
		data:{
			ifGo:true,
			userName:"",
			psw:"",
			psw2:"",
			valicode:"",
			valiCodeImg:"/user/getValiCodeImg"
		},
		methods:{
			submit:function () {
				this.checkValue();
				if(this.ifGo){
					const url="/user/regist";
					let datas = {"userName":this.userName,"psw":this.psw,"psw2":this.psw2,"valicode":this.valicode};
					axios.put(url,datas).then(function(resp){
						console.log(resp.data);
					}).catch(resp => {
						alert('请求失败：'+resp.status+','+resp.statusText);
					});
				}

			},
			changeValiCode:function () {
				this.valiCodeImg="/user/getValiCodeImg?a="+Math.random();
			},
			checkValue:function () {
				this.ifGo=true;
				if(this.userName==""){
					alert("用户名不能为空");
					this.ifGo=false;
				}
				if(this.psw==""){
					alert("密码不能为空");
					this.ifGo=false;
				}
				if(this.psw2==""){
					alert("确认密码不能为空");
					this.ifGo=false;
				}
				if(this.valicode==""){
					alert("验证码不能为空");
					this.ifGo=false;
				}

			}
		}
	})
</script>

效果展示