学习时使用demo练习,现在是第一次在实战中使用Vue,这是一个单页面应用。
签到信息验证
实现的效果如下:
功能点:
姓名非空验证
手机号格式验证
错误提示
http请求后端数据
传统的实现方式(html+css+jquery)
<div class="row">
<div class="col-lg-12">
<div class="ibox">
<div class="ibox-title" style="text-align: center;">
<p style="text-align: center"><img src="./img/hazhiLogo_head.png"></p>
<h1>签到信息验证</h1>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-1 col-sm-12">
<form class="form-horizontal" id="userMsgForm">
<div class='form-group'>
<label class='col-sm-2 control-label'>姓名</label>
<div class='col-sm-10'><input type='text' class="form-control" name='userName' value='' placeholder="请输入您的姓名"></div>
</div>
<div class='form-group'>
<label class='col-sm-2 control-label'>手机号</label>
<div class='col-sm-10'><input type='text' class="form-control" name='userPhone' value='' placeholder="请输入您的手机号"></div>
</div>
<div class='form-group'>
<div class='col-sm-10 col-sm-offset-2'>
<br/>
<button type="button" class="btn btn-block btn-primary-change" id="submitUserMsgForm">提交</button>
</div>
</div>
<div class='form-group'>
<div class='col-sm-12' style="text-align:center;">
<p id="errorMsg" style="color:#e4393c"></p>
</div>
</div>
</form>
<hr/>
<p style="text-align:center;color:#999;">杭州哈智机器人有限公司提供技术支持</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$("#errorMsg").html("");
})
$("input[name='userName']").blur(function(){
var checkUserName=$("input[name='userName']").val();
if(checkUserName == ''){
$("#errorMsg").html("姓名需要填写");
}else{
$("#errorMsg").html("");
}
})
$("input[name='userPhone']").blur(function(){
var checkUserPhone=$("input[name='userPhone']").val();
if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(checkUserPhone))){
$("#errorMsg").html("手机号格式不正确");
}else{
$("#errorMsg").html("");
}
})
$("#submitUserMsgForm").click(function(){
var userName=$("input[name='userName']").val();
var userPhone=$("input[name='userPhone']").val();
if(userName == ''){
$("#errorMsg").html("姓名未填写,不能提交!");
}else{
if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(userPhone))){
$("#errorMsg").html("手机号格式不正确,不能提交!");
}else{
$.ajax({
type:"POST",
url:"/faceRecognition/activityManage/codeSigin?visitorName="+userName+'&visitorPhone='+userPhone,
success:function(res){
if(res.code == 200){
$("#errorMsg").html("签到验证成功!");
}else if(res.code == 300){
$("#errorMsg").html("未在邀请名单中,签到验证失败!");
}else{
$("#errorMsg").html(res.msg);
}
},
error:function(res){
$("#errorMsg").html(res.msg);
}
})
}
}
})
</script>
vue实现方式(html+css+vue.js+vue-resource.js)
首先在<style>标签中引入
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<div class="row">
<div class="col-lg-12">
<div class="ibox">
<div class="ibox-title" style="text-align: center;">
<p style="text-align: center"><img src="./img/hazhiLogo_head.png"></p>
<h1>签到信息验证</h1>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-1 col-sm-12">
<form class="form-horizontal" id="userMsgForm">
<div class='form-group'>
<label class='col-sm-2 control-label'>姓名</label>
<div class='col-sm-10'><input type='text' class="form-control" v-model.lazy='userName' value='' placeholder="请输入您的姓名"></div>
</div>
<div class='form-group'>
<label class='col-sm-2 control-label'>手机号</label>
<div class='col-sm-10'><input type='text' class="form-control" v-model.lazy.number='userPhone' value='' placeholder="请输入您的手机号"></div>
</div>
<div class='form-group'>
<div class='col-sm-10 col-sm-offset-2'>
<br/>
<button type="button" class="btn btn-block btn-primary" @click="submitUserMsgForm">提交</button>
</div>
</div>
<div class='form-group'>
<div class='col-sm-12' style="text-align:center;">
<p id="errorMsg" style="color:#e4393c">{{errorMsg}}</p>
</div>
</div>
</form>
<hr/>
<p style="text-align:center;color:#999;">杭州哈智机器人有限公司提供技术支持</p>
</div>
</div>
</div>
</div>
</div>
</div>
vue.js 下载地址:
https://cdn.jsdelivr.net/npm/vue
vue-resource.js 下载地址:
https://cdn.jsdelivr.net/npm/vue-resource@1.5.1
<script src="js/vue-resource.js"></script>
<script>
new Vue({
el:"#root",
data:{
userName:'',
userPhone:'',
errorMsg:''
},
watch:{
userName:function(val){
if(val == ''){
this.errorMsg="姓名需要填写"
}
},
userPhone:function(val){
if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(val))){
this.errorMsg="手机号格式不正确"
}
}
},
methods: {
submitUserMsgForm:function(){
if(this.userName == ''){
this.errorMsg="姓名未填写,不能提交!"
}else{
if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(this.userPhone))){
this.errorMsg="手机号格式不正确,不能提交!"
}else{
this.$http.post("/faceRecognition/activityManage/codeSigin?visitorName="+this.userName+'&visitorPhone='+this.userPhone)
.then(function(res){
console.log(res.data)
if(res.data.code == 200){
this.errorMsg="签到验证成功"
}else if(res.data.code == 300){
this.errorMsg="未在邀请名单中,签到验证失败!"
}else{
this.errorMsg=res.data.msg
}
},function(error){
this.errorMsg=error
}
)
}
}
}
}
})
</script>
易错点1:传参方式
ajax
url:"/faceRecognition/activityManage/codeSigin?visitorName="+userName+'&visitorPhone='+userPhone
resource
this.$http.post("/faceRecognition/activityManage/codeSigin?visitorName="+this.userName+'&visitorPhone='+this.userPhone).then(...)
错误范例:报错400
this.$http.post("/faceRecognition/activityManage/codeSigin",{"visitorName":this.userName,"visitorPhone":this.userPhone}).then(...)
地址拼接传参,只能拼接字符串/布尔值/数字/日期等变量,不能拼接(json)对象?
"url?parameter="+var
"url?parameter="+obj
对象传参
正确写法:“url”,obj
错误写法:“url”+obj
易错点2:返回值
ajax
if(res.code == 200){
$("#errorMsg").html("签到验证成功!");
}else if(res.code == 300){
$("#errorMsg").html("未在邀请名单中,签到验证失败!");
}else{
$("#errorMsg").html(res.msg);
}
resource(使用resource返回值会多嵌套一层data)
if(res.data.code == 200){
this.errorMsg="签到验证成功"
}else if(res.data.code == 300){
this.errorMsg="未在邀请名单中,签到验证失败!"
}else{
this.errorMsg=res.data.msg
}