阶段二-使用Vue控制CRM管理系统页面组件

最新推荐文章于 2024-08-15 19:41:48 发布

.超人不会飞.

最新推荐文章于 2024-08-15 19:41:48 发布

阅读量54

点赞数

文章标签： vue.js javascript 前端

原文链接：https://juejin.cn/post/7163563100422012965

版权

一、登录功能

需求描述

目前使用假数据实现效果，当用户输入用户名为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="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>
    <!-- 导入vue依赖   -->
    <script src="assets/axios.min.js"></script>
    <script src="assets/vue.min-v2.5.16.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);text-align: center;line-height: 310px;font-size:18px;color: white;font-weight: bold ">
                    蜗牛CRM管理系统
                </div>
                <!-- 显示表单的div -->
                <div class="col-md-7">
                    <!-- bootstrap行 -->
                    <div class="row" style="padding: 30px 0px 30px 0px">
                        <div class="col-md-12" style="text-align: center;font-weight: bold;font-size: 18px;">
                            登录
                        </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>

                    <!-- 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>

                    <!-- 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="doReset">重置</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 创建vue实例
    new Vue({
        el: '#app', //将id为app的div的管理权交给vue
        data: { //需要绑定的数据
            userName: null, //用户名
            passwd: null //密码
        },
        methods: { //所有声明的函数
            doLogin() { //点击登录按钮后执行
                //通过this.可以获取data中绑定的数据
                // 通过axios发送请求到UserLoginServlet
                var url = "http://localhost:8080/login?user_name=" + this.userName + "&passwd=" + this.passwd;
                axios.get(url).then(response => {
                    if (response.data == '登录成功') {//登录成功
                        window.location.href = 'index.html';//跳转到主页index.html
                    } else {//登录失败
                        alert("用户名或密码错误!!!");//弹窗警告
                    }
                })
            },
            doReset() {//重置内容
                this.userName = null;
                this.passwd = null;
            }
        },
        created: function () { //页面加载完成后执行
        }
    });
</script>
</body>
</html>