测试平台系列(102) 完善个人资料设置页面.md

2022/6/13 测试平台接口测试FastApiPythonReact

大家好~我是米洛
我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程,希望大家多多支持。
欢迎关注我的公众号米洛的测开日记,获取最新文章教程!

# 回顾

上一节我们实现了用户管理功能,能够对用户进行一些CRUD的操作。但那仅仅也只是针对管理员,假设我们想调整我们的昵称,或者头像,我们似乎没有这样的入口。

所以今天我们就来解决这个问题。

# 思考

由于个人资料的修改,其实改的也就是PityUser表里的数据,所以并不需要太复杂的东西。反而前端部分是重点工程。

我们凡是写页面,脑海里一定要有个参考的图,毕竟对于测试平台的开发来说,是没有专门的设计稿的,这个东西只能我们自己想。

既然自己很难想到,那我们就去参考别人的:

可以看到他有个个人设置页面,我们点进去看下:

可以说是开箱即用。

既然如此,那我们直接COPY他的代码然后进行微调即可。

# 修改字段数据

antd pro里面有许多的个人简介,地区等等我们不需要填的信息,我们要重新梳理一遍,在pity里面就是:

  • 姓名

  • 邮箱

  • 联系电话

  • 头像

    基本上目前这四个数据就可以cover住我们的数据了,当然如果以后接入企业内部SSO的话,这个页面就没什么存在的必要了。

    看看效果图:

数据呢,我是随便写的。

# 实现

可以看出,上述我们实际上调用的是编辑用户的接口,但这里有个小小的不同,待会会讲。接着我们需要有个上传头像的接口,专门处理用户的头像。

# 前端代码

由于基本上是拿的antd pro的源码,所以我这边只给大家commit,大家要自己去看了。

https://github.com/wuranxu/pityWeb/commit/39ff80dead3f15e1f199a903245db780f4da9e23#diff-55da039e17685acda9ab06fde7f12e2935c50ee93fd866e5be338059d6e1af43R1 (opens new window)

# 后端代码

注意,由于我调整过oss的数据,但是没有补充对应的文章。因为没有太大必要,就是个curd的操作,大家可以抄一下这个版本的代码

https://github.com/wuranxu/pity/commit/7e578e1d037b4cc111a7b2394d0d03ecea473f4f#diff-854061f75e79217e573fa174ca72e5414551d3ebd43a800a7ab8f4f4975604c7R1 (opens new window)

里面关于oss的改动,大家都可以抄起来。为了保证质量,我就没有继续水一篇这块的内容。

  • 去用户表/UserUpdateForm添加phone字段

  • 修改app/routers/auth/user.py下的update_user接口

注释写的很详细,因为这个接口是用户管理个人资料设置公用的,所以普通成员是可以编辑自己的用户信息的。

但是一旦他改别人的数据,那就给他直接弹出权限不足的提示。接着如果他对role数据进行了修改,我们直接拒绝,杜绝越权现象。

  • 编辑用户头像上传功能

    我们在UserDao编写update_avatar方法:

参数是user_id和图片地址,接着把图片地址绑定到user身上。那么怎么获取到图片地址呢?

我们需要先上传数据到oss,接着拿到oss的url即可。所以这块oss做了一些很大的改变,大家还是看上面那个oss的操作。

  • 编写用户头像上传接口

  1. 接收文件
  2. 判断文件后缀(这里需要判断是不是图片格式,笔者后续会补充)
  3. 上传到oss客户端并拿到url
  4. 更新头像

由于代码和教程隔了比较久的周期,所以导致这篇文章可能大家看的云里雾里。但是没关系,文章的目的更重要的是提供一些思路和方法,而不是一步一步的操作教程。有思考才有进步~共勉=。=

所以其实代码和文章结合才行。。。