从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战五(引入vue-router,并给注册功能加上美丽的外衣el-form)

安装vue-router

pnpm install vue-router

创建router

src下新增router目录,ruoter目录中新增index.ts

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [{path: "/",name: "Home",component: () => import("@/views/home/index.vue"),},{path: "/register",name: "Register",component: () => import("@/views/register/index.vue"),}
];const router = createRouter({history: createWebHashHistory(),routes,
});export default router;

创建首页

src下新增views目录,views目录下新增home目录,home目录下新增index.vue文件

<template><div>this is home page</div><div class="txt-r"><router-link to="/register">没有账号?去注册</router-link></div>
</template>

创建注册页

views目录下新增register目录,register目录下新增index.vue文件

<template><div><el-form :model="user" label-width="86px"><h3 class="title">系统注册</h3><el-form-item label="用户名" prop="username"><el-input v-model="user.username" placeholder="请输入用户名" prefix-icon="user"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="user.email" placeholder="请输入邮箱" prefix-icon="message"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="user.password" type="password" placeholder="请输入密码" prefix-icon="lock"></el-input></el-form-item><el-form-item label><el-button type="primary" @click="doRegister">注册</el-button></el-form-item></el-form></div>
</template><script setup lang="ts">
import { useRouter } from 'vue-router';
import { register } from '@/api';
import { ref } from 'vue'
import type { User } from '@/types';
const router = useRouter();const user = ref<User>({email: '',username: '',password: ''
});const doRegister = async () => {try {const res = await register({ user: user.value });console.log(res.data.user);router.push({ name: 'Home' });} catch (error) {}
}
</script>

main.ts引入router对象

1717483754741.png

修改App.vue

<template><router-view></router-view>
</template>

运行测试

1717483900786.png

点击 去注册

1717483961286.png

表单校验

修改register/index.vue

1717484462704.png

1717484509859.png

1717484531557.png

再次测试验证

41a1d287d7a92972e664a160fefb6ce.png

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

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

相关文章

【机器学习】训练GNN图神经网络模型进行节点分类

1. 引言 1.1 图神经网络GNN概述 图神经网络&#xff08;Graph Neural Network&#xff0c;GNN&#xff09;是一种专门用于处理图结构数据的神经网络方法。它起源于2005年&#xff0c;当时Gori等人首次提出了GNN的概念&#xff0c;用于学习图中的节点特征以及它们之间的关系。…

Rust基础学习-Rust中的文件操作

文件结构 在Rust中&#xff0c;std::fs::File 结构体代表一个文件。它允许我们对文件执行读/写操作。文件 I/O 是通过提供与文件系统交互的功能的 std::fs 模块执行的。 File 结构体中的所有方法都返回std::io::Result的变体&#xff0c;或者简单地是 Result 枚举。这里会涉及…

PowerShell cannot be loaded- execution policy

PowerShell脚本无法运行&#xff0c;报错&#xff1a; cannot be loaded. The file xxxx is not digitally signed. You cannot run this script on the current system. For more information about running scripts and setting execution policy, see about_Execution_Po…

一套java开发的(未来工厂核心MES系统成品源码)技术架构:java+springboot 支撑多端管理,可商用

MES定义为“位于上层的计划管理系统与底层的工业控制之间的面向车间层的管理信息系统” 20世纪90年代初期&#xff0c;中国就开始对MES以及ERP的跟踪研究、告知或试点&#xff0c;而且曾经发言 “管控一体化”&#xff0c;“人、财、物、产、供、销”等颇具中国独具一格的CIMS、…

自定义idea插件之hello idea plugin

写在前面 最近一直想研究下自定义idea插件的内容&#xff0c;这样如果是想要什么插件&#xff0c;但又一时找不到合适的&#xff0c;就可以自己来搞啦&#xff01;这不终于有时间来研究下&#xff0c;但过程可谓是一波三折&#xff0c;再一次切身体验了下万事开头难。那么&…

血清素是怎么产生的,其过高和过低与我们情绪和胃肠健康有哪些关联?

谷禾健康 血清素&#xff0c;5-羟色氨(5-HT)不仅充当体内系统的神经递质和激素&#xff0c;而且还是胃肠系统中的旁分泌信使。 5-HT神经元系统起源于中脑中缝核&#xff0c;下面示意图强调了血清素(5-HT)神经元与释放不同神经递质的其他神经元以及神经胶质细胞之间的解剖相互作…

问题:新零售是以消费者体验为中心的数据驱动的泛零售形态,是基于大数据的“人货场“重构 #其他#知识分享

问题&#xff1a;新零售是以消费者体验为中心的数据驱动的泛零售形态,是基于大数据的"人货场"重构 参考答案如图所示

【PL理论】(8) F#:列表高阶函数之 filter 函数 | 内联谓词函数 | 链式操作:先过滤再映射

&#x1f4ad; 写在前面&#xff1a;上一章中&#xff0c;我们详细讲解了列表的合并&#xff0c;本章我们来详细讲解一下列表的过滤&#xff0c;在 F# 中&#xff0c;过滤列表是指从列表中提取满足某个条件的元素&#xff0c;形成一个新的列表。这个操作通常使用 List.filter 函…

Turnitin揭露AI写作痕迹,是否会影响论述是重复率?

Turnitin&#xff08;www.checktoo.com&#xff09;为学术界提供了便捷的服务&#xff0c;以确保论文的原创性和学术诚信。然而&#xff0c;许多学生和研究人员在使用Turnitin时&#xff0c;常常会想Turnitin查论文AI率和重复率之间的关系。那么&#xff0c;使用Turnitin查重论…

Centos7安装Zookeeper

Centos7安装Zookeeper 准备工作 https://zookeeper.apache.org/releases.html 下载稳定版的安装包。【注意&#xff1a;下载的是xxx-bin.tar.gz包 是可运行的zookeeper 而 xxx.tar.gz是源码包不可运行】 上传zookeeper的压缩包到指定目录/usr/local/zookeeper/ 安装Zookeepe…

从写简历到谈薪资的最全教程

从写简历到谈薪资的最全教程 目录简历注意事项举个例子写简历投递简历也有技巧模拟面试的重要性面试经验怎么刷不断迭代达越来越强斗智斗勇谈薪资拿到offer就结束了吗&#xff1f;我能给你的帮助 目录 大家好&#xff0c;我是一名普通本科毕业的学生&#xff0c;工作数年&#…

移动端 UI 风格,彰显品质

移动端 UI 风格&#xff0c;彰显品质

气膜乒乓球馆:新型体育设施的投资机遇—轻空间

乒乓球作为我国的国球&#xff0c;不仅在世界舞台上表现卓越&#xff0c;在国民的心目中也占有重要位置。随着科技的进步&#xff0c;气膜乒乓球馆作为一种新型体育设施&#xff0c;正逐渐走入大众视野&#xff0c;为乒乓球爱好者提供了一个舒适、安全、环保的运动场所。那么&a…

Linux环境---在线安装MYSQL数据库

Linux环境—在线安装MYSQL数据库 一、使用步骤 1.安装环境 Mysql 驱动 8.0 需要 jdk1.8 才行。 JDK版本&#xff1a;1.8 参考文档 MYSQL版本&#xff1a;8.0.2 下载链接: https://pan.baidu.com/s/1MwXIilSL6EY3OuS7WtpySA?pwdg263 操作系统&#xff1a;CentOS 1.1 建立存…

【论文阅读】MODELING AND SOLVING THE TRAVELING SALESMAN PROBLEM WITH PRIORITY PRIZES

文章目录 论文基本信息摘要1.引言2. INTEGER QUADRATIC PROGRAM FOR TSPPP3. MIXED INTEGER LINEAR PROGRAMS FOR TSPPP4. TABU SEARCH ALGORITHM FOR TSPPP5. COMPUTATIONAL RESULTS6. CONCLUDING REMARKS补充 论文基本信息 《MODELING AND SOLVING THE TRAVELING SALESMAN P…

hadoop部署hive

1.安装mysql数据库 这里采用docker部署mysql,如果没有安装docker #安装yum工具 yum install -y yum-utils device-mapper-persistent-data lvm2 --skip-broken #设置docker镜像源 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/…

搜索引擎优化服务如何寻找?

首先你要了解搜索引擎优化&#xff0c;也就是seo具体是什么&#xff0c;要做些什么&#xff0c;然后就是确定你自身业务的需求&#xff0c;是要特定的关键词排名&#xff0c;还是整体网站流量的提升&#xff0c;还是想要优化目前的网站 接下来你就可以正式的寻找真正能帮助到你…

图的相关种类

目录 数据类型 存储结构 邻接矩阵表示法 无向图 邻接矩阵表示 有向图 网 实现 邻接矩阵表示 存储结构 创建无向图 优点 缺点 邻接表法表示 表示无向图 表示有向图 存储结构 无向网 特点 十字链表与多重表 十字链表 存储结构 多重表 存储结构 数据类型 存…

SharePoint:智能内容管理,释放数据价值

在Microsoft 365的庞大生态系统中&#xff0c;SharePoint常常被忽视&#xff0c;但它却是整个平台的核心。SharePoint不仅承载着OneDrive、Teams、Power Platform等所有Microsoft 365产品的内容存储&#xff0c;更是企业协作和内容管理的基石。助AI技术的加持&#xff0c;Share…

遗址博物馆ar互动展示软件提供丰富的趣味化体验

在自然博物馆的每一个角落&#xff0c;都隐藏着大自然的奥秘与魅力。为了让每一位参观者都能深入体验、探索这些奥秘&#xff0c;我们引入了前沿的AR技术&#xff0c;为您带来一场前所未有的沉浸式自然之旅。 步入博物馆&#xff0c;您手中的AR相机将成为您的更佳向导。自然博物…