草庐IT

【登录界面】vue、element-ui登录界面模板

齊 天 大 聖 2023-04-11 原文

vue、element-ui登录界面模板

这里总结一个用vue、element-ui写的登录界面，为以后复制粘贴备用。

截图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

<!--引入js-->
  <script src="../../js/vue.js"></script>
  <script src="../../js/jquery-3.6.0.js"></script>
    <!--引入element-ui-->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../css/Eleindex.css">
  <!-- 引入组件库 -->
  <script src="../../js/Eleindex.js"></script>

</head>
<body>
<div id="app">

    <el-container>
        <el-header>XXXX</el-header>
        <!--主体内容-->
        <el-main>


            <el-row>
                <el-col :span="8" :offset="8">
                    <div id="loginBox">
                        用户登录<br>
                        账号：<el-input v-model="adminUser.username" placeholder="账号"></el-input><br>
                        密码：<el-input type="password" v-model="adminUser.password" placeholder="密码"></el-input><br>
                        <el-button type="primary" @click="y_reset">重置</el-button>
                        <el-button type="primary" @click="y_login">登录</el-button>
                    </div>
                </el-col>
            </el-row>


        </el-main>
        <el-footer>Copyright © 2022xxxx all rights reserved</el-footer>
    </el-container>



</div>



</body>
</html>

<style>
    /*整体样式*/
    *{
        margin: 0;
        padding: 0;
    }
    body,html,.el-container,#app{
        height: 100%;
    }

    /*放账号密码input的div*/
    #loginBox{
        background-color: #eee;
        border-radius: 15px;
        margin-top: 15%;
    }

    /*布局容器样式 main header fotter*/
    .el-header {
        background-color:deepskyblue;
        color: #fff;
        text-align: center;
        line-height: 60px;
        font-size: xx-large;
        font-weight: bolder;

    }
    .el-footer{
        background-color: #bbb;
        color: #000;
        text-align: center;
        line-height: 60px;

    }
    .el-main {
        background-color: #fff;
        color: #333;
        text-align: center;
        line-height: 80px;

    }

/*    输入框样式*/
    .el-input{
        width: 50%;
    }

</style>

<script>
  var app=new Vue({
    el:"#app",
    data:{
        adminUser:{},

    },
    methods:{
        y_reset(){//重置
            this.adminUser={};
        },
        y_login(){//点击登录按钮后发送ajax请求给后端进行账号密码比对
            this.post01();
        }
    }
    });

</script>
element-uielementquotspanclass

有关【登录界面】vue、element-ui登录界面模板的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby - 通过 erb 模板输出 ruby​​ 数组 - 2

    我正在使用puppet为ruby​​程序提供一组常量。我需要提供一组主机名，我的程序将对其进行迭代。在我之前使用的bash脚本中，我只是将它作为一个puppet变量hosts=>"host1,host2"我将其提供给bash脚本作为HOSTS=显然这对ruby​​不太适用——我需要它的格式hosts=["host1","host2"]自从phosts和putsmy_array.inspect提供输出["host1","host2"]我希望使用其中之一。不幸的是，我终其一生都无法弄清楚如何让它发挥作用。我尝试了以下各项:我发现某处他们指出我需要在函数调用前放置“function_”……这

  3. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  4. ruby-on-rails - Mandrill API 模板 - 2

    我正在使用Mandrill的RubyAPIGem并使用以下简单的测试模板:testastic按照Heroku指南中的示例，我有以下Ruby代码:require'mandrill'm=Mandrill::API.newrendered=m.templates.render'test-template',[{:header=>'someheadertext',:main_section=>'Themaincontentblock',:footer=>'asdf'}]mail(:to=>"JaysonLane",:subject=>"TestEmail")do|format|format.h

  5. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  6. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑，但请耐心等待。简而言之，我想遍历具有特定键值的所有属性，然后如果值不为空，则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  7. ruby - 如何通过Middleman安装和使用Slim模板引擎 - 2

    一般来说，我是Middleman和ruby​​的新手。我已经安装了Ruby我已经安装了Middleman和gem以使其运行。我需要使用slim而不是默认的模板系统。所以我安装了Slimgem。Slim的网站只说我需要'slim'才能让它工作。中间人网站说我只需要在config.rb文件中添加模板引擎，但是没有给出例子...对于没有ruby​​背景的人来说，这没有帮助。我在git上找了几个config.rb，它们都有:require'slim'和#Setslim-langoutputstyleSlim::Engine.set_default_options:pretty=>true#Se

  8. ruby - 使用 Ruby 和 Mechanize 登录网站 - 2

    我需要从站点抓取数据，但它需要我先登录。我一直在使用hpricot成功地抓取其他网站，但我是使用mechanize的新手，我真的对如何使用它感到困惑。我看到这个例子经常被引用:require'rubygems'require'mechanize'a=Mechanize.newa.get('http://rubyforge.org/')do|page|#Clicktheloginlinklogin_page=a.click(page.link_with(:text=>/LogIn/))#Submittheloginformmy_page=login_page.form_with(:act

  9. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  10. ruby-on-rails - 使用用户或管理员模型和 Basecamp 样式子域设计登录 - 2

    我为Devise用户和管理员提供了不同的模型。我也在使用Basecamp风格的子域。除了我需要能够以用户或管理员身份进行身份验证的一些Controller和操作外，一切都运行良好。目前我有authenticate_user!在我的application_controller.rb中设置，对于那些只有管理员才能访问的Controller和操作，我使用skip_before_filter跳过它。不幸的是，我不能简单地指定每个Controller的身份验证要求，因为我仍然需要一些Controller和操作才能被用户或管理员访问。我尝试了一些方法都无济于事。看来，如果我移动authentica

随机推荐