记：第一次Vue实战应用

最新推荐文章于 2024-07-30 16:34:14 发布

Irene1991

最新推荐文章于 2024-07-30 16:34:14 发布

阅读量247

点赞数

分类专栏：前端开发文章标签： vue实战

原创文章如需转载请注明地址。

本文链接：https://blog.csdn.net/Irene1991/article/details/84141782

版权

前端开发专栏收录该内容

54 篇文章 1 订阅

订阅专栏

学习时使用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
}

Irene1991

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
记：第一次Vue实战应用

学习时使用demo练习，现在是第一次在实战中使用Vue，这是一个单页面应用。签到信息验证实现的效果如下：功能点：姓名非空验证手机号格式验证错误提示http请求后端数据传统的实现方式（html+css+jquery）<div class="row"> <div class="col-lg-12"> &lt...
复制链接

扫一扫