vue 登录页面填坑

上边的导航头,会显示在登陆页面上,暂时的解决办法实:

<template>
    <div style="position: fixed; top:0px; left:0px;height:100%;width:100%; background-color: #1F2D3D; z-index:100">
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm card-box loginform">
        <h3 class="title">系统登录</h3>
        <el-form-item prop="username">
            <el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
            <el-input type="password" v-model="ruleForm2.pwd" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" checked style="margin:0px 0px 35px 0px;">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2">登录</el-button>
            <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
        </el-form-item>
    </el-form>
    </div>
</template>

就是图中的style 样式。

时间: 2024-08-03 19:23:04

vue 登录页面填坑的相关文章

关于新手入门创建vue项目的填坑报告

经过我反复多次的实践,根据网上各位大佬的经验分享,终于将这个大坑填好了,记录一下,以方便下次填坑用. 基本步骤是根据下面这篇博客:https://blog.csdn.net/bruceyangjie/article/details/70168985: 但是我遇到了自己的问题: 1.进入项目目录之后再npm install,下载依赖文件 2.运行npm run  dev报错如下: 根据下面这片博客:https://www.jianshu.com/p/59fd30d35248的介绍 原因:这是新版w

网站第三方登录--微信登录(填坑)

按照官方给出的流程进行开发是可以顺利进行授权等操作的. 但我要说明一下 我开发的项目中 由于网站不是https协议的 所以在微信的授权通过官方给于的js实现二维码显示时遇到以下问题: 第一个问题: 官方步骤 步骤1:在页面中先引入如下JS文件(支持https): <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> 步骤2:在需要使用微信登录的地方

Vue.js写一个SPA登录页面的过程

技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

Vue.js实现一个SPA登录页面的过程

技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功

vue实现未登录跳转到登录页面

环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断,如果没有就跳转到登录页面,有的话就打开. 图示: 1.直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页,而且会带上参数. --------------------------------------------分

Vue2.0 新手完全填坑攻略——从环境搭建到发布

本文作者 Jinkey(微信公众号 jinkey-love,官网 https://jinkey.ai) 原文链接 https://jinkey.ai/post/tech/vue2.0-xin-shou-wan-quan-tian-keng-gong-lue-cong-huan-jing-da-jian-dao-fa-bu 文章允许非篡改署名转载,删除或修改本段版权信息转载的,视为侵犯知识产权,我们保留追求您法律责任的权利,特此声明! 感谢 showonne.yubang 技术指导 Demo 地址

前端系列——jquery前端国际化解决方案“填坑日记”

前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl 但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初

Android WebView填坑记录

前言 在应用程序开发过程中,经常会采用webview来展现某些界面,这样就可以不受发布版本控制,实时更新,遇到问题可以快速修复. 但是在Android开发中,由于Android版本分化严重,每一个版本针对webview都有部分更改,因此在开发过程中会遇到各种各样的坑,因此在此总结一下在开发过程中遇到的一些坑! 样例 这里不是讲解怎么进行webview开发,而是只罗列其中遇到的一些坑!为了展示这些问题,我们还是写一个样例来进行展开. 样例代码: /** * WebView demo */ publ

SharePoint 2010 自定义基于SQL表单身份验证的登录页面

当为SharePoint 2010 WebApplication配置了以混合模式(FBA Authentication和Windows Authentication)登陆后,我们当然可以自定义登陆页面(Sign in Page). 一.登陆SharePoint 2010 Central Administratio后,找到对应的WebApplication,指定其Sign in Page Url即可,如下所示: 二.创建自定义登录项目 首先,为了创建自定义的登陆页,我选择了Application