实现前端登录注册功能(有源码)

引言

        用户登录和注册是任何现代Web应用程序的基本功能。在前端开发中,实现一个安全且用户友好的登录注册系统至关重要。本文将介绍如何使用HTML、CSS和JavaScript(包括Vue.js)来实现前端的登录和注册功能。

1. 项目结构

        首先,我们定义项目的基本结构:

my-app/
├── public/
│   ├── index.html
├── src/
│   ├── components/
│   │   ├── Login.vue
│   │   ├── Register.vue
│   ├── App.vue
│   ├── main.js
├── package.json

2. 创建Login组件

Login.vue
<template><div class="login-container"><h2>登录</h2><form @submit.prevent="handleLogin"><div class="form-group"><label for="username">用户名:</label><input type="text" id="username" v-model="username" required /></div><div class="form-group"><label for="password">密码:</label><input type="password" id="password" v-model="password" required /></div><button type="submit">登录</button></form></div>
</template><script>
export default {data() {return {username: '',password: '',};},methods: {handleLogin() {const user = {username: this.username,password: this.password,};console.log('Logging in with', user);// 在此处添加API调用逻辑},},
};
</script><style scoped>
.login-container {width: 300px;margin: 0 auto;padding: 20px;border: 1px solid #ccc;border-radius: 4px;background: #f9f9f9;
}.form-group {margin-bottom: 15px;
}.form-group label {display: block;margin-bottom: 5px;
}.form-group input {width: 100%;padding: 8px;box-sizing: border-box;
}button {width: 100%;padding: 10px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background-color: #45a049;
}
</style>

3. 创建Register组件

Register.vue
<template><div class="register-container"><h2>注册</h2><form @submit.prevent="handleRegister"><div class="form-group"><label for="username">用户名:</label><input type="text" id="username" v-model="username" required /></div><div class="form-group"><label for="email">邮箱:</label><input type="email" id="email" v-model="email" required /></div><div class="form-group"><label for="password">密码:</label><input type="password" id="password" v-model="password" required /></div><button type="submit">注册</button></form></div>
</template><script>
export default {data() {return {username: '',email: '',password: '',};},methods: {handleRegister() {const user = {username: this.username,email: this.email,password: this.password,};console.log('Registering with', user);// 在此处添加API调用逻辑},},
};
</script><style scoped>
.register-container {width: 300px;margin: 0 auto;padding: 20px;border: 1px solid #ccc;border-radius: 4px;background: #f9f9f9;
}.form-group {margin-bottom: 15px;
}.form-group label {display: block;margin-bottom: 5px;
}.form-group input {width: 100%;padding: 8px;box-sizing: border-box;
}button {width: 100%;padding: 10px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background-color: #45a049;
}
</style>

 

4. 在App.vue中整合组件

App.vue
<template><div id="app"><header><h1>我的应用</h1><nav><ul><li @click="showLogin">登录</li><li @click="showRegister">注册</li></ul></nav></header><main><Login v-if="currentView === 'Login'" /><Register v-if="currentView === 'Register'" /></main></div>
</template><script>
import Login from './components/Login.vue';
import Register from './components/Register.vue';export default {components: {Login,Register,},data() {return {currentView: 'Login',};},methods: {showLogin() {this.currentView = 'Login';},showRegister() {this.currentView = 'Register';},},
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;margin-top: 60px;
}header {background-color: #35495e;padding: 10px 0;color: white;
}nav ul {list-style: none;padding: 0;
}nav ul li {display: inline;margin: 0 10px;cursor: pointer;
}
</style>

5. 启动应用

main.js

 

import Vue from 'vue';
import App from './App.vue';Vue.config.productionTip = false;new Vue({render: (h) => h(App),
}).$mount('#app');

 

6. 测试和优化

        完成以上步骤后,启动开发服务器并测试登录和注册功能,确保一切正常。进一步优化界面和用户体验,如添加加载动画、表单验证等。

结论

        实现前端登录和注册功能并不复杂,但细节决定成败。通过本文的介绍,希望能帮助你构建一个功能完善的用户认证系统。如果你觉得这篇文章对你有帮助,请记得一键三连(点赞、收藏、分享)哦!

 

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

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

相关文章

软设之访问者模式

设计模式中访问者模式的意图是&#xff1a; 表示一个作用于某对象结构中的各元素的操作&#xff0c;使得在不改变各元素的类的前提下定义作用于这些元素的新操作。 举个例子&#xff0c;比如说有个游客想去几个景点&#xff0c;去每个景点都想按统一的流程。但是每个景点都有…

vue3 学习笔记04 -- axios的使用及封装

vue3 学习笔记04 – axios的使用及封装 安装 Axios 和 TypeScript 类型定义 npm install axios npm install -D types/axios创建一个 Axios 实例并封装成一个可复用的模块&#xff0c;这样可以在整个应用中轻松地进行 API 请求管理。 在 src 目录下创建一个 services 文件夹&…

关于锂电池的充电过程

锂电池的充电阶段大概可以分为四个阶段&#xff1a;涓流充电、恒流充电、恒压充电以及充电终止。 涓流充电&#xff1a;这是充电过程的第一阶段&#xff0c;主要用于对完全放电的电池单元进行预充&#xff08;恢复性充电&#xff09;。当电池电压低于大概3V时&#xff0c;采用最…

【学习css1】flex布局-页面footer部分保持在网页底部

中间内容高度不够屏幕高度撑不开的页面时候&#xff0c;页面footer部分都能保持在网页页脚&#xff08;最底部&#xff09;的方法 1、首先上图看显示效果 2、奉上源码 2.1、html部分 <body><header>头部</header><main>主区域</main><foot…

PaintsUndo - 一张照片一键生成绘画过程视频 本地一键整合包下载

这就是ControlNet作者张吕敏大佬的新作&#xff0c;PaintsUndo。只要你有一张图片&#xff0c;PaintsUndo 就能让它变成完整的绘画过程视频。这科技&#xff0c;绝了。 你有没有想过&#xff0c;一张静态图片也能变成一个绘画教程? PaintsUndo 就是这么神奇。你只需要提供一…

通过手机供网、可修改WIFI_MAC的网络设备

一、修改WIFI mac&#xff08;bssid&#xff09; 取一根网线&#xff0c;一头连着设备黄色网口、一头连着电脑按住设备reset按键&#xff0c;插入电源线&#xff0c;观察到蓝灯闪烁后再松开reset按键 打开电脑浏览器&#xff0c;进入192.168.1.1&#xff0c;选择“MAC 地址修改…

【Spring Boot】Spring原理:Bean的作用域和生命周期

目录 Spring原理一. 知识回顾1.1 回顾Spring IOC1.2 回顾Spring DI1.3 回顾如何获取对象 二. Bean的作用域三. Bean的生命周期 Spring原理 一. 知识回顾 在之前IOC/DI的学习中我们也用到了Bean对象&#xff0c;现在先来回顾一下IOC/DI的知识吧&#xff01; 首先Spring IOC&am…

可视化学习:如何用WebGL绘制3D物体

在之前的文章中&#xff0c;我们使用WebGL绘制了很多二维的图形和图像&#xff0c;在学习2D绘图的时候&#xff0c;我们提过很多次关于GPU的高效渲染&#xff0c;但是2D图形的绘制只展示了WebGL部分的能力&#xff0c;WebGL更强大的地方在于&#xff0c;它可以绘制各种3D图形&a…

C语言之数据在内存中的存储(2),浮点数在内存中的存储

目录 前言 一、引例 二、浮点型在内存中的存储 三、浮点数在内存中的存和取过程 1.浮点数的存储过程 2.浮点数的取过程 四、引例解析 总结 前言 想知道浮点数在内存中是如何存储的吗&#xff0c;本文就告诉你答案&#xff0c;虽然一般情况题目还是面试涉及到浮点数在内…

新华三H3CNE网络工程师认证—ACL使用场景

ACL主要用于实现流量的过滤&#xff0c;业务中网络的需求不止局限于能够连同。 一、过略工具 你的公司当中有研发部门&#xff0c;包括有财务部门&#xff0c;财务部门的访问是要做到控制的&#xff0c;防止被攻击。 这种的过滤方法为&#xff0c;在设备侧可以基于访问需求来…

解决IntelliJ IDEA连接MySQL时“Public Key Retrieval is not Allowed”问题

前言 在使用IntelliJ IDEA开发环境中连接MySQL数据库时&#xff0c;可能会遇到“Public Key Retrieval is not allowed”这样的错误提示&#xff0c;即使输入的用户名和密码完全正确。本文将指导你如何解决这一问题&#xff0c;确保顺利建立数据库连接。 错误背景 这一问题通…

AI算力发展现状与趋势分析

综合算力发展现状与趋势分析 在数字经济的疾速推动下&#xff0c;综合算力作为驱动各类应用和服务的新型生产力&#xff0c;其价值日益凸显。我们深入探讨了综合算力的定义、重要性以及当前发展状况&#xff1b;并从算力形态、运力性能和存储技术等角度&#xff0c;预见了其发展…

基于Java技术的校友社交系统

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果你对校友社交系统感兴趣或者有相关需求&#xff0c;可以私信联系我。 开发语言 Java 数据库 MySQL 技术 Java技术SpringBoot框架 工具 IDEA/Eclipse、Navicat、Maven 系统展示 首页 校友会信息界面 校友活动…

Sqli-labs 3

1.按照路径http://localhost/sqli-labs/sqli-labs-master/Less-3/进入 2.判断注入类型----字符型 Payload&#xff1a;?id1’) and 11-- 注&#xff1a;根据报错提示的语法错误&#xff0c;在第一行中使用接近’union select 1,2,3--’)的正确语法 3.判断注入点&#xff1a;…

【Linux】vim详解

1.什么是vi/vim? 简单来说&#xff0c;vi是老式的文本编辑器&#xff0c;不过功能已经很齐全了&#xff0c;但是还是有可以进步的地方。vim则可以说是程序开发者的一项很好用的工具&#xff0c;就连 vim的官方网站&#xff08; http://www.vim.org&#xff09;自己也说vim是一…

如何计算卷积层输出图像的大小以及池化大小输出

如何计算卷积层输出图像的大小&以及池化大小输出 卷积 在卷积神经网络&#xff08;CNN&#xff09;中&#xff0c;计算卷积层输出图像的大小是一个常见的操作。以下是卷积计算的基本公式和步骤&#xff1a; 卷积层输出尺寸计算公式&#xff1a; Output_size ⌊ Input_s…

区块链项目全球成功指南:全面覆盖的媒体宣发策略与实践

随着区块链技术的迅速普及和发展&#xff0c;全球范围内对区块链项目的关注度不断提升。为了在国际市场上取得成功&#xff0c;区块链项目需要通过有效的媒体宣传策略来提高知名度&#xff0c;吸引投资&#xff0c;并建立强大的社区支持。本文将详细介绍区块链项目在海外媒体宣…

为企业提升销售工作效率的工作手机管理系统

在竞争日益激烈的市场环境中&#xff0c;企业的销售团队如同前线战士&#xff0c;其作战效率直接关乎企业的生存与发展。然而&#xff0c;传统销售管理模式下的信息孤岛、沟通不畅、数据混乱等问题&#xff0c;正悄然成为制约销售效率提升的瓶颈。今天&#xff0c;我们为您揭秘…

在 Windows 平台搭建 MQTT 服务

引言 MQTT 是一种轻量级、基于发布/订阅模式的消息传输协议&#xff0c;旨在用极小的代码空间和网络带宽为物联网设备提供简单、可靠的消息传递服务。MQTT 经过多年的发展&#xff0c;如今已被广泛应用于资源开采、工业制造、移动通信、智能汽车等各行各业&#xff0c;使得 MQ…

汇聚荣做拼多多电商怎么样?

汇聚荣做拼多多电商怎么样?在当前电商平台竞争激烈的背景下&#xff0c;拼多多凭借其独特的商业模式和市场定位迅速崛起。对于想要加入拼多多的商家而言&#xff0c;了解平台的特点、优势及挑战是至关重要的。本文将深入分析加入拼多多电商的多个方面&#xff0c;帮助读者全面…