用户中心项目教程(十)---注册里面的重定向排查和相关的修改

news2025/2/23 14:36:10

文章目录

  • 1.注册逻辑的设计和实现
  • 2.解决自带的这个重定向的问题
  • 3.增加属性的相关操作
  • 4.关于如何修改页面上面的绿色按钮

1.注册逻辑的设计和实现

上次说到了的是登录功能,我们使用数据库里面存在的这个存在的账户和密码进行登录,但是是无法进行跳转的,虽然无法跳转,但是可以证明我们的这个整体的逻辑是没有问题的;

接下来就是讨论的如何去实现我们的注册的逻辑了:

首先找到这个和路由相关的配置文件,把上面的那个登录的路由配置cv一下,然后进行相关的修改,就是把path和component进行调换一下就可以了,换成我们的注册的相关urlregister表示的就是注册的意思;

下面的这个是把我们的pages目录下面的这个登录相关的逻辑复制一下,套用到我们的这个登录里面,相当于就是cv,然后根据需求进行修改;

首先需要修改这个const修饰的名字,我们的这个实现的是注册的逻辑,所以原来的login需要进行修改;

下面的这个是我们的tsx里面的最后部分,我们需要把login修改为register即可;

这个时候使用user/register进行验证,会发现进行了重定向,无法成功跳转,接下来说明一下如何解决这个重定向的问题;

2.解决自带的这个重定向的问题

首先需要到我们的app.tsx里面去排查问题,这个apptsx相当于我们的启动文件就是我们的这个项目开始运行的时候,先从这个文件开始扫描,所以这个文件我们需要尤为注意;

我们发现这个fetchUserInfo表示的是获取我们的用户相关的信息,这个里面有push(loginPath),这个就是我们的重定向的错误源头之一

然后就是这个app.tsx里面还有一个push跳转到登录的代码,就是下面的这个;

接下来我们针对于上面出现的问题进行修改:把那个跳转的代码注释掉;

下面的这个是没有登陆就进行跳转,这个显然是不合适的,我们如果进行注册,他也进行跳转,这个就有点无理取闹了,所以这个地方我们需要优化一下:

我们定了这个白名单,里面是我们的注册和登录的相关的url,然后如果是这两个里面的其中一个,我们直接return,如果不是的话,我们再让这个页面进行跳转;

register里面的index.tsx:因为这个是注册吗,所以这个里面获取用户信息的代码直接删去;

没用的这个相关定义也删除:

等待抓取用户信息的这个代码也删除:

我们把页面的那个蓝色的原来写的是登录的部分修改为注册的字样:

我们进行注册的时候,后端是设计了三个参数:账户,密码和校验密码,所以我们需要新建一个表单,这个直接复制上面的密码的,然后把这个提示词修改一下就可以了:

name修改为我们的checkpassword,然后是这个placeholder就是我们的前端上面输入的时候可以看到的这个话语;

这个时候的页面的效果就是下面的这个样子的,我们需要对于那个按钮进行修改,把注册修改为登录;

3.增加属性的相关操作

我们的注册是三个属性,因此这个时候我们需要修改注册的属性:

按住ctrl点击下面的这个内容,跳转到源码里面去:

我们的这个登录是两个属性:账户和账户的密码,我们直接把上面的复制一下,在这个基础上面进行修改就=可以了,其实修改的话就是增加一个checkpassword的属性即可;

然后使用的是一键替换:把loginparams修改为我们的registerparams:

4.关于如何修改页面上面的绿色按钮

想要修改原来的那个绿色按钮的字样,我们需要追溯源码:按住ctrl点击下面的这个loginform内容,就会被跳转

跳转之后的页面:

我们点击那个左上角的圆圈,找到下面的那个js文件,点进入:

这个时候出现的submitText里面的内容实际上就是我们的蓝色的按钮的显示字样,所以我们需要对于这个进行修改:

我们的修改不是在原来的基础上面修改,而是把原来的那个默认的属性字样重新定义一下,他就会使用我们定义的内容,而不是默认的内容(源码包里面的内容)

这个时候,我们的前端页面的设计:注册的页面,重定向问题的排查,以及这个蓝色的按钮的字体修改,全部都解决了,我们就开始具体逻辑的实现和设计;

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

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

相关文章

根据音频中的不同讲述人声音进行分离音频 | 基于ai的说话人声音分离项目

0.研究背景 在实际的开发中可能会遇到这样的问题,老板让你把音频中的每个讲话人的声音分离成不同的音频片段。你可以使用au等专业的音频处理软件手动分离。但是这样效率太慢了,现在ai这么发达,我们能否借助ai之力来分离一条音频中的不同的说…

【单片机】【UDS】 (单帧与多帧) 数据传输

对于使用 CAN 的诊断通信系统,每个单帧 (SF)、 第一帧 (FF)、 连续帧 (CF) 或流控 制帧 (FC) 有 8 字节数据场;其中单帧的 CAN_DL≤8 且第一帧的 FF_DL≤4095;下表 中已定义 每个报文的类型。 CAN FD 帧的数据场支持最大 64 个字节&#xff0…

WebXR教学 02 配置开发环境

默认操作系统为Windows 1.VS Code VS Code 是一款轻量级、功能强大的代码编辑器,适用于多种编程语言。 下载 步骤 1:访问 VS Code 官方网站 打开浏览器(如 Chrome、Edge 等)。 在地址栏输入以下网址: https://code.v…

MySql数据库运维学习笔记

数据库运维常识 DQL、DML、DCL 和 DDL 是 SQL(结构化查询语言)中的四个重要类别,它们分别用于不同类型的数据库操作,下面为你简单明了地解释这四类语句: 1. DQL(数据查询语言,Data Query Langu…

宇树科技13家核心零部件供应商梳理!

2025年2月6日,摩根士丹利(Morgan Stanley)发布最新人形机器人研报:Humanoid 100: Mapping the Humanoid Robot Value Chain(人形机器人100:全球人形机器人产业链梳理)。 Humanoid 100清单清单中…

ARMS 助力假面科技研发运维提效,保障极致游戏体验

客户介绍与项目背景 假面科技成立于 2014 年,致力于打造创新的数字产品,火爆一时的“狼人杀”、“谁是卧底”、“足记相机”都是假面科技旗下产品,公司产品总数超过 40 款,覆盖用户数超过 2 亿人。 随着业务的持续发展&#xff…

趣味数学300题1981版-八个等式、五个5等于24

八个等式 分析:此问题的求解思路是按照最后一步运算的运算符号进行分类。示例中最后一步的运算是除法,只要被除数与除数相等且不为0,就可以得到结果1.因此我们还可以对于结果等于1的情况列出其他的算式。如果保持最后一步运算为除法运算&…

关闭超时订单和七天自动确认收货+RabbitMQ规范

关闭超时订单 创建订单之后的一段时间内未完成支付而关闭订单的操作,该功能一般要求每笔订单的超时时间是一致的 TTL(Time To Live)存活时间,只能被设置为某个固定的值,不能更改,否则抛出异常 死信&#…

【多模态处理篇一】【 深度解析DeepSeek图文匹配:CLIP模型迁移实战——从原理到落地的保姆级教程】

引言:当CLIP遇到DeepSeek,会发生什么化学反应? 如果说CLIP是OpenAI为多模态领域投下的"原子弹",那DeepSeek的迁移实战方案就是给这颗原子弹装上了精确制导系统。这个组合能让你用一张猫咪表情包搜到全网同类梗图,还能让电商平台自动生成百万级商品描述,甚至帮…

水果生鲜农产品推荐系统 协同过滤余弦函数推荐水果生鲜农产品 Springboot Vue Element-UI前后端分离 代码+开发文档+视频教程

水果生鲜农产品推荐系统 协同过滤余弦函数推荐水果生鲜农产品 Springboot Vue Element-UI前后端分离 【亮点功能】 1.SpringbootVueElement-UIMysql前后端分离 2.Echarts图表统计数据, 直观展示数据情况 3.发表评论后,用户可以回复评论, 回复的评论可以被再次回复, …

1.vue使用vite构建初始化项目

npm create vuelatest❯ npm create vuelatest> npx > create-vueVue.js - The Progressive JavaScript Framework✔ Project name: … vue3_test ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application dev…

在PyCharm中运行Jupyter Notebook的.ipynb文件及其pycharm软件的基础使用

(注意需使用PyCharm专业版,学生、教师可以申请免费使用:https://www.jetbrains.com/shop/eform/students) 1. pycharm2024版汉化 https://blog.csdn.net/m0_74103046/article/details/144560999 2. pycharm中的python控制台和J…

深度体验通义灵码2.0 AI 程序员

通义灵码2.0 作为一名开发者,我去年就使用过1.0,近期有幸体验了 2.0,这是一款集成了 Deepseek 大模型的智能编码助手。在这次体验中,我深入探索了新功能开发、跨语言编程、单元测试自动生成、图生代码等多个场景,深刻…

Coroutine协程

cooperation 协作 routine 程序,常规 协程核心:函数能够被挂起suspend,当然也能被回复resume 内置函数:also 返回对象本身 扩展: 内置函数let、also、with、run、apply大大提高你的开发效率! 协程的作用:…

使用IDEA提交SpringBoot项目到Gitee上

登录Gitee并新建仓库 创建本地仓库 提交本地代码到本地仓库 提交本地代码到远程仓库

Windows安装MySQL指南

1.下载 下载地址:https://www.mysql.com/downloads/ 下载版本:MySQL Installer for Window 2.安装MySQL 以下只列出需要注意的一些界面,没出现的界面默认继续即可。 1.选择安装类型 提供了多种安装模式,包括默认开发版、仅…

汽车免拆诊断案例 | 2013 款奔驰 S300L 车起步时车身明显抖动

故障现象  一辆2013款奔驰S300L车,搭载272 946发动机,累计行驶里程约为15万km。车主反映,将挡位置于D挡,稍微释放一点制动踏板,车辆蠕动时车身明显抖动,类似气缸失火时的抖动,又类似手动变速器…

从0开始:OpenCV入门教程【图像处理基础】

图像处理基础 一、OpenCV主要功能及模块介绍 1、内置数据结构和输入/输出 OpenCV内置了丰富的与图像处理有关的数据结构,如Image、Point、Rectangle等。core模块实现了各种基本的数据结构。imgcodecs模块提供了图像文件的读写功能,用户使用简单的命令…

Scrum方法论指导下的Deepseek R1医疗AI部署开发

一、引言 1.1 研究背景与意义 在当今数智化时代,软件开发方法论对于项目的成功实施起着举足轻重的作用。Scrum 作为一种广泛应用的敏捷开发方法论,以其迭代式开发、快速反馈和高效协作的特点,在软件开发领域占据了重要地位。自 20 世纪 90 …

个人环境配置--安装记录

根据显卡下载对应的cuda和cudnn 我使用的是docker,首先拉取镜像,我用的是ubuntu20.04 加速:pull hub.1panel.dev/ devel是开发版本 sudo docker pull hub.1panel.dev/nvidia/cuda:11.6.1-devel-ubuntu20.04先测试一下cuda有没有安装好 nvcc -V更新,安装…