使用Vue控制CRM管理系统页面组件

最新推荐文章于 2024-04-15 09:52:13 发布

雷大胖胖

最新推荐文章于 2024-04-15 09:52:13 发布

阅读量181

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_74795259/article/details/127761711

版权

3、在HTML中用v-model属性绑定data

4、给登录按钮通过@click绑定点击事件

5、在methods中添加doLogin方法实现业务需求

6、重置按钮功能

代码

一、登录功能

需求描述

目前使用假数据实现效果，当用户输入用户名为admin，密码为123的时候，登录成功跳转到主页（index.html），否则弹出警告对话框提示“用户名或密码错误”。

需求实现

1、vue模板

2、在data中声明需要绑定的数据

3、在HTML中用v-model属性绑定data

4、给登录按钮通过@click绑定点击事件

5、在methods中添加doLogin方法实现业务需求

6、重置按钮功能

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <script src="assets/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
    <div class="container" id="app">
        <!--1画框-->
        <div class="row">

            <div class="col-md-6 col-md-offset-3" style="height: 310px;border:1px solid black;margin-top: 80px">
                <div class="row">
                    <!--2显示标题的div-->
                    <div class="col-md-5" style="height: 310px;background-color: rgb(43,136,223);font-size: 18px;color:white;font-weight:bold;text-align: center;line-height: 310px;">
                        蜗牛CRM管理系统
                    </div>
                    <!--3显示内容-->
                    <div class="col-md-7">
                        <!--4bootstap画hang-->
                        <div class="row">
                            <div class="col-md-12" style="text-align: center;font-size: 18px;font-weight: bold;padding:30px 0 30px 0;">
                                登录
                            </div>
                        </div>
                        <!--5bootstap画账号的行-->
                        <div class="row" style="height: 60px;margin-bottom: 20px;">
                            <div class="col-md-8 col-md-offset-2">
                                <lable>用户名</lable>
                                <input type="text" class="form-control" v-model="username"/>
                            </div>
                        </div>
                        <!--6bootstap画密码的行-->
                        <div class="row" style="height: 60px; margin-bottom: 20px;">
                            <div class="col-md-8 col-md-offset-2">
                                <lable>密码</lable>
                                <input type="possword" class="form-control" v-model="posswd"/>
                            </div>
                        </div>
                        <!--7bootstap画按钮的行-->
                        <div class="row" style="height: 60px;">
                            <div class="col-md-8 col-md-offset-2" style="text-align: center">
                               <button class="btn btn-primary" style="margin-right: 8px;" @click="dologin">登录</button>
                                <button class=" btn btn-default" @click="doRest">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    new Vue({
        el:'#app',
        data:{//需要绑定的数据
            username:null,//用户名
            posswd:null//密码

        },
        methods:{//所有声明的函数
        dologin(){//点击登录按钮后执行
         if(user_name==""admin&&possword==""123){//登录成功
                    document.writer("登录成功");
                }else{//登录失败
                    alert("用户名或者密码错误");//弹窗警告
                }
            });
        },
            doRest(){
            this.username=null;
            this.posswd=null;
            }
        },
        created: function(){

        }
    });
</script>
</body>
</html>