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

VUE笔记(七)项目登录

1、安装elementui

  • 在终端执行

vue add element
  • 注册组件

如果要使用哪个组件,大家需要在plugins/element.js中注册该组件

import Vue from 'vue'
import { Button } from 'element-ui'
Vue.use(Button)
  • 在页面组件中使用

<el-button type="primary">按钮</el-button>
  • 注册常用的elementui组件

为了方便期间,建议大家将如下配置文件内容复制到plugins/element.js文件中

import Vue from 'vue';
import {Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,Radio,RadioGroup,RadioButton,Checkbox,CheckboxButton,CheckboxGroup,Switch,Select,Option,OptionGroup,Button,ButtonGroup,Table,TableColumn,DatePicker,TimeSelect,TimePicker,Popover,Tooltip,Breadcrumb,BreadcrumbItem,Form,FormItem,Tabs,TabPane,Tag,Tree,Alert,Slider,Icon,Row,Col,Upload,Progress,Spinner,Badge,Card,Rate,Steps,Step,Carousel,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,Timeline,TimelineItem,Link,Divider,Image,Calendar,Backtop,PageHeader,CascaderPanel,Loading,MessageBox,Message,Notification
} from 'element-ui';
​
Vue.use(Pagination);
Vue.use(Dialog);
Vue.use(Autocomplete);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(RadioButton);
Vue.use(Checkbox);
Vue.use(CheckboxButton);
Vue.use(CheckboxGroup);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Popover);
Vue.use(Tooltip);
Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Tree);
Vue.use(Alert);
Vue.use(Slider);
Vue.use(Icon);
Vue.use(Row);
Vue.use(Col);
Vue.use(Upload);
Vue.use(Progress);
Vue.use(Spinner);
Vue.use(Badge);
Vue.use(Card);
Vue.use(Rate);
Vue.use(Steps);
Vue.use(Step);
Vue.use(Carousel);
Vue.use(CarouselItem);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Cascader);
Vue.use(ColorPicker);
Vue.use(Transfer);
Vue.use(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);
Vue.use(Timeline);
Vue.use(TimelineItem);
Vue.use(Link);
Vue.use(Divider);
Vue.use(Image);
Vue.use(Calendar);
Vue.use(Backtop);
Vue.use(PageHeader);
Vue.use(CascaderPanel);
​
Vue.use(Loading.directive);
​
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

2、登录的静态页面

  • 在App.vue中配置路由出口

<router-view></router-view>
  • 在views文件夹下创建Login.vue文件

<template><div class="container"><div class="login-container"><div class="login-box"><div class="avatar-box"><img src="https://www.woniuxy.com/static/woniuopen/img/Frame%20265.png" class="avatar"></div><div class="login_form"><el-form :model="user" :rules="loginFormRules"><el-form-item prop="username"><el-input prefix-icon="el-icon-user" v-model="user.username"></el-input></el-form-item><el-form-item prop="password"><el-input show-password prefix-icon="el-icon-s-cooperation" v-model="user.password"></el-input></el-form-item><el-form-item><el-button type="primary" class="loginbtn" @click="login">登录</el-button></el-form-item></el-form></div></div></div></div>
</template>
<style>.container{width: 100vw;height: 100vh;background:linear-gradient(to bottom,#000,#5A57DA);}.login-container{height: 100%;background-image: url('@/assets/xkbg.png');background-repeat:repeat-x;background-position: center bottom;}.login-box{position:absolute;width: 400px;height: 280px;background-color:rgba(255, 255, 255, .5);top:50%;left: 50%;transform: translate(-50%,-50%);border-radius: 15px;}.avatar-box{position:absolute;width: 100px;height: 100px;border: 1px solid #ccc;border-radius: 50%;left: 50%;transform: translate(-50%,-50%);padding: 10px;background-color:orange;}.avatar{width: 100px;height: 100px;border:1px solid #ccc;border-radius: 50%;}.login_form {position: absolute;bottom: 0;width: 100%;padding: 0 20px;box-sizing: border-box;}.loginbtn {width: 100%;}
</style>
  • 在router/index.js文件中配置路由

const routes=[{path:'/login',component:()=>import('@/views/Login.vue')}
]

3、完成表单校验功能

<template><div class="container"><div class="login-container"><div class="login-box"><div class="avatar-box"><img src="https://www.woniuxy.com/static/woniuopen/img/Frame%20265.png" class="avatar"></div><div class="login_form"><el-form :model="user" :rules="loginFormRules"><el-form-item prop="username"><el-input prefix-icon="el-icon-user" v-model="user.username"></el-input></el-form-item><el-form-item prop="password"><el-input show-password prefix-icon="el-icon-s-cooperation" v-model="user.password"></el-input></el-form-item><el-form-item><el-button type="primary" class="loginbtn" @click="login">登录</el-button></el-form-item></el-form></div></div></div></div>
</template>
<script>
export default {data(){return{user:{username:'',password:''},loginFormRules:{username:[{ required: true, message: '用户名不能为空', trigger: 'blur' }],password:[{ required: true, message: '密码不能为空', trigger: 'blur' },{ min: 3, max: 15, message: '长度在 3 到 12 个字符', trigger: 'blur' }] }}}
}
</script>

要完成校验功能,要具体以下几点

  • <el-form>添加:rules="loginFormRules"

  • 将 form-Item 的 prop 属性设置为需校验的字段名

4、完成登录功能

<script>
export default {data(){return{user:{username:'',password:''}}},methods:{async login(){console.log(this.user);let {code,message,token}=await this.$api.users.login(this.user)if(code){this.$message.success(message)}else{this.$message.error('登录失败')}//保存token到localStoragelocalStorage.setItem('token',token)this.$router.replace('/home')}}
}
</script>

相关文章:

VUE笔记(七)项目登录

1、安装elementui 在终端执行 vue add element 注册组件 如果要使用哪个组件&#xff0c;大家需要在plugins/element.js中注册该组件 import Vue from vue import { Button } from element-ui Vue.use(Button) 在页面组件中使用 <el-button type"primary"&…...

大语言模型之六- LLM之企业私有化部署

数据安全是每个公司不得不慎重对待的&#xff0c;为了提高生产力&#xff0c;降本增效又不得不接受新技术带来的工具&#xff0c;私有化部署对于公司还是非常有吸引力的。大语言模型这一工具结合公司的数据可以大大提高公司生产率。 私有化LLM需要处理的问题 企业内私有化LLM…...

Python3 列表

Python3 列表 序列是 Python 中最基本的数据结构。 序列中的每个值都有对应的位置值&#xff0c;称之为索引&#xff0c;第一个索引是 0&#xff0c;第二个索引是 1&#xff0c;依此类推。 Python 有 6 个序列的内置类型&#xff0c;但最常见的是列表和元组。 列表都可以进…...

OpenCV基础知识(8)— 图形检测

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。图形检测是计算机视觉的一项重要功能。通过图形检测可以分析图像中可能存在的形状&#xff0c;然后对这些形状进行描绘&#xff0c;例如搜索并绘制图像的边缘&#xff0c;定位图像的位置&#xff0c;判断图像中有没有直线、…...

Java虚拟机

文章目录 JVM运行时数据区域HotSpot虚拟机对象探秘实战&#xff1a;OutOfMemoryError异常 JVM 运行时数据区域 HotSpot虚拟机对象探秘 实战&#xff1a;OutOfMemoryError异常...

c++学习 之 函数重载注意事项

文章目录 引用作为函数重载的条件函数重载遇到默认参数 引用作为函数重载的条件 #include <iostream> using namespace std; void fun(int &a) {cout << "void fun(int & a)" << endl; }void fun(const int &a) {cout << "…...

2023-08-27 LeetCode每日一题(合并区间)

2023-08-27每日一题 一、题目编号 56. 合并区间二、题目链接 点击跳转到题目位置 三、题目描述 以数组 intervals 表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#…...

C#,数值计算——调适数值积分法(adaptive quadrature)的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 调适数值积分法 /// adaptive quadrature /// </summary> public class Adapt { private double x1 { get; } 0.942882415695480; private …...

微信小程序发布迭代版本后如何提示用户强制更新新版本

在点击小程序发布的时候选择&#xff0c;升级选项 之前用户使用过的再打开小程序页面就会弹出升级弹窗modal...

星际争霸之小霸王之小蜜蜂(七)--消失的子弹

目录 前言 一、删除子弹 二、限制子弹数量 三、继续重构代码 总结 前言 昨天我们已经让子弹飞了起来&#xff0c;但是会面临一个和之前小蜜蜂一样的问题&#xff0c;小蜜蜂的行动应该限制在窗口内&#xff0c;那么子弹也是有相同之处&#xff0c;也需要限制一个移动范围&…...

Hadoop入门机安装hadoop

0目录 1.Hadoop入门 2.linux安装hadoop 1.Hadoop入门 定义 Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下&#xff0c;开发分布式程序。充分利用集群的威力进行高速运算和存储。 优势 高可靠性&#xff1a;Hadoop底层维护多…...

cookie技术介绍

title: cookie技术 date: 2023-08-27 21:34:19 tags: [cookie, 网络, http] categories: 网络 我们经常说的cookie缓存数据&#xff0c;允许cookie是什么意思? Cookie也被称作Cookies&#xff0c;它是一种让网站的服务器端可以把少量数据存储在客户端的硬盘或内存中&#x…...

网络摄像头:SparkoCam Crack

SparkoCam 网络摄像头软件 SparkoCam 是一款网络摄像头和视频效果软件&#xff0c;用于广播实时网络摄像头效果并将其应用到视频聊天和录音中。 使用佳能/尼康数码单反相机作为常规网络摄像头通过向实时视频聊天和视频录制添加酷炫的网络摄像头效果和图形来增强 USB 网络摄像…...

【缓存设计】记一种不错的缓存设计思路

文章目录 前言场景设计思路小结 前言 之前与同事讨论接口性能问题时听他介绍了一种缓存设计思路&#xff0c;觉得不错&#xff0c;做个记录供以后参考。 场景 假设有个以下格式的接口&#xff1a; GET /api?keys{key1,key2,key3,...}&types{1,2,3,...}其中 keys 是业务…...

微信小程序大学校园二手教材与书籍拍卖系统设计与实现

摘 要 随着应用技术的发展以及电子商务平台的崛起&#xff0c;利用线上平台实现的二手交易为传统的二手交易市场注入了新的生机&#xff0c;大学校园内的新生和应届毕业生的相互交替产生了巨大的二手交易空间&#xff0c;同时考虑到环保和资源再利用&#xff0c;大学校园的书籍…...

涛然自得周刊(第06期):韩版苏东坡的突围

作者&#xff1a;何一涛 日期&#xff1a;2023 年 8 月 27 日 涛然自得周刊主要精选作者阅读过的书影音内容&#xff0c;不定期发布。历史周刊内容可以看这里。 电影 兹山鱼谱 讲述丁若铨因政治事件被贬黜到了遥远的黑山岛。来到岛上后&#xff0c;丁被大自然环境疗愈&#…...

DOCKER 部署 webman项目

# 设置基础镜像 FROM php:8.2-fpm# 安装必要的软件包和依赖项 RUN apt-get update && apt-get install -y \nginx \libzip-dev \libpng-dev \libjpeg-dev \libfreetype6-dev \&& rm -rf /var/lib/apt/lists/*# 安装 PHP 扩展 RUN docker-php-ext-configure gd …...

LLMs:LangChain-Chatchat(一款可实现本地知识库问答应用)的简介、安装、使用方法之详细攻略

LLMs&#xff1a;LangChain-Chatchat(一款可实现本地知识库问答应用)的简介、安装、使用方法之详细攻略 目录 LangChain-Chatchat的简介 1、原理图解 2、文档处理实现流程 1、模型支持 (1)、LLM 模型支持 (2)、Embedding 模型支持 LangChain-Chatchat的安装 1、镜像部署…...

Qt 解析XML文件 QXmlStreamReader

如何使用QXmlStreamReader来解析格式良好的XML&#xff0c;Qt的文档中指出&#xff0c;它是一种更快、更方便的Qt自己的SAX解析器&#xff08;QXmlSimpleReader&#xff09;的替代&#xff0c;它也较快&#xff0c;在某种情况下&#xff0c;比DOM&#xff08;QDomDocument&…...

图像线段检测几种方法

1、方法一 当我将OpenCV提升到4.1.0时&#xff0c;LineSegmentDetector&#xff08;LSD&#xff09;消失了。 OpenCV-contrib有一个名为FastLineDetector的东西&#xff0c;如果它被用作LSD的替代品似乎很好。如果你有点感动&#xff0c;你会得到与LSD几乎相同的结果。 2、方…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...