vue从登陆注册开始

vue从登陆注册开始

要写一个网页界面,一般都是从登陆注册开始的。

我们直接使用element-plus来写登陆注册页面。

下载element-plus

npm install element-plus --save

引入element-plus

之前我们说过js的入口在main.js李,引入组件也是在这里引入的。在main.js中修改如下内容:

import { createApp } from 'vue'
import './style.css'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

编写login页面

引入element-plus后就可以编写登陆界面了,前面我们说过vue采用组件化和模块化开发,这里我们开发一个login组件,并在app里引入该组件。

login.vue的内容如下所示:

<template><el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form"><el-form-item label="Username" prop="username"><el-input v-model="loginForm.username" autocomplete="off"></el-input></el-form-item><el-form-item label="Password" prop="password"><el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="login">Login</el-button></el-form-item></el-form></template><script>export default {data() {return {loginForm: {username: '',password: ''},loginRules: {username: [{ required: true, message: 'Please input username', trigger: 'blur' }],password: [{ required: true, message: 'Please input password', trigger: 'blur' }]}};},methods: {login() {this.$refs.loginForm.validate(valid => {if (valid) {// 在这里处理登录逻辑,比如发送请求给后端验证登录信息console.log('Logging in...');} else {return false;}});}}};</script><style scoped>.login-form {width: 300px;margin: 0 auto;}</style>

需要注意的是上面的登陆界面还没有美化,即设置css样式,这个后面再来添加,前期先保证功能。

同时上面的界面只有登陆,如果我想要实现没有用户,用户要进行注册,跳转到注册页面,此时就需要引入路由,实现页面跳转。

引入路由

npm install vue-router@4 --save

路由一般放在router目录下,并新建一个index.js文件来存放路由信息,下面是index.js的内容。

import { createRouter, createWebHistory } from 'vue-router';
import Login from '../components/Login.vue';
import Register from '../components/Register.vue';const routes = [{path: '/',redirect: '/login' // 将根路径重定向到登录页面},{path: '/login',name: 'Login',component: Login},{path: '/register',name: 'Register',component: Register}
];const router = createRouter({history: createWebHistory(),routes
});export default router;

当前我们只有login和register两个界面,所以这里只注册了两个路由,后面随着页面的增加可以将其再添加到这个文件里。

添加的register页面内容如下所示:

<template><el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px" class="register-form"><el-form-item label="用户名" prop="username"><el-input v-model="registerForm.username" autocomplete="off"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="repassword"><el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="register">注册</el-button></el-form-item></el-form></template><script>export default {data() {return {registerForm: {username: '',password: ''},registerRules: {username: [{ required: true, message: 'Please input username', trigger: 'blur' }],password: [{ required: true, message: 'Please input password', trigger: 'blur' }]}};},methods: {register() {this.$refs.registerForm.validate(valid => {if (valid) {// 在这里处理注册逻辑,比如发送请求给后端保存用户信息console.log('Registering...');} else {return false;}});}}};</script><style scoped>.register-form {width: 300px;margin: 0 auto;}</style>

默认登录的是登陆界面,需要在登陆界面进行跳转,登录界面修改如下:

<template><el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form"><el-form-item label="用户名" prop="username"><el-input v-model="loginForm.username" autocomplete="off"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="login">登录</el-button><el-button type="primary" @click="goToRegisterPage">注册</el-button></el-form-item></el-form></template><script>export default {data() {return {loginForm: {username: '',password: ''},loginRules: {username: [{ required: true, message: 'Please input username', trigger: 'blur' }],password: [{ required: true, message: 'Please input password', trigger: 'blur' }]}};},methods: {login() {// 登录逻辑console.log('Logging in...');},goToRegisterPage() {this.$router.push('/register');}}};</script><style scoped>.login-form {width: 300px;margin: 0 auto;}</style>

定义好路由后还是需要在main.js引入定义的路由,修改main.js里的内容如下:

import { createApp } from 'vue'
import './style.css'
import router from './router'; // 引入路由文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.use(router)
app.mount('#app')

引入router后还需要把route-view设置到App.vue里,否则无法实现跳转。

App.vue的内容如下所示:

<template><div id="app"><router-view></router-view></div>
</template>

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

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

相关文章

通过python脚本获取阿里云rds慢请求日志并发送到指定邮件

干货脚本如下 import os import json from aliyunsdkcore.client import AcsClient from aliyunsdkcore.request import CommonRequest from aliyunsdkcore.auth.credentials import AccessKeyCredential from openpyxl import Workbook from openpyxl.styles import Alignmen…

通过红黑树封装 map 和 set 容器

一、红黑树的迭代器 红黑树的遍历默认为中序遍历 —— key 从小到大&#xff0c;因此 begin() 应该获取到红黑树的最左节点 —— 最小&#xff0c;end() 获取到红黑树最右节点的下一个位置&#xff0c; operator() 也应保证红黑树的遍历为中序的状态。 首先对红黑树节点进行改造…

骨传导耳机怎么选?五款高分热销榜骨传导耳机单品推荐!

骨传导耳机哪个牌子好&#xff1f;作为资深数码博主&#xff0c;许多朋友都希望我能够分享一些关于骨传导耳机的选购技巧。随着时间的发展&#xff0c;市面上的骨传导耳机种类日渐繁多&#xff0c;其中品牌的专业实力参差不齐&#xff0c;产品质量也千差万别。一些黑心商家为了…

家装空间3D建模素材:打造理想家园的必备工具

在家装过程中&#xff0c;设计师和业主往往需要通过3D建模技术来实现对空间的精确规划和设计。3D建模素材作为这一领域的基础元素&#xff0c;为设计师提供了丰富的想象空间&#xff0c;帮助他们更好地呈现业主的期望和需求。 这些3D建模素材可以涵盖各种家装元素&#xff0c;如…

新疆维吾尔自治区工程系列生态环境保护专业职称评审条件

新疆维吾尔自治区工程系列生态环境保护专业职称评审条件链接关于印发《新疆维吾尔自治区工程系列生态环境保护专业技术职务任职资格评审条件&#xff08;试行&#xff09;》的通知_政策文件_新疆维吾尔自治区人力资源和社会保障厅类别基本条件业绩成果备注工程师1.具备硕士学位…

roofline model加速模型部署最后一公里

文章目录 模型部署教程来啦:)什么是Roofline Model&#xff1f;算法模型相关指标计算量计算峰值参数量访存量带宽计算密度kernel size对计算密度的影响output size对计算密度的影响channel size对计算密度的影响group convolution对计算密度的影响tensor reshape对计算密度的影…

linux 性能监控命令之dstat

1. dstat 系统默认为安装&#xff0c;直接安装阿里源后&#xff0c;yum install -y dstat安装即可&#xff0c;该命令整合了 vmstat &#xff0c; iostat 和 ifstat&#xff0c;我们先看下效果&#xff1a; 我们先看看具体参数&#xff1a; [rootk8s-master ~]# dstat --help …

Python AI库pandas读写数据库的应用操作——以sqlite3为例

Python AI库pandas读写数据库的应用操作——以sqlite3为例 本文默认读者具备以下技能&#xff1a; 熟悉python基础知识&#xff0c;vscode或其它编辑工具 已阅读Pandas基础操作文章,了解pandas常见操作 具备自主扩展学习能力 在数据分析和人工智能领域&#xff0c;pandas库和s…

怎么批量修改图片的大小?分享几个方法

现在不管是在自媒体还是在各种社交媒体平台中&#xff0c;我们都会用到大量的图片&#xff0c;有时候会发现图片尺寸过大&#xff0c;对上传或者储存带来了不小的困难&#xff0c;在这种情况下&#xff0c;调整图片尺寸显得格外重要&#xff0c;通过修改图片尺寸&#xff0c;我…

# 从浅入深 学习 SpringCloud 微服务架构(八)Sentinel(2)

从浅入深 学习 SpringCloud 微服务架构&#xff08;八&#xff09;Sentinel&#xff08;2&#xff09; 一、sentinel&#xff1a;通用资源保护 1、Rest 实现熔断 Spring Cloud Alibaba Sentinel 支持对 RestTemplate 的服务调用使用 Sentinel 进行保护, 在构造 RestTemplate…

[华为OD]C卷 BFS 亲子游戏 200

题目&#xff1a; 宝宝和妈妈参加亲子游戏&#xff0c;在一个二维矩阵&#xff08;N*N&#xff09;的格子地图上&#xff0c;宝宝和妈妈抽签决定各自 的位置&#xff0c;地图上每个格子有不同的Q糖果数量&#xff0c;部分格子有障碍物。 游戏规则Q是妈妈必须在最短的时间&a…

预兼容性EMC测试基础

介绍――预兼容性EMC测试的重要意义 在产品开发过程中&#xff0c;您最想做的是对器件进行测试&#xff0c;验证其是否正常工作。所有电子器件都必须在经过认证的内部测试中心内成功通过电磁兼容性EMI测试。通过 EMI测试即表明您的器件的 EMI 发射性能达到允许水平&#xff0c;…

Hive UDTF之explode函数、Lateral View侧视图

Hive UDTF之explode函数 Hive 中的 explode() 函数是一种用于处理数组类型数据的 User-Defined Table-Generating Function (UDTF)。它将数组拆分成多行&#xff0c;每个数组元素对应生成的一行数据。这在处理嵌套数据结构时非常有用&#xff0c;例如处理 JSON 格式的数据。 …

详细介绍一下PointPillars算法的网络结构

PointPillars是一种用于3D目标检测的算法&#xff0c;它主要使用了点云数据和深度学习模型。 PointPillars算法的网络结构主要可以分为三个主要阶段&#xff1a; Pillar Feature Net&#xff08;点云特征处理网络&#xff09;&#xff1a;此阶段的主要任务是将输入的点云数据转…

怎样单独提取PDF文件中的一个或几个文件?分割PDF文件的方法

在现代数字化时代&#xff0c;PDF文件已成为我们日常生活和工作中不可或缺的一部分。 一&#xff0c;首先了解什么是PDF&#xff1f; PDF&#xff0c;即“Portable Document Format”&#xff0c;意为“便携式文档格式”&#xff0c;由Adobe Systems开发。由于其跨平台、不易…

探秘Appium:Capability 进阶技巧揭秘!

简介 Appium 的除了基础的 Capability 设置&#xff0c;还提供了许多辅助配置项&#xff0c;用于优化自动化测试。这些配置项旨在执行基础配置之外的附加操作。例如&#xff1a;指定设备别名、设备 ID 或是设置超时时间等&#xff0c;虽然这些不是必需的选项&#xff0c;但是为…

【Linux系统编程】第十五弹---调试器gdb使用

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、背景 2、安装gdb 3、gdb的使用 总结 1、背景 前面我们学习了文件编辑器&#xff0c;项目自动化构建工具&#xff0c;以及g…

目标检测算法YOLOv6简介

YOLOv6由Chuyi Li等人于2022年提出&#xff0c;论文名为&#xff1a;《YOLOv6: A Single-Stage Object Detection Framework for Industrial Applications》&#xff0c;论文见&#xff1a;https://arxiv.org/pdf/2209.02976 &#xff0c;项目网页&#xff1a;https://github.c…

Python程序设计 函数(三)

练习十一 函数 第1关&#xff1a; 一元二次方程的根 定义一个函数qg&#xff0c;输入一元二次方程的系数a,b,c 当判别式大于0&#xff0c;返回1和两个根 当判别式等于0&#xff0c;返回0和两个根 当判别式小于0&#xff0c;访问-1和两个根 在主程序中&#xff0c;根据函数返回…

js逆向之websocket返回数据-xx医药

提示!本文章仅供学习交流,严禁用于任何商业和非法用途,未经许可禁止转载,禁止任何修改后二次传播,擅自使用本文讲解的技术而导致的任何意外,作者均不负责,如有侵权,可联系本文作者删除! 网站链接:aHR0cDovL2p4eXljZy5jbi92aWV3LTczZDQxM2I0NDZhYzRiNDM5YTVlN2YwYTM4Z…