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

朵朵宝

已于 2022-11-10 15:43:52 修改

阅读量542

点赞数 1

分类专栏： CRM管理系统文章标签：前端

于 2022-11-08 17:38:09 首次发布

本文链接：https://blog.csdn.net/magic_818/article/details/127755003

版权

CRM管理系统专栏收录该内容

8 篇文章 4 订阅

订阅专栏

一、登录功能

需求描述

目前使用假数据实现效果，当用户输入用户名为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>
    <!--    导入Bootstrap依赖-->
    <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>
    <!--    导入vue依赖-->
    <script src="asset/vue.min-v2.5.16.js"></script>
    <script src="asset/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
    <!--  bootstrap行  <-->
    <div class="row">
        <!--        bootstrap 列.6个栅格的宽度-->
        <div class="col-md-6 col-md-offset-3" style="height: 310px;border: 1px solid black;margin-top: 80px; ">
            <!--    bootstrap 行-->
            <div class="row">
                <!--            显示文章标题的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>
                <!--显示表单的div-->
                <div class="col-md-7">
                    <!--                div bootstrap 行-->
                    <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 bootstrap行-->
                    <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 bootstrap行-->
                    <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 bootstrap行-->
                    <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>