当前位置: 首页 > news >正文

工作需求,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>

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

相关文章:

工作需求,Vue实现登录

加油&#xff0c;新时代打工人&#xff01; vue 2.x Element UI <template><div class"body" :style"{background-image: url(${require(/assets/images/login.png)})}"><el-form :rules"rules" ref"loginForm" :mode…...

【生产力】Mac 窗口布局工具 Magnet

Magnet 是一款为Mac操作系统设计的实用工具&#xff0c;旨在帮助用户更加方便地管理和组织他们的窗口布局。通过使用Magnet&#xff0c;用户可以轻松地将应用程序窗口拖放到屏幕的各个部分&#xff0c;从而实现窗口的自动排列和大小调整。这款工具特别适合需要同时处理多个应用…...

Linux的相关指令总结

Linux的基本命令 Linux指令是Linux操作系统的核心组成部分&#xff0c;它们为用户和管理员提供了与系统进行交互和管理的强大工具。这些指令涵盖了从基本的文件操作到复杂的系统配置和管理的各个方面。 ls指令 功能&#xff1a;用于列出指定目录中的文件和子目录名称。语法&am…...

HTTPS 加密原理

HTTPS 加密原理 HTTPS 加密原理常见的加密方法单向加密对称加密非对称加密 为什么需要加密&#xff1f;加密流程演变对称加密非对称加密非对称加密对称加密 存在问题解决方式数字证书生成方式 整体流程 HTTPS 加密原理 常见的加密方法 单向加密 也称为不可逆加密&#xff0c…...

【数据挖掘】实验4:数据探索

实验4&#xff1a;数据探索 一&#xff1a;实验目的与要求 1&#xff1a;熟悉和掌握数据探索&#xff0c;学习数据质量分类、数据特征分析和R语言的主要数据探索函数。 二&#xff1a;实验内容 1&#xff1a;数据质量分析 2&#xff1a;统计量分析 3&#xff1a;贡献度分析…...

PTA后缀式求值(整型版)

作者 周强 单位 青岛大学 我们人类习惯于书写“中缀式”&#xff0c;如 3 5 * 2 &#xff0c;其值为13。 (p.s. 为什么人类习惯中缀式呢&#xff1f;是因为中缀式比后缀式好用么&#xff1f;&#xff09; 而计算机更加习惯“后缀式”&#xff08;也叫“逆波兰式”&#xff…...

FPGA与以太网相关接口知识

一&#xff1a;一般硬件架构&#xff1b;(对于1000m网一般都使用普通io口&#xff0c;普通管脚能跑800M(正点技术说的))) 1&#xff1a;FPGA普通管脚——phy芯片&#xff08;pcspma&#xff09;——rg45 2&#xff1a;FPGA(GT)光口(利用fpga的GT&#xff0c;直接节约了phy芯片…...

使用git+ssh访问github,避免下载资源失败

一、创建github账户之后&#xff0c;记住注册邮箱和账户名 我的邮箱&#xff1a;yuanyan23mails.ucas.ac.cn 账户名&#xff1a;thekingofjumpshoot 下边的相关位置需要用自己的邮箱和用户名替代 二、输入本地生成秘钥和公钥命令&#xff0c;并且生成公私钥对 ssh-keygen …...

cookie、session和token的区别

引言 在当今的互联网时代&#xff0c;Web 应用程序的安全性和用户体验至关重要。身份验证和状态管理是构建安全、可靠的 Web 应用的核心部分。cookie、session、token都是常用的身份验证和状态管理机制。 Cookie 什么是 Cookie&#xff1f; Cookie 是存储在用户浏览器中的小…...

如何解决Layui后台接口返回数据,但是table.render不渲染表格数据的问题

我这边进行了pareData数据格式转换&#xff0c;response重新定义了layui的参数格式规范 接口正常返回了数据 但是就是不渲染&#xff0c;我这个郁闷啊&#xff01;&#xff01; 忽然&#xff0c;我把后台重新定义的layui规定的格式参数&#xff0c;有个参数名叫data&#xff0…...

matlab 将矩阵写入文件

目录 一、概述1、算法概述2、主要函数二、将矩阵写入到文本文件三、将矩阵写入电子表格文件四、将矩阵写入指定的工作表和范围五、将数据追加到电子表格六、将矩阵数据追加到文本文件七、参考链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此…...

pandas的综合练习

事先说明&#xff1a; 由于每次都要导入库和处理中文乱码问题&#xff0c;我都是在最前面先写好&#xff0c;后面的代码就不在写了。要是copy到自己本地的话&#xff0c;就要把下面的代码也copy下。 # 准备工作import pandas as pd import numpy as np from matplotlib impor…...

北京中科富海低温科技有限公司确认出席2024第三届中国氢能国际峰会

会议背景 随着全球对清洁能源的迫切需求&#xff0c;氢能能源转型、工业应用、交通运输等方面具有广阔前景&#xff0c;氢能也成为应对气候变化的重要解决方案。根据德勤的报告显示&#xff0c;到2050年&#xff0c;绿色氢能将有1.4万亿美元市场。氢能产业的各环节的关键技术突…...

非插件方式为wordpress添加一个额外的编辑器

在WordPress中&#xff0c;要添加一个额外的区块编辑器(通常指的是Gutenberg区块编辑器中的一个自定义区块)&#xff0c;你需要编写一些PHP代码来注册新的区块&#xff0c;并可能还需要一些JavaScript来处理前端的逻辑。下面是一个简单的示例&#xff0c;展示了如何注册一个自定…...

Spark Stage

Spark Stage 什么是Stage Spark中的一个Stage只不过是物理执行计划其中的一个步骤&#xff0c;它是物理执行计划的一个执行单元。一个Job会被拆分为多组Task&#xff0c;每组任务被称为一个Stage&#xff0c;可以简单理解为MapReduce里面的Map Stage&#xff0c; Reduce Stag…...

【国家计算机二级考试C语言.2024】学习备忘录

说明 分值 4060100 40分&#xff1a; 这里面有一大堆程序结果选这题&#xff0c;如果手速还可以。那遇到有疑问的情况就自己去倒计算器的ad E上面去打一打。能够跑出来&#xff0c;结果那是100%的没问题。 有些概念题比较讨厌&#xff0c;只能自己去记忆了。要去背诵熟熟的。…...

十分钟掌握redis精髓指令

编译安装 git clone https://gitee.com/mirrors/redis.git cd redis make make test make install # 默认安装在 /usr/local/bin # redis-server 是服务端程序 # redis-cli 是客户端程序启动 mkdir redis-data # 把redis文件夹下 redis.conf 拷贝到 redis-data # 修改 redis.…...

突然断电导致git损坏修复

背景 使用ide开发时突然断电启动后所有文件都成了没有提交的文件。打开git视图日志也消失不见 # git命令执行结果如下 git status No commits yetChanges to be committed:(use "git rm --cached <file>..." to unstage)new file: .github/FUNDING.ymlnew …...

MATLAB入门指南:从零开始进行数学建模竞赛

第1部分&#xff1a;认识MATLAB 1.1 什么是MATLAB&#xff1f; MATLAB&#xff08;Matrix Laboratory的缩写&#xff09;是一个高性能的数值计算环境和第四代编程语言。由MathWorks公司开发&#xff0c;它提供了一个便捷的数学解决框架&#xff0c;主要用于算法开发、数据可视…...

【JavaEE初阶系列】——带你了解volatile关键字以及wait()和notify()两方法背后的原理

目录 &#x1f6a9;volatile关键字 &#x1f388;volatile 不保证原子性 &#x1f388;synchronized 也能保证内存可见性 &#x1f388;Volatile与Synchronized比较 &#x1f6a9;wait和notify &#x1f388;wait()方法 &#x1f4bb;wait(参数)方法 &#x1f388;noti…...

考虑需求响应的微网优化调度MATLAB程序:基于粒子群算法,包含风力、光伏、储能等多主体模块化...

考虑需求响应的微网优化调度matlab 程序采用粒子群算法&#xff0c;风力发电机、光伏发电机、储能装置、燃气轮机、柴油机组等主体&#xff0c;考虑负荷需求响应、soc约束等&#xff0c;程序模块化编程&#xff0c;注释清楚&#xff0c;有对应资料概述 本文介绍了一套基于粒子群…...

3步搞定音乐标签混乱问题的终极解决方案

3步搞定音乐标签混乱问题的终极解决方案 【免费下载链接】music-tag-web 音乐标签编辑器&#xff0c;可编辑本地音乐文件的元数据&#xff08;Editable local music file metadata.&#xff09; 项目地址: https://gitcode.com/gh_mirrors/mu/music-tag-web 你是否曾为音…...

深度解析VeraGrid:电力系统开源仿真平台的架构革新与实践应用

深度解析VeraGrid&#xff1a;电力系统开源仿真平台的架构革新与实践应用 【免费下载链接】VeraGrid VeraGrid, a cross-platform power systems software written in Python with user interface, used in academia and industry. 项目地址: https://gitcode.com/gh_mirrors…...

输入法词库跨平台迁移的技术实现与最佳实践

输入法词库跨平台迁移的技术实现与最佳实践 【免费下载链接】imewlconverter ”深蓝词库转换“ 一款开源免费的输入法词库转换程序 项目地址: https://gitcode.com/gh_mirrors/im/imewlconverter 跨平台输入体验的核心痛点 在数字化办公环境中&#xff0c;用户通常面临…...

打造一个产品评论分析AI工具

客户评论是公司可访问的最丰富的产品反馈来源之一。它们揭示了客户在购买后如何实际体验产品&#xff0c;他们喜欢什么&#xff0c;什么让他们沮丧&#xff0c;他们期望什么&#xff0c;以及产品在哪里不足。 这种反馈特别有价值&#xff0c;因为它是自发的。客户自然会谈及对…...

rabbitmq新手福音,快马ai生成带详解注释的入门代码,轻松理解消息队列

RabbitMQ新手入门&#xff1a;从零开始理解消息队列 最近在学习消息队列技术&#xff0c;发现RabbitMQ作为最流行的开源消息代理之一&#xff0c;对于新手来说概念确实有点抽象。不过通过InsCode(快马)平台的帮助&#xff0c;我很快就能上手实践了。下面分享我的学习过程&…...

解密AI艺术二维码:5步掌握control_v1p_sd15_qrcode_monster实战进阶

解密AI艺术二维码&#xff1a;5步掌握control_v1p_sd15_qrcode_monster实战进阶 【免费下载链接】control_v1p_sd15_qrcode_monster 项目地址: https://ai.gitcode.com/hf_mirrors/monster-labs/control_v1p_sd15_qrcode_monster 你是否曾为传统二维码的单调外观感到遗…...

Word论文写作福音:3分钟搞定APA第7版参考文献格式配置

Word论文写作福音&#xff1a;3分钟搞定APA第7版参考文献格式配置 【免费下载链接】APA-7th-Edition Microsoft Word XSD for generating APA 7th edition references 项目地址: https://gitcode.com/gh_mirrors/ap/APA-7th-Edition 还在为论文参考文献格式发愁吗&#…...

医疗AI辅助诊断渲染延迟>180ms?立即执行这4项C++17 constexpr预计算+SIMD向量化改造(附VS2022 / CLion双环境调试checklist)

第一章&#xff1a;医疗AI辅助诊断渲染延迟的临床影响与性能基线定义在放射科、病理科及急诊超声等实时影像决策场景中&#xff0c;AI辅助诊断系统若出现毫秒级渲染延迟&#xff0c;可能直接干扰医生对动态血流、心室壁运动或微小结节增强特征的连续性判读。临床研究表明&#…...

嵌入式C++安全开发避坑指南,覆盖ARM Cortex-R/A系列、VxWorks与AUTOSAR OS的12类时序敏感漏洞

第一章&#xff1a;嵌入式C安全开发的工业级挑战与范式演进在工业控制、汽车电子与医疗设备等高可靠性领域&#xff0c;嵌入式C正面临前所未有的安全张力&#xff1a;资源受限性与功能安全性之间、实时确定性与抽象灵活性之间、遗留代码兼容性与现代语言特性之间&#xff0c;形…...