工作需求,Vue实现登录

加油,新时代打工人!

vue 2.x
Element UI

<template><div class="body" :style="{'background-image': `url(${require('@/assets/images/login.png')})`}"><el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer"><h3 class="loginTitle">宠物ERP管理系统</h3><el-form-item prop="username"><el-input type="text" v-model="loginForm.username" placeholder="请输入用户名" ></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" placeholder="请输入密码" ></el-input></el-form-item><!-- <el-form-item prop="code"><el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" style="width: 250px;margin-right: 5px"></el-input><img :src="captchaUrl"></el-form-item> --><el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox><el-button type="primary" style="width:100%" @click="submitLogin">登录</el-button></el-form></div>
</template><script>
import {storageuserlogin} from "@/api/login"
import { setToken, setCookie,getCookie, removeCookie } from "@/utils/auth";
export default {name: "Login",data(){return{captchaUrl: "",loginForm:{username:"",password:""},checked: true,rules:{username:[{required:true,message:"请输入用户名",trigger:"blur"},{ min: 2, max: 14, message: '长度在 5 到 14 个字符', trigger: 'blur' }],password:[{required:true,message:"请输入密码",trigger:"blur"},,{ min: 6,  message: '密码长度要大于6', trigger: 'blur' }]}}},created() {// 页面加载时检查是否有记住我的记录,并填充到表单中// const storedLoginData = localStorage.getItem('loginData');// if (storedLoginData) {//   const parsedData = JSON.parse(storedLoginData);//   this.loginForm.username = parsedData.username;//   this.loginForm.password = parsedData.password;},methods:{submitLogin(){//           // 处理登录逻辑//   const loginData = { username: this.loginForm.username, password: this.loginForm.password };//         if (this.checked) {//     // 如果记住我被选中,则将登录信息存入localStorage//          localStorage.setItem('loginData', JSON.stringify(loginData));//         } else {//     // 取消记住我时,从localStorage中移除已存储的登录信息//            localStorage.removeItem('loginData');//         }this.$refs["loginForm"].validate(valid => {if(valid){storageuserlogin({...this.loginForm}).then(res => {if(res.code==0){this.$message({message: "登录成功",type: "success"});setToken(res.data.tokenValue);setCookie("userInfo", res.data.tag);this.$router.push({ path: "/home" });}else{this.$message({message: "登录失败",type: "error"}  )}});}});}}
};
</script><style lang="less" scoped>.loginContainer{border-radius: 15px;background-clip: padding-box;text-align: left;margin: auto;margin-top: 280px;width: 350px;padding: 15px 35px 15px 35px;background: aliceblue;border:1px solid blueviolet;box-shadow: 0 0 25px #f885ff;}.loginTitle{margin: 0px auto 48px auto;text-align: center;font-size: 26px;}.loginRemember{text-align: left;margin: 0px 0px 15px 0px;}
.body {width:100%;height:calc(-10px + 100vh);background-repeat: no-repeat;background-size: cover;background-position: center;display:flex;justify-content:center;align-items:center;
}
</style>

效果图
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/282869.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

目标控制器数字孪生系统的研究与设计

文章来源&#xff1a;铁路计算机应用,2023,32(10):36-41. 作者&#xff1a;许婧&#xff0c;杨硕&#xff0c;季志均 摘要&#xff1a;随着目标控制器&#xff08;OC&#xff0c;Object Controller&#xff09;系统在轨道交通领域的推广应用&#xff0c;其硬件投入较高、研发…

VMware 15 中 Ubuntu与windows 10共享文件夹设置

wmware 15.5.7中安装ubuntu 22.04 物理机为windows 10 1.选中ubuntu中想要共享的文件夹右击&#xff0c;点属性 2.在Local network share中勾选share this folder&#xff0c;第一次会提示你安装samba&#xff0c;安装即可 3.window10的资源管理器中使用 虚拟机计算机名即可…

API调试管理工具Postman下载及操作介绍

1.下载安装postman地址&#xff1a;https://www.getpostman.com/downloads/ 2.创建项目 3.创建请求API 然后点击save保存api 4.用一个变量保存主域名&#xff0c;方便后续操作 就类似下面的baseurl 5.创建新环境 6.添加变量&#xff08;如添加本地测试环境url——ba…

什么是单点登录?

单点登录&#xff08;Single Sign On&#xff0c;简称 SSO&#xff09;简单来说就是用户只需在一处登录&#xff0c;不用在其他多系统环境下重复登录。用户的一次登录就能得到其他所有系统的信任。 为什么需要单点登录 单点登录在大型网站应用频繁&#xff0c;比如阿里旗下有淘…

Spring常用设计模式-实战篇之单例模式

实现案例&#xff0c;饿汉式 Double-Check机制 synchronized锁 /*** 以饿汉式为例* 使用Double-Check保证线程安全*/ public class Singleton {// 使用volatile保证多线程同一属性的可见性和指令重排序private static volatile Singleton instance;public static Singleton …

Git学习笔记之标签

Git 可以给仓库历史中的某一个提交打上标签&#xff0c;以示重要。 比较有代表性的 是人们会使用这个功能来标记发布结点&#xff08; v1.0 、 v2.0 等等&#xff09;。 1、列出标签 列出已有的标签: git tag按照通配符列出标签需要 -l 或 --list 选项。如果你只想要完整的标…

Codeforces Round #936 (Div. 2)D(拆位贪心)

思路&#xff1a;首先需要知道&#xff1a;如果某一位的数量为奇数,那么无论怎么分都会最终变成1. 整个问题转化成能有多少个隔断选取位置 先将所有数都拆位来看,首先观察那些比x的最高位还要高的位&#xff1a; 如果这些位的数量为奇数, 那么必然会使其位是1&#xff0c;不…

网络安全笔记-day6,NTFS安全权限

文章目录 NTFS安全权限常用文件系统文件安全权限打开文件安全属性修改文件安全权限1.取消父项继承权限2.添加用户访问权限3.修改用户权限4.验证文件权限5.总结权限 强制继承父项权限文件复制移动权限影响跨分区同分区 总结1.权限累加2.管理员最高权限2.管理员最高权限 NTFS安全…

使用npm创建一个全局的cli命令,就像vue-cli一样

我们用过vue-cli等工具包&#xff0c;全局安装之后&#xff0c;我们可以直接使用vue create等命令&#xff0c;实际上能够这样使用的原因&#xff0c;就是使用了package.json里面的bin字段注册命令。接下来就以一个脚本文件为例子为大家演示一下bin是如何发挥作用的。 创建项目…

vue.js+element-ui的基础表单

遇到原生的html小型单页应用时&#xff0c;是脱离了vue框架&#xff0c;而我们又想使用vue的语法和element的组件加快我们的开发速度&#xff0c;这个时候就需要引用他们的js了。技术栈即htmlvue.jselement-ui。而使用它们的方法也很简单&#xff0c;引入对应的js和css文件即可…

MySQL定时任务Event详解

文章目录 基本概念一、Event事件使用权限二、开启\关闭Event事件三、Event事件定义格式四、事件调度使用案例4.1 准备工作4.2 创建单次定时执行事件4.2.1 创建指定时间单次执行事件任务4.2.2 创建延迟时间单次执行事件任务4.2.3 创建单次执行事件任务[多SQ执行] 4.3 创建循环定…

数据仓库的数据处理架构Lambda和Kappa

1.数据仓库 数据仓库(Data Warehouse),简写DW。顾名思义,数据仓库是一个很大的数据存储集合,为企业分析性报告和决策支持而创建,是对多元业务数据的筛选与整合,具备一定的BI能力,主要用于企业的数据分析、数据挖掘、数据报表等方向,指导业务流程改进、监视时间、成本、…

从0到1实现RPC | 03 重载方法和参数类型转换

一、存在的问题 1.重载方法在当前的实现中还不支持&#xff0c;调用了会报错。 2.类型转换也还存在问题。 假设定义的接口如下&#xff0c;参数是float类型。 在Provider端接受到的是一个Double类型&#xff0c;这是因为web应用接收的请求后处理的类型。 在反射调用的时候就会…

前言:为什么C语言最适合编程入门?

前言&#xff1a;为什么C语言最适合编程入门&#xff1f; C语言被认为最适合编程入门的原因主要有以下几点&#xff1a; 基础且强大&#xff1a;C语言是一种基础且强大的编程语言。它提供了对底层硬件的直接访问&#xff0c;让初学者能够更好地理解计算机的工作原理&#xff0…

从零开始学Spring Boot系列-集成Kafka

Kafka简介 Apache Kafka是一个开源的分布式流处理平台&#xff0c;由LinkedIn公司开发和维护&#xff0c;后来捐赠给了Apache软件基金会。Kafka主要用于构建实时数据管道和流应用。它类似于一个分布式、高吞吐量的发布-订阅消息系统&#xff0c;可以处理消费者网站的所有动作流…

基于python+vue的O2O生鲜食品订购flask-django-nodejs-php

近年来互联网络的迅猛发展和电子终端设备的普及&#xff0c;赋予了各行业充足的发展空间。微信小程序的O2O生鲜食品订购相比于传统信息技术&#xff0c;时效性是它最大的特色&#xff0c;已经在电子娱乐、经济等中发挥着举足轻重的作用。短时间内迅速扩大了线上管理系统的规模。…

了解云原生

1、云原生学习路线 学习云原生(Cloud Native)技术涉及了解和掌握一系列的概念、技术和工具。云原生是一种构建和运行应用程序的方法&#xff0c;旨在充分利用云计算的灵活性、可伸缩性和弹性。以下是一个可以参考的学习路线&#xff1a; 了解云原生基础 学习云计算的基本概念&…

此站点正在尝试打开 ,chrome/edge 允许http网站打开url schema

正常https链接会有首次允许选项 但http没有&#xff0c;每次都会弹出&#xff0c;非常烦人。 Chrome / Edge 配置 地址栏输入 chrome://flags/搜索Insecure origins treated as secure, 配置允许网站&#xff0c;需要协议和端口再次跳转会显示始终允许选项

puppeteer使用示例云顶之弈官网

自己从0到1开发的&#xff0c;微信小程序【云顶宝藏】求求点个5星好评吧&#xff01; 需求&#xff1a;拿到所有英雄的信息 思路&#xff1a;点击每个英雄&#xff0c;进入英雄详情页&#xff0c;拿信息&#xff0c;并返回&#xff0c;继续下一个英雄** 最终效果 本地环境 win…

docker进阶篇,docker集群介绍

docker swarm 官网&#xff1a;https://docs.docker.com/engine/swarm/how-swarm-mode-works/nodes/ 什么是 docker swarm docker swarm 是 docker 官方提供的容器编排和集群管理工具。它允许用户将多个 docker 主机组成一个虚拟的 docker 集群&#xff0c;以便更高效地管理…