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

VSCode创建VUE项目(二)前端登录页面

一.创建登录页面

代码:

<template><div class="login-container dis-h"><div class="login-form  dis-h"><div class="dis-v left"><span> 欢迎~ </span><span> VUE 新世界 </span></div><div class="dis-v right"><div class="username dis-h"><el-input placeholder="请输入用户名"/></div><div class="pwd dis-h"><el-input type="password" placeholder="请输入密码"/></div><div class="btn dis-h"><el-button size="large"  style="width:220px;background-color:#626aef;color:#fff;font-weight:bold; ">登录</el-button>             </div></div>   </div></div>
</template>
<script setup>
</script>
<style >
.login-container{width: 100vw;height: 100vh;background-image: url('../assets/background.jpeg');align-items: center;justify-content: center;background-repeat: no-repeat; /* 背景图片不重复 */    background-size: cover; /* 背景图片覆盖整个div区域 */background-position: center; /* 背景图片居中显示 */
}
.login-form{width: 600px;height: 300px;/* background-color: red; */}
.login-form .left{width: 50%;height: 100%;align-items: left;justify-content: center;font-size: 1.6rem;font-weight: bold;background:linear-gradient(to right bottom,rgba(136,209,234,0.80) 5%,rgba(215,193,187,0.80) 100% );color: #fff;text-indent:1rem;
}
.login-form .right{width: 50%;height: 100%;background-color: rgba(255, 255, 255, 0.90);align-items: center;justify-content: center;
}
.login-form .username,.pwd,.btn{padding: 0.5rem 0; }/*水平排列子元素*/
.dis-h{
display: flex;
}
/*垂直排列子元素*/
.dis-v{
display: flex;
flex-direction: column;
}</style>

二:修改路由:

三.修改App.vue文件,注释掉导航信息

四:刷新网页查看效果

四.前端登录并跳转逻辑处理

输入用户名、密码点击登录,成功可以跳转到其他页面

代码处理如图所示:

修改后的LoginView.vue代码:

<template><div class="login-container dis-h"><div class="login-form  dis-h"><div class="dis-v left"><span> 欢迎~ </span><span> VUE 新世界 </span></div><div class="dis-v right"><div class="username dis-h"><el-input placeholder="请输入用户名" v-model="loginform.username"/></div><div class="pwd dis-h"><el-input type="password" placeholder="请输入密码" v-model="loginform.pwd"/></div><div class="btn dis-h"><el-button size="large"  style="width:220px;background-color:#626aef;color:#fff;font-weight:bold; "@click="commit">登录</el-button>             </div></div>   </div></div>
</template>
<script setup>
import {ref} from "vue"
import router from '@/router';
import { ElMessage } from 'element-plus';var loginform=ref({username:"",pwd:""
})var commit=function(){if(loginform.value.username=="123"&&loginform.value.pwd=="111"){ElMessage.success("YES,成功啦啦啦啦啦!");router.replace("./about")}else{ElMessage.error("Sorry,失败!");}
}</script>
<style >
.login-container{width: 100vw;height: 100vh;background-image: url('../assets/background.jpeg');align-items: center;justify-content: center;background-repeat: no-repeat; /* 背景图片不重复 */    background-size: cover; /* 背景图片覆盖整个div区域 */background-position: center; /* 背景图片居中显示 */
}
.login-form{width: 600px;height: 300px;/* background-color: red; */}
.login-form .left{width: 50%;height: 100%;align-items: left;justify-content: center;font-size: 1.6rem;font-weight: bold;background:linear-gradient(to right bottom,rgba(136,209,234,0.80) 5%,rgba(215,193,187,0.80) 100% );color: #fff;text-indent:1rem;
}
.login-form .right{width: 50%;height: 100%;background-color: rgba(255, 255, 255, 0.90);align-items: center;justify-content: center;
}
.login-form .username,.pwd,.btn{padding: 0.5rem 0; }/*水平排列子元素*/
.dis-h{
display: flex;
}
/*垂直排列子元素*/
.dis-v{
display: flex;
flex-direction: column;
}</style>

修改后的AboutView.vue代码

<template><div class="about"><h1>This is an about page</h1></div><div><el-button @click="loginOut">退出登录</el-button></div>
</template><script setup>
import router from '@/router';var loginOut=function(){router.replace("/")
}</script>

相关文章:

VSCode创建VUE项目(二)前端登录页面

一.创建登录页面 代码&#xff1a; <template><div class"login-container dis-h"><div class"login-form dis-h"><div class"dis-v left"><span> 欢迎~ </span><span> VUE 新世界 </span>&l…...

centos 8.4学习小结

1.权限委派 2.vim快捷方式 2.1非正常关闭文本处理方式 2.2快捷方式 2.3TAB键补齐安装包 [ rootcloud Packages]# rpm -ivh bash-completion-2.7-5.el8.noarch.rpm 2.4#history 查询历史记录 [rootcloud ~]# vim /etc/profile HISTSIZE1000&#xff08;默认保存1000条历史记…...

AI 设计工具合集

&#x1f423;个人主页 可惜已不在 &#x1f424;这篇在这个专栏AI_可惜已不在的博客-CSDN博客 &#x1f425;有用的话就留下一个三连吧&#x1f63c; ​ 前言: AI 视频&#xff0c;科技与艺术的精彩融合。它借助先进的人工智能技术&#xff0c;为影像创作带来全新可能。本书…...

mac 源代码安装openresty

1. clone源代码 git clone https://github.com/openresty/openresty.git 2. 安装依赖包 brew install hg unix2dos brew install pcre openssl 3. 编译 make 4. 安装openresty cd openresty-1.27.1.1 ./configure --prefix/opt/openresty --with-http_ssl_module --with-…...

人工智能和机器学习之线性代数(二)

人工智能和机器学习之线性代数(二) 本文Linear Algebra 101 for AI/ML – Part 2将通过介绍向量的点积(dot Product)、Embedding及其在相似性搜索中的应用来建立这些基础知识。 将学习Embedding&#xff0c;Embedding是表示概念、对象和想法的特殊类型的向量。Embedding在整个…...

Postman中的form-data 和 JSON 的区别

在使用 Postman 进行 API 测试时&#xff0c;form-data 和 JSON 是两种常用的请求体格式&#xff0c;它们有以下几个主要区别&#xff1a; 1. 数据格式 form-data: 主要用于表单数据的提交&#xff0c;适合文件上传和键值对的数据传递。数据以键值对的形式编码&#xff0c;类似…...

网络安全基础知识点_网络安全知识基础知识篇

文章目录 一、网络安全概述1.1 定义1.2 信息安全特性1.3 网络安全的威胁1.4 网络安全的特征 二、入侵方式2.1 黑客2.1.1 入侵方法2.1.2 系统的威胁2.2 IP欺骗与防范2.2.1 TCP等IP欺骗基础知识2.2.2 IP欺骗可行的原因2.2.3 IP欺骗过程2.2.4 IP欺骗原理2.2.5 IP欺骗防范2.3 Sniff…...

Vue.js 从入门到精通:全面解析组件化、路由与状态管理(附 Todo 案例)

在当今的前端开发领域&#xff0c;Vue.js 以其简洁、高效和灵活的特点受到了广泛的关注和应用。本文将带你从 Vue 的基础知识入手&#xff0c;逐步深入到高级特性&#xff0c;让你对 Vue 有一个全面的了解&#xff0c;并通过实际案例帮助你更好地掌握 Vue 的开发。 一、Vue 简…...

AI Weekly#1:过去一周重要的AI资讯汇总

&#x1f680;热点头条 诺贝尔奖青睐AI领域&#xff1a;2024年诺贝尔物理学奖和化学奖均授予了与人工智能相关的研究。物理学奖颁发给了约翰霍普菲尔德和杰弗里辛顿&#xff0c;表彰他们在机器学习领域的开创性工作。化学奖则授予了大卫贝克、德米斯哈萨比斯和约翰江珀&#xf…...

图论刷题

卡码网 98. 所有可达路径 使用邻接矩阵存储&#xff1a; #include<iostream> #include<vector> using namespace std;vector<vector<int>>res;//收集符合条件的路径vector<int>path;//0节点到终点的路径//确定递归函数 参数和返回值void dfs(c…...

ICM20948 DMP代码详解(85)

接前一篇文章:ICM20948 DMP代码详解(84) 上一回解析了inv_icm20948_ctrl_enable_sensor函数的大部分代码,只剩下一行代码没有解析。为了便于理解和回顾,再次贴出inv_icm20948_ctrl_enable_sensor函数源码,在EMD-Core\sources\Invn\Devices\Drivers\ICM20948\Icm20948Data…...

深入解析:Linux tcpdump命令在网络流量分析中的实战应用

tcpdump是一个强大的命令行工具&#xff0c;用于捕获和分析TCP、UDP、ICMP等协议的网络流量。 功能与用途 捕获网络流量&#xff1a;tcpdump可以捕获和显示来自本地计算机或通过网络传输的数据包&#xff0c;提供有关数据包的详细信息&#xff0c;如源和目的IP地址、端口号、…...

Java集合常见知识总结(上)

Java 集合概览 Java 集合&#xff0c;也叫作容器&#xff0c;主要是由两大接口派生而来&#xff1a;一个是 Collection接口&#xff0c;主要用于存放单一元素&#xff1b;另一个是 Map 接口&#xff0c;主要用于存放键值对。对于Collection 接口&#xff0c;下面又有三个主要的…...

【算法】力扣:K个一组反转链表

前置知识 数据结构-链表反转部分链表算法题的手写栈使用 难度&#xff1a; 初阶&#xff1a;使用容器&#xff0c; 难度中等。进阶&#xff1a;纯coding修改指针 &#xff0c;难度中等&#xff0c;虽然leetcode是困难题。不过更加注重细节。 题目&#xff1a;反转 k 组中的…...

Matlab报错——错误使用 vertcat

错误提示&#xff1a; 原因&#xff1a; 这个错误表明 segment_lengths 的维度和 0 不一致。在 MATLAB 中&#xff0c;有时&#xff0c;diff 函数的输出可能是行向量&#xff0c;而segment_lengths 应该是一个列向量才能与 0 正确连接。 解决方法&#xff1a; 使用转置操作 …...

【如何获取股票数据10】Python、Java等多种主流语言实例演示获取股票行情api接口之沪深A股历史分时KDJ数据获取实例演示及接口API说明文档

最近一两年内&#xff0c;股票量化分析逐渐成为热门话题。而从事这一领域工作的第一步&#xff0c;就是获取全面且准确的股票数据。因为无论是实时交易数据、历史交易记录、财务数据还是基本面信息&#xff0c;这些数据都是我们进行量化分析时不可或缺的宝贵资源。我们的主要任…...

进入 Searing-66 火焰星球:第一周游戏指南

Alpha 第四季已开启&#xff0c;穿越火焰星球 Searing-66&#xff0c;带你开启火热征程。准备好勇闯炙热的沙漠&#xff0c;那里有无情的高温和无情的挑战在等待着你。从高风险的烹饪对决到炙热的冒险&#xff0c;Searing-66 将把你的耐力推向极限。带上充足的水&#xff0c;天…...

考研论坛设计小程序ssm+论文源码调试讲解

2相关技术 2.1微信小程序 小程序是一种新的开放能力&#xff0c;开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。尤其拥抱微信生态圈&#xff0c;让微信小程序更加的如虎添翼&#xff0c;发展迅猛。 2.2 MYSQL数据…...

JAVA笔记 | EasyExcel创建带有简单下拉框的导入模板

目录 前文 业务需求 具体代码 新增Handler 控制层 前文 SpringBoot笔记 | EasyExcel导入导出及基于模板导出_easyexcel模板导出-CSDN博客 业务需求 需要一个导出模板。一个列需要填写固定的值&#xff0c;或者方便用户填写。 自己需求&#xff0c;几个固定的字段对应固…...

【含开题报告+文档+PPT+源码】贫困儿童一对一扶贫帮扶系统设计与实现

开题报告 根据《中华人民共和国慈善法》第五十八条规定&#xff0c;慈善组织确定慈善受益人&#xff0c;应当坚持公开、公平、公正的原则&#xff0c;不得指定慈善组织管理人员的利害关系人作为受益人[2]。以上所列举的平台基本没有做到公开、公平、公正的原则&#xff0c;例如…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

​​企业大模型服务合规指南:深度解析备案与登记制度​​

伴随AI技术的爆炸式发展&#xff0c;尤其是大模型&#xff08;LLM&#xff09;在各行各业的深度应用和整合&#xff0c;企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者&#xff0c;还是积极拥抱AI转型的传统企业&#xff0c;在面向公众…...

云安全与网络安全:核心区别与协同作用解析

在数字化转型的浪潮中&#xff0c;云安全与网络安全作为信息安全的两大支柱&#xff0c;常被混淆但本质不同。本文将从概念、责任分工、技术手段、威胁类型等维度深入解析两者的差异&#xff0c;并探讨它们的协同作用。 一、核心区别 定义与范围 网络安全&#xff1a;聚焦于保…...

高抗扰度汽车光耦合器的特性

晶台光电推出的125℃光耦合器系列产品&#xff08;包括KL357NU、KL3H7U和KL817U&#xff09;&#xff0c;专为高温环境下的汽车应用设计&#xff0c;具备以下核心优势和技术特点&#xff1a; 一、技术特性分析 高温稳定性 采用先进的LED技术和优化的IC设计&#xff0c;确保在…...