CRM管理系统(Vue页面组件)

亦凉 2023-10-11 19:41 130阅读 0赞

## 一、登录功能 ##

### 需求描述 ###

--------------------

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

--------------------

### 需求实现 ###

--------------------

#### 1、vue模板 ####

![b35ba950f86248cdac2423713dc9d3ea.png][]

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

![353c4c4cb53e4dc39ce557509a0b041b.png][]

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

![208ca93567404d6ba5661e21aa5c01d9.png][]

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

![7c1f068a5eed47689e39b3a14e145dd8.png][]

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

![ac8f927bd53d468f86c27a5076790f01.png][]

#### 6、重置按钮功能 ####

![028b99a7b6e34526a0dca35f2473270b.png][]

![e9a756fcbac74a169e4655485eb7e924.png][]

#### 全部代码 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        
        <link rel="stylesheet" href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script>
        <script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        
        <script src="asset/vue.min-v2.5.16.js"></script>
        <script src="asset/axios.min.js"></script>
    </head>
    <body>
    <div class="container" id="app">
        
        <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">
                    
                    <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>
                    
                    <div class="col-md-7">
                        
                        <div class="row" style="padding: 30px 0px 30px 0px;">
                            <div class="col-md-12" style="text-align: center;font-size: 18px;font-weight: bold;">
                                登录
                            </div>
                        </div>
                        
                        <div class="row" style="height: 60px;margin-bottom: 20px;">
                            <div class="col-md-8 col-md-offset-2">
                                <label>用户名</label>
                                <input type="text" class="form-control" v-model="userName"/>
                            </div>
                        </div>
                        
                        <div class="row" style="height: 60px;margin-bottom: 20px;">
                            <div class="col-md-8 col-md-offset-2">
                                <label>密码</label>
                                <input type="password" class="form-control" v-model="passwd"/>
                            </div>
                        </div>
                        
                        <div class="row" style="height: 60px;margin-bottom: 20px;">
                            <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="reset">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    </div>
    </body>
    <script>
        //创建Vue
        new Vue({
            el: '#app', //将id=app的管理权给vue
            data: { //需要用到的数据
                userName: null,//用户名
                passwd: null,//密码
            },
            methods: {     //所有方法的生命
                doLogin() {//点击登录按钮后执行
                    //通过this.可以获取data中绑定的数据
                    if (this.userName == 'admin' && this.passwd == '123') {//登录成功
                        window.location.href = 'index.html';//跳转到主页index.html
                    } else {
                        alert("用户名或者密码错误");//弹窗警告
                    }
                },
                reset(){//点击重置按钮后执行
                        this.userName=null;
                        this.passwd=null;
                },
            },
            created: function () {//页面加载完成后执行
    
            }
        });
    </script>
    </html>

--------------------

[b35ba950f86248cdac2423713dc9d3ea.png]: https://img-blog.csdnimg.cn/b35ba950f86248cdac2423713dc9d3ea.png
[353c4c4cb53e4dc39ce557509a0b041b.png]: https://img-blog.csdnimg.cn/353c4c4cb53e4dc39ce557509a0b041b.png
[208ca93567404d6ba5661e21aa5c01d9.png]: https://img-blog.csdnimg.cn/208ca93567404d6ba5661e21aa5c01d9.png
[7c1f068a5eed47689e39b3a14e145dd8.png]: https://img-blog.csdnimg.cn/7c1f068a5eed47689e39b3a14e145dd8.png
[ac8f927bd53d468f86c27a5076790f01.png]: https://img-blog.csdnimg.cn/ac8f927bd53d468f86c27a5076790f01.png
[028b99a7b6e34526a0dca35f2473270b.png]: https://img-blog.csdnimg.cn/028b99a7b6e34526a0dca35f2473270b.png
[e9a756fcbac74a169e4655485eb7e924.png]: https://img-blog.csdnimg.cn/e9a756fcbac74a169e4655485eb7e924.png