vue+element ui实现好看的登录界面
闲暇之余使用vue+element ui制作了个登录界面
话不多说，先上图
界面效果图
下面直接上代码：
<template><div class="loginbody"><div class="logindata"><div class="logintext"><h2>Welcome</h2></div><div class="formdata"><el-form ref="form" :model="form" :rules="rules"><el-form-item prop="username"><el-inputv-model="form.username"clearableplaceholder="请输入账号"></el-input></el-form-item><el-form-item prop="password"><el-inputv-model="form.password"clearableplaceholder="请输入密码"show-password></el-input></el-form-item></el-form></div><div class="tool"><div><el-checkbox v-model="checked" @change="remenber">记住密码</el-checkbox></div><div><span class="shou" @click="forgetpas">忘记密码？</span></div></div><div class="butt"><el-button type="primary" @click.native.prevent="login('form')">登录</el-button><el-button class="shou" @click="register">注册</el-button></div></div></div>
</template><script>
import { login } from "@/api/login";
import { setToken } from "@/request/auth";export default {name: "login",data() {return {form: {password: "",username: "",},checked: false,rules: {username: [{ required: true, message: "请输入用户名", trigger: "blur" },{ max: 10, message: "不能大于10个字符", trigger: "blur" },],password: [{ required: true, message: "请输入密码", trigger: "blur" },{ max: 10, message: "不能大于10个字符", trigger: "blur" },],},};},mounted() {if(localStorage.getItem("news")){this.form=JSON.parse(localStorage.getItem("news"))this.checked=true}},methods: {login(form) {this.$refs[form].validate((valid) => {if (valid) {login(this.form).then((res) => {if (res.code === 200) {setToken(res.data.token);localStorage.setItem("USERNAME", res.data.username);this.$message({message: "登录成功啦",type: "success",showClose: true,});this.$router.replace("/");} else {this.$message({message: "账户名或密码错误",type: "error",showClose: true,});}}).catch((err) => {this.$message({message: "账户名或密码错误",type: "error",showClose: true,});});} else {return false;}});},remenber(data){this.checked=dataif(this.checked){localStorage.setItem("news",JSON.stringify(this.form))}else{localStorage.removeItem("news")}},forgetpas() {this.$message({type:"info",message:"功能尚未开发额
vue+element ui实现好看的登录界面相关推荐
- Vue+element ui实现好看的个人中心
目录 一.效果图 二.项目结构 三.界面效果和代码实现 1.路由注册 2.个人主页实现 3.编辑弹窗按钮实现 4.个人简介实现 5.发贴页实现 6.收藏页实现 7.关注和收藏页实现 四.总结 一.效果 ...
- vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网
目录 一.前言 二.实现及效果图 1.效果图 2.项目结构.设计说明 3.顶部菜单 4.首页轮播图 5.歌单推荐 三.总结 一.前言 咪咕音乐网,最近看到其官网,第一感觉真的很美观大方,有被它惊艳到. ...
- 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案例：通用后台管理系统-用户管理：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案例：通用后台管理系统-代码总结（已开源）
文章目录 前言 项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
最新文章
- mysql中正则表达式的用法_Mysql中正则表达式Regexp常见用法
- C#编码简单性之语义篇（如何编写简短的C#代码，随时更新）
- 实现iOS图片等资源文件的热更新化(二):自定义的动态 imageNamed
- 如何避免死锁，我们有什么套路可循？
- MATLAB的var与std函数 与 均值,方差,标准差,均方差,均分误差
- python自动化办公知识点整理汇总_python自动化办公小结
- php写不了php,php写入内存不足怎么办
- springmvc+ueditor上传路径（个人备忘）
- Unity 阴影的制作方式
- linux 打开cgm软件,cgm文件扩展名，cgm文件怎么打开？
- java 主流算法_java常用算法
- 云服务器 ECS Linux 配置 vsftpd即FTP的搭建和使用
- 西电大学计算机专硕,2021西安电子科技大学计算机专硕考研成功经验分享
- 商场云WiFi靠谱吗
- 两台电脑通过网线互联进行文件共享
- [模板] dp套dp bzoj5336: [TJOI2018]party
- 微信可以修改微信号了
- html 5 语音发送,HTML 5 语音合成
- 宝尚在线炒股 12.22 午评
- [旧博客]QQ旋风加速漏洞
热门文章