用户管理系统---第四天（注册+用户管理的前端）

最新推荐文章于 2024-06-19 15:33:17 发布

认真生活的大大怪

最新推荐文章于 2024-06-19 15:33:17 发布

阅读量881

点赞数

分类专栏：用户管理系统文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/m0_46162646/article/details/129623837

版权

用户管理系统专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章介绍了如何在前端实现注册功能，包括创建注册页面、定义路由、编写前端代码、测试及总结。同时，详细阐述了获取用户登录态的接口实现，以及用户管理后台的前端开发，涉及页面创建、权限控制和表格组件的使用。文章使用了AntDesignPro框架，并讨论了AntDesign与AntDesignPro的区别。

摘要由CSDN通过智能技术生成

文章目录

注册功能前端（第四天）

1. 增加注册⻚⾯

直接复制登录⻚⾯，重命名为Register(复制整个Login⽂件夹，粘贴到user⽂件夹下,重命名)

复制完⻚⾯之后，第⼀步把组件的名称改⼀下(尽量给每个⻚⾯都给它唯⼀的⼀个名称，不要所有复制粘贴过来的⻚⾯全⽤⼀样的名称，这样之后重构或修改的时候，可能就不⼩⼼把别的⻚⾯的代码也影响了)

ctrl+f 全字、⼤⼩写匹配替换(这⾥就替换了两个)

拉到最上⾯，有些没使⽤的会变成灰⾊，有着红⾊波浪线(删掉即可,这⾥借⽤了直播回放的图，之前顺⼿清掉了，没得截图🤣)

注意：只删除灰⾊带波浪线的，别把import或者其他的也删了

2.定义注册的地址

我们需要去定义⼀下，⽤户在地址栏⾥⾯输⼊什么⽹址，才能够访问到新建的⻚⾯

新建路由

我们现在是⽤了react router这样⼀个路由组件，可以帮助我们把url和写的⻚⾯组件关联上，这样的话⽤户访问某⼀个地址。⽐如说user/register, 然后访问它的时候，后⾯去指定⼀个我们写的组件的位置，⽐如user/register，它就会找到user配置⽬录下的register

还要到app.tsx修改⼀些内容 (不做这些访问register会重定向到login⻚⾯)

到地址栏上试⼀试http://localhost:8000/user/register，可以访问到注册⻚⾯了

为什么会触发这种⾃动重定向到登录⻚的逻辑？

主要就是因为app.tsx 它是咱们这个前端项⽬的全局⽂件，⾥⾯定义了刚进⼊⼀个⻚⾯时要执⾏的逻辑，⽐如说我们刚进⼊⻚⾯要获取⽤户信息，如果没获取到⽤户信息，就重定向到登录⻚让你登录，那同时，因为使⽤的这个框架，更偏向于后台管理系统，所以说每个⻚⾯都会去校验。如果说⽤户没登录，没有登录状态，那我们就把它重定向到登录⻚

3.写前端代码

(1) 删掉没⽤的代码

(2) 修改代码

修改界⾯

改为账号密码注册

界⾯上只有两个⽂本框，还需要⼀个确认密码的密码框，复制上边代码，照着修改即可

然后按ctrl+f 把登录全局替换成注册

你会发现登录按钮的⽂字没有变成注册(因为我们使⽤这个现成的loginform组件的原因，不是我们⾃⼰写的)

去看下LoginForm的源码，点击LoginForm，进⼊到对应的⽂件

这个是这个组件的类型定义

点击 js，就能看⻅组件源码

这⾥有个submitText

在app.tsx新增代码

此时注册界⾯的按钮成功修改了⽂本

(3) 提交逻辑

ctrl + 单击这个LoginParams，去补充注册参数

把这段代码复制在这段代码下⾯，把LoginParams 改为 RegisterParams

不是必填所以有问号

修改⼀下代码

回到index.tsx，把 LoginParams 全部替换为 RegisterParams

在提交前写⼀些校验，代码如下：

我们还要写⼀个注册⽅法，ctrl+点击login

这⾥有⼀个api，复制代码，粘贴到这段代码下⾯，修改⼀下

点击 LoginResult （这⾥定义了向后端发送请求之后，给前端返回什么类型的数据）

复制这段代码，粘贴到这段代码下⾯，修改⼀下(这⾥定义⼀下注册返回的类型)

回到api.ts 把 LoginResult 改为 RegisterResult

回到index.tsx 把 user 改为 id ， login 改为 register

修改下注册成功跳转的位置和注册失败提示的信息

删掉没⽤的代码(这些是登录⻚⾯的错误提示，这⾥不需要)

(4) 测试⼀下

试下密码不⼀致有没有弹出提示

正常进⾏注册(账号、密码符合规则)

这⾥要注意的是我们有设置超时时间，在测试的时间记得把数值调⼤点，防⽌因为超时⽽⽆法响应( 100000 或者 1000000都可以)

进⾏注册，这⾥弹出⼀个注册成功

不过登录成功是跳转到登录⻚，这个redirectundefined地址，额，有亿点⼩bug，修⼀下?

就是说⽤户他根本就没有redirect的参数，就是我们之前跳转出来的时候url上就没有这个参数，所

以说我们要做⼀个判断

修改⼀下之前写的代码：

登录没有注册的跳转链接，去登录⻚⾯加⼀下

(5)总结

如何前台去添加一个功能，都需要加一些什么修改一些什么：）

前端页面步骤：先改路由config里面的routes然后页面（src/pages）的创建然后api.ts定义接口

typings.d.ts定义返回的类型

api.ts：

API.CurrentUser是 typings.d.ts定义返回的类型

antdesign：

app.tsx是什么文件s（全局文件）项目全局入口文件，定义了整个项目中使用的公共数据（比如用户信息）等

access.ts控制用户访问权限

首次访问页面（刷新页面），进入app.tsx，执行getInitialState方法，该方法的返回值就是全局可用的状态值

api.ts（src\services\ant-design-pro）是写后台接口的地方就跟vue里面的js一样

register是函数名，RegisterParams定义了所需参数类型，RegisterResult定义了向后端发送请求之后，给前端返回什么类型的数据

RegisterParams：
type RegisterParams = {
    userAccount?: string;
    userPassword?: string;
    checkPassword?:string;
    autoLogin?: boolean;
    type?: string;
  };
RegisterResult：
 type LoginResult = {
    status?: string;
    type?: string;
    currentAuthority?: string;
  };
  type RegisterResult =number;
await啥意思（生命周期函数）

前后端交互

前端需要向后端发送请求

前端 ajax 来请求后端

axios 封装了 ajax

request 是 ant design 项目又封装了一次

追踪 request 源码：用到了 umi 的插件、requestConfig 是一个配置

获取用户登录态

获取当前用户登录态，信息接口（自动登录的实现）

在UserServiceImpl做⼀个判断

UserController添加获取当前⽤户登录态、信息接⼝

/**
 * 获取当前登录用户（自动登录的实现）
 * @param request
 * @return
 */
@GetMapping("/current")
public User getCurrentUser(HttpServletRequest request){
    Object userObj = request.getSession().getAttribute(USER_LOGIN_STATE);
    User currentUser=(User)userObj;
    if (currentUser==null){
        return null;
    }
    long userId=currentUser.getId();
    //todo 校验用户是否合法还没有实现
    //根据用户id更新用户信息，因为有可能用户信息会改变，比如积分什么的，所以查一次数据库
    User user=userService.getById(userId);
    //用户脱敏
    return userService.getSafetyUser(user);
}

修改前端点击queryCurrentUser：

修改⼀下

然后点击CurrentUser，看看它给我们返回什么，返回的东⻄很多，改成我们想要的

？代表不是必须要有的参数

根据数据库内的字段，决定返回的东⻄

把这段代码修改⼀下

app.tsx:

把这段代码提到上⾯，变量名改成NO_NEED_LOGIN_WHITE_LIST

修改这段代码

改成username

登录试下

成功进⼊欢迎⻚，诶，为什么右上⻆的头像和⽤户名⼀直在加载呢？显示⽤户名的⽔印也没有

去数据库添加数据

刷新⽹⻚，在前端的开发者⼯具(F12、右键点击检查也⾏)可以看到已经成功获取到最新的⽤户信息

⽔印出来了，头像没出来，肯定是因为我们取的头像变量名和它原来的对不上，所以没有显示

找到AvatarDropdown.tsx修改⼀下头像的变量名

请注意，不要把样式名替换了，然后把name改为username

再次刷新⽹⻚，头像和⽤户名出来了

完成⽤户管理后台的前端开发

1.创建⽤户管理⻚⾯

在page⽂件夹下新建Admin⽂件夹,，把user⽂件夹下的Register⽂件夹复制，粘贴到admin⽂件夹下，并改名为UserMange

去route.ts添加⼀个路由

访问⼀下，诶，⽆权访问

对⽐上⾯的/user ，发现/admin多了access: ‘canAdmin’ 也就是管理员才能访问

access来⾃access.ts⽂件

在Ant Design Pro（Umi 框架）中 access.ts 控制⽤户的访问权限

修改为：

将登录账号设置为管理员账号，再次访问：

2.开发管理⻚⾯

我们复制的是注册的代码，怎么显示成这样，不对劲呐，它⾥⾯根本就没有根据路由去选择到

底要显示哪个⻚⾯，所以我们要把它改⼀下

问题应该是出在component: ‘./Admin’

Admin.tsx内的⽂本内容和⻚⾯显示的相同，这说明这个⻚⾯已经写死了，修改⼀下内容

没用的删掉

此时⻚⾯显示：

routes.ts中路由定义了component之后如果有routes则需要子页面嵌入到父页面

则应该在admin这个组件里进行传值（props为父子传值，复习一下vue知识）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5JpO50sJ-1679042381165)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\image-20230314105705564.png)]$