从零开始手把手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.rhkb.cn/news/343206.html

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

相关文章

个人笔记-python生成gif

使用文件的修改时间戳进行排序 import os import re import imageio# 设置图片所在的文件夹路径 folder_path /home/czy/ACode/AMAW_20240219/9.3.x(Discrete_time_marching&#xff09;/9.3.17.11.1(Disc_concessive_CH_ZJ)/current_figures # 文件夹路径&#xff1b;linux…

网络编程: 高级IO与多路转接select,poll,epoll的使用与介绍

网络编程: 高级IO与多路转接select,poll,epoll的使用与介绍 前言一.五种IO模型1.IO的本质2.五种IO模型1.五种IO模型2.同步IO与异步IO3.IO效率 二.非阻塞IO1.系统调用介绍2.验证代码 三.select多路转接1.系统调用接口2.写代码 : 基于select的TCP服务器1.封装的Socket接口2.开始写…

前端 CSS 经典:水波进度样式

前言&#xff1a;简单实现水波进度样式&#xff0c;简单好看。 效果图&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta http-equiv"X-UA-Compatible" cont…

《数学学习与研究》杂志是什么级别?知网收录吗?评职认可吗?

《数学学习与研究》杂志是什么级别&#xff1f;知网收录吗&#xff1f;评职认可吗&#xff1f; 《数学学习与研究》是由东北师范大学主管&#xff0c;吉林省数学会与东北师范大学出版社联合主办的省级优秀数学类期刊杂志。该杂志为半月刊&#xff0c;国际标准刊号为 ISSN1007-…

SkyWalking之P0业务场景输出调用链路应用

延伸扩展&#xff1a;XX业务场景 路由标签打标、传播、检索 链路标签染色与传播 SW: SkyWalking的简写 用户请求携带HTTP头信息X-sw8-correlation “X-sw8-correlation: key1value1,key2value2,key3value3” 网关侧读取解析HTTP头信息X-sw8-correlation&#xff0c;然后通过SW…

【Linux】系统优化:一键切换软件源与安装Docker

引言 在Linux系统安装完成后&#xff0c;进行一些必要的初始化设置是提升系统性能和用户体验的关键。本文将重点介绍两个实用的一键脚本&#xff1a;LinuxMirrors提供的软件源切换脚本和Docker安装脚本。这两个脚本将帮助我们简化配置安装过程。 一键切换软件源脚本 在Linux…

AI绘画如何打造高质量数据集?

遇到难题不要怕&#xff01;厚德提问大佬答&#xff01; 厚德提问大佬答11 你是否对AI绘画感兴趣却无从下手&#xff1f;是否有很多疑问却苦于没有大佬解答带你飞&#xff1f;从此刻开始这些问题都将迎刃而解&#xff01;你感兴趣的话题&#xff0c;厚德云替你问&#xff0c;你…

数据动态变化时实现多选及回显

<template><el-dialog title"设置权限" :visible.sync"showDialog" :close-on-click-modal"false" :append-to-body"true" width"800px"><div v-loading"loading"><el-radio-group v-model&…

【论文阅读】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…

SQL语句练习每日5题(四)

题目1——查找GPA最高值 想要知道复旦大学学生gpa最高值是多少&#xff0c;请你取出相应数据 题解&#xff1a; 1、使用MAX select MAX(gpa) FROM user_profile WHERE university 复旦大学 2、使用降序排序组合limit select gpa FROM user_profile WHERE university 复…

【vuex小试牛刀】

了解vuex核心概念请移步 https://vuex.vuejs.org/zh/ # 一、初始vuex # 1.1 vuex是什么 就是把需要共享的变量全部存储在一个对象里面&#xff0c;然后将这个对象放在顶层组件中供其他组件使用 父子组件通信时&#xff0c;我们通常会采用 props emit 这种方式。但当通信双方不…

如何搭建一台永久运行的个人服务器?

一、前言 由于本人在这段时候&#xff0c;看到了一个叫做树莓派的东东&#xff0c;初步了解之后觉得很有意思&#xff0c;于是想把整个过程记录下来。 二、树莓派是什么&#xff1f; Raspberry Pi(中文名为树莓派,简写为RPi&#xff0c;(或者RasPi / RPI) 是为学习计算机编程…

38页 | 工商银行大数据平台助力全行数字化转型之路(免费下载)

【1】关注本公众号&#xff0c;转发当前文章到微信朋友圈 【2】私信发送 工商银行大数据平台 【3】获取本方案PDF下载链接&#xff0c;直接下载即可。 如需下载本方案PPT/WORD原格式&#xff0c;请加入微信扫描以下方案驿站知识星球&#xff0c;获取上万份PPT/WORD解决方案&a…

LlamIndex二 RAG应用开发

在AutoGen)系列后&#xff0c;我又开始了LlamIndex 系列。欢迎查询LlamaIndex 一 简单文档查询 - 掘金 (juejin.cn)了解LlamIndex&#xff0c;今天我们来看看LlamIndex的拿手戏&#xff0c;RAG应用开发。 何为RAG&#xff1f; RAG全称"Retrieval-Augmented Generation&q…

Linux C语言:指针和指针变量

一、指针的作用 使程序简洁、紧凑、高效有效地表示复杂的数据结构动态分配内存能直接访问硬件能够方便的处理字符串得到多于一个的函数返回值 二、内存、地址和变量 1、内存地址 2、变量和地址 1&#xff09;变量用来在程序中保存数据 比如: int k 58; //声明一个int变…

jupyter notebook默认工作目录修改

jupyter notebook默认工作目录修改 1、问题2、如何修改jupyter notebook默认工作目录 1、问题 anaconda安装好之后&#xff0c;我们启动jupyter notebook会发现其默认工作目录是在C盘&#xff0c;将工作目录放在C盘会让C盘很快被撑爆&#xff0c;我们应该将jupyter notebook默…

QT系列教程(8) QT 布局学习

简介 Qt 中的布局有三种方式&#xff0c;水平布局&#xff0c;垂直布局&#xff0c;栅格布局。 通过ui设置布局 我们先创建一个窗口应用程序&#xff0c;程序名叫layout&#xff0c;基类选择QMainWindow。但我们不使用这个mainwindow&#xff0c;我们创建一个Qt应用程序类Log…

MYTED | TED100篇打卡总结 辅助学习网站使用说明

文章目录 &#x1f4da;背景&#x1f407;timeline&#x1f407;版本记录&#x1f407;产出小结 &#x1f4da;功能说明&#x1f407;左侧&#x1f407;中间&#x1f407;右侧 &#x1f4da;背景 &#x1f407;timeline 在一个平常的下午&#xff0c;一次平常的桌面整理&#…

Python 机器学习 基础 之 处理文本数据 【处理文本数据/用字符串表示数据类型/将文本数据表示为词袋】的简单说明

Python 机器学习 基础 之 处理文本数据 【处理文本数据/用字符串表示数据类型/将文本数据表示为词袋】的简单说明 目录 Python 机器学习 基础 之 处理文本数据 【处理文本数据/用字符串表示数据类型/将文本数据表示为词袋】的简单说明 一、简单介绍 二、处理文本数据 三、用…

ts类型声明文件、内置声明文件

1. ts类型声明文件 在ts中以d.ts为后缀的文件就是类型声明文件&#xff0c;主要作用是为js模块提供类型信息支持&#xff0c;从而获得类型提示 1.1 第三方包用ts编写的&#xff0c;会自动生成一个 .d.ts文件&#xff0c;进行类型声明 1.2 有些包不是用ts编写的&#xff0c;在…