页面登录页面的显示与隐藏,通过dom进行操作

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment :: head"></head>
<link rel="stylesheet" href="/css/login.css">
<script th:src="@{/js/vue.min.js}"></script>
<link rel="stylesheet" th:href="@{/plugins/element-ui/2.12.0/index.css}">
<script th:src="@{/plugins/element-ui/2.12.0/index.js}"></script>
<style type="text/css">
    #app .el-loading-spinner .el-loading-text {
    
    
        color: #409EFF;
        margin: 3px 0;
        font-size: 34px;
    }
    #app .el-loading-spinner i {
    
    
        font-size: 43px;
    }
</style>
<body class="hold-transition login-page">
<div class="login-box">

    <div class="login-box-body" style="display: none;">
        <br/>
        <div class="login-logo" style="font-size: x-large;">
            <a href="/index">后台管理系统
                <small>V1.0</small>
            </a>
        </div>
        <form role="form" method="post" action="/access/login">
            <input type="hidden" name="redirect_url" id="redirect_url">
            <div class="form-group has-feedback">
                <input type="text" class="form-control" placeholder="登录名称" name="username" id="loginName">
                <span class="glyphicon glyphicon-user form-control-feedback" ></span>
            </div>
            <div class="form-group has-feedback">
                <input type="password" class="form-control" placeholder="登录密码" name="password" id="loginPassword">
                <span class="glyphicon glyphicon-lock form-control-feedback" ></span>
            </div>
            <div class="form-group">
                <div class="checkbox icheck">
                    <label>
                        <input type="checkbox" name="rememberMe"  value="0" id="ck_rmbUser" checked> &nbsp; 记住账号
                    </label>
                </div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block btn-flat" onclick="save()">登录</button>
            </div>
        </form>
    </div>
    <div id="app" style="width:100%;height:100%;display: block;" v-loading="loading" element-loading-text="拼命加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"  ref="vant_Container">
    </div>
</div>

<div th:replace="fragment :: script"></div>
<script th:inline="javascript">
    $(function () {
    
    
        vm.$data.loading=true
        function getObject(list) {
    
    
            var object = {
    
    }
            for (var i = 0; i < list.length; i++) {
    
    
                var key = list[i].split('=')[0]
                var value = list[i].split('=')[1]
                object[key] = value
            }
            return object
        }

        var str="http://localhost:9528/access/login?currentId=111111"
        console.log('window.location.href111',window.location.href,str)
        str=window.location.href
        console.log('window.location.href222',str,str.split('?')[1])
        if(str.indexOf('?')>-1&&str.split('?')[1]){
    
    
            var list = str.split('?')[1].split('&')
            var obj=getObject(list)
            if(Object.keys(obj).length>0&&obj.currentId){
    
    
                login(obj)
            }else{
    
    
                vm.$data.loading=false
                // 登录页面出现,加载中消失
                document.getElementsByClassName('login-box-body')[0].style.cssText='display: block;'
                document.getElementById('app').style.cssText='width: 100%; height: 100%; display: none;'
            }
        }else{
    
    
            console.log(str.indexOf('?') == -1?'url中没有"?"':!str.split('?')[1]?"没有携带用户信息":"");
            vm.$data.loading=false
            // 登录页面出现,加载中消失
            document.getElementsByClassName('login-box-body')[0].style.cssText='display: block;'
            document.getElementById('app').style.cssText='width: 100%; height: 100%; display: none;'
        }

    });
    function login(obj) {
    
    
        console.log("obj",obj)
        $.ajax({
    
    
            type: "post",
            url: '/system/user/autologin',
            dataType: "json",
            async: true,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            traditional: true,//这使json格式的字符不会被转码
            data: {
    
    
                username:obj.currentId,
                password:"11111",
            },
            success: function (result) {
    
    
                console.log("result1111",result)
                if(result.msg=="200"){
    
    
                    vm.$data.loading=false
                    window.location.href = '/event/riskItemPushDetail';
                    sessionStorage.setItem("4THI_3SNAME2_1", obj.currentId);
                }else{
    
    
                    vm.$data.loading=false
                    // 登录页面出现,加载中消失
                    document.getElementsByClassName('login-box-body')[0].style.cssText='display: block;'
                    document.getElementById('app').style.cssText='width: 100%; height: 100%; display: none;'
                    sessionStorage.setItem("4THI_3SNAME2_1", "");
                    layer.alert('该用户不存在!');
                }
            },
            error: function(msg){
    
    
            }
        })
    }
    function save() {
    
    
        console.log("保存");
    }

    var vm = new Vue({
    
    
            el: '#app',
            data: {
    
    
                loading:false,
            },
            mounted: function () {
    
    
                var that = this
                that.$nextTick(function () {
    
    
                    // 仅在整个视图都被渲染之后才会运行的代码
                    // that.$refs.vant_Container.style.display = "block";
                })
            },
            methods: {
    
    
                //单位-单位树形结构
                // getoffice: function () {
    
    
                // },
            }
        });
</script>
</body>
</html>

  <a id="a3333" :href="urlhref" download>
          <span style="cursor:pointer" v-for=" (item,index) in scope.row.appendId " :key="index" @click="appendIdDownLoad(item)">
                  {
    
    {
    
    index!=0?",":""}} {
    
    {
    
    item.name}}
         </span>
 </a>
 appendIdDownLoad(item){
    
    
 	this.urlhref=item.url
 },
  <a id="a3333" >
          <span style="cursor:pointer" v-for=" (item,index) in scope.row.appendId " :key="index" @click="appendIdDownLoad(item,'a3333')">
                  {
    
    {
    
    index!=0?",":""}} {
    
    {
    
    item.name}}
         </span>
 </a>
    appendIdDownLoad(row, val) {
    
    
      let params = {
    
    
        url: row.url
      }
      console.log("val", val);
      downFile(params)
        .then((res) => {
    
    
          console.log('res', res)
          document.getElementById(val).href=res.data
          document.getElementById(val).download=true
          document.getElementById(val).click()
          console.log("this.urlhref",document.getElementById(val));
        })
        .catch((err) => {
    
    
        });
    },

猜你喜欢

转载自blog.csdn.net/ingenuou_/article/details/127903302