【登录界面】vue、element-ui登录界面模板
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>
【登录界面】vue、element-ui登录界面模板相关推荐
- Vue +Element UI后台管理模板搭建示例
2019独角兽企业重金招聘Python工程师标准>>> 一.蓝色主题 Element ui 后台管理 Demo https://github.com/taylorchen709/vu ...
- vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面 话不多说,先上图 界面效果图 下面直接上代码: <template><div class="loginbody&q ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
- 基于Vue+Element UI+Node+MongoDB的医院门诊预约挂号系统
目录 概述 3 系统目标 3 需求分析 3 功能需求 3 非功能需求 4 设计 4 数据库设计 4 数据库说明 4 数据结构 4 接口设计 5 登录 5 注册.添加信息 6 查询信息 6 查询全部病人 ...
- 基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架 引言 心声 现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-代码总结(已开源)
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Form表单填写、Dialog对话框弹出
文章目录 目标 代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录 目标 代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题 总代码 本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
- vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
最新文章
- MyBatis第二天
- Jquery checkbox全选简单用法
- Nhibernate一些问题解决方法
- lecture 4 : More Objective-C
- SQL入门试炼创建表
- 信息学奥赛一本通(1227:Ride to Office)
- 辐射避难所买了东西显示服务器异常,辐射避难所常见问题汇总 专治疑难杂症...
- python可以做什么工作-Python可以做什么工作?Python有哪些方向?
- Linux kernel crash定位
- android手机短信诈骗原理,安卓系统均存短信欺诈漏洞 专家:系统先天不足
- 用C语言程序进行比赛日程排列
- 表格进阶03——简历制作(用表格布局)
- Pycharm中用Appium框架编写第一个自动化脚本
- Redis详细总结笔记
- 1分钟快速了解MindMapper 与MindManager间的不同点
- 怎么将bmp格式图片转换jpg格式的
- linux内核之alsa,Linux操作系统Alsa音频编程
- 图像匹配sparse-ncnet复现
- CryEngine3 - Anlysis Rendering
- 【笔记】Java反射专题
热门文章
- C语言 取绝对值函数abs()使用及注意事项
- VTN:视频Transformer网络
- 如何在ppt中插入pyecharts生成的html图表(及可能的报错解决方法)
- 分享一下新的echarts离线文档
- mysql计算相关系数_用sql实现相关系数的计算
- Android实现一个APP只能在一部手机上使用
- 守望先锋代码_使用守望台自动刷新SQL Server容器
- 2012-7-10可樂词汇积累#9315;
- cvc 降噪_此降噪非彼降噪,你要的是哪种降噪?
- kdiff3的主窗口说明 Base Local Remote 分别代表什么分支