楼宇管理系统中的人员信息管理模块四层架构前后端分离_前端登录部分

.吸吸欧气

已于 2022-12-05 23:50:49 修改

阅读量320

点赞数 1

分类专栏：楼宇管理系统文章标签：前端 javascript bootstrap vue html5

于 2022-11-28 19:33:04 首次发布

本文链接：https://blog.csdn.net/weixin_52837547/article/details/128085536

版权

楼宇管理系统专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一.搭建基础架构

1.1导入bootstrap与vue依赖

1.2搭建基础结构基础框架

二.通过bootstrap样式绘制登录页面

三.在Vue中填写逻辑代码

四.效果图

五.完整代码

一.搭建基础架构

1.1导入bootstrap与vue依赖

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

1.2搭建基础结构基础框架

<body>

<div class="container" id="app">
   <div class="row">
    <div>
<div>

<script>
    new Vue({
        el:'#app',

        data : {

            },
         methods : {
        
            },
         created : function(){

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

二.通过bootstrap样式绘制登录页面对页面进行美化管理

    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="border: 1px solid black;height: 310px;margin-top: 80px">
            <div class="row">
                <div class="col-md-5" style="height: 310px;background-color: rgb(43,136,233);font-size: 18px;color: #b9def0;font-weight: bold;text-align: center;line-height: 310px">
                    智慧社区管理系统
                </div>
                <div class="col-md-7">
                    <div class="row" style="text-align: center;margin-top: 30px">
                        <h4>登录</h4>
                    </div>
                    <div class = "row" style="margin-top: 20px;height: 60px">
                        <div class="col-md-8 col-md-offset-2">
                            <label>用户名:</label>
                            <input type="text" class="form-control" style="border-radius: 5px" v-model="userName"/>
                        </div>
                    </div>
                    <div class = "row" style="margin-top: 10px;height: 60px" />
                    <div class="col-md-8 col-md-offset-2">
                        <label>密码:</label>
                        <input type="password" class="form-control" style="border-radius: 5px" v-model="password"/>
                    </div>
                </div>
                <div class = "row" style="margin-top: 10px;height: 60px ;text-align: center">
                    <div class="col-md-8 col-md-offset-2">
                        <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>

三.在Vue中填写逻辑代码通过axios与后端进行交互

<script>
    new Vue({
        el : '#app',
        data : {
            userName : null,
            password : null,
        },
        methods : {
            doLogin(){
             axios.get("http://localhost:8080/user/login1?username="+this.userName+"&password="+this.password).then(response =>{
             if (response.data.code==200){
                 window.location.href="main.html";
             }else{
                 alert(response.data.msg);
             }
             });
            },
            doReset(){
                this.userName = null;
                this.password = null;
            }
        },
        created : function(){
        }
    })
</script>

四.登录效果图

五.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <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/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>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
<div class="container" id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="border: 1px solid black;height: 310px;margin-top: 80px">
            <div class="row">
                <div class="col-md-5" style="height: 310px;background-color: rgb(43,136,233);font-size: 18px;color: #b9def0;font-weight: bold;text-align: center;line-height: 310px">
                    智慧社区管理系统
                </div>
                <div class="col-md-7">
                    <div class="row" style="text-align: center;margin-top: 30px">
                        <h4>登录</h4>
                    </div>
                    <div class = "row" style="margin-top: 20px;height: 60px">
                        <div class="col-md-8 col-md-offset-2">
                            <label>用户名:</label>
                            <input type="text" class="form-control" style="border-radius: 5px" v-model="userName"/>
                        </div>
                    </div>
                    <div class = "row" style="margin-top: 10px;height: 60px" />
                    <div class="col-md-8 col-md-offset-2">
                        <label>密码:</label>
                        <input type="password" class="form-control" style="border-radius: 5px" v-model="password"/>
                    </div>
                </div>
                <div class = "row" style="margin-top: 10px;height: 60px ;text-align: center">
                    <div class="col-md-8 col-md-offset-2">
                        <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>
<script>
    new Vue({
        el : '#app',
        data : {
            userName : null,
            password : null,
        },
        methods : {
            doLogin(){
             axios.get("http://localhost:8080/user/login1?username="+this.userName+"&password="+this.password).then(response =>{
             if (response.data.code==200){
                 window.location.href="main.html";
             }else{
                 alert(response.data.msg);
             }
             });
            },
            doReset(){
                this.userName = null;
                this.password = null;
            }
        },
        created : function(){
        }
    })
</script>
</body>
</html>