102.完善个人资料设置页面
大家好~我是
米洛！
我正在从0到1打造一个开源的接口测试平台, 也在编写一套与之对应的教程，希望大家多多支持。
欢迎关注我的公众号米洛的测开日记，获取最新文章教程!
回顾
上一节我们实现了用户管理功能，能够对用户进行一些CRUD的操作。但那仅仅也只是针对管理员，假设我们想调整我们的昵称，或者头像，我们似乎没有这样的入口。
所以今天我们就来解决这个问题。
思考
由于个人资料的修改，其实改的也就是PityUser表里的数据，所以并不需要太复杂的东西。反而前端部分是重点工程。
我们凡是写页面，脑海里一定要有个参考的图，毕竟对于测试平台的开发来说，是没有专门的设计稿的，这个东西只能我们自己想。
既然自己很难想到，那我们就去参考别人的:
可以看到他有个个人设置页面，我们点进去看下:
可以说是开箱即用。
既然如此，那我们直接COPY他的代码然后进行微调即可。
修改字段数据
antd pro里面有许多的个人简介，地区等等我们不需要填的信息，我们要重新梳理一遍，在pity里面就是:
- 姓名
- 邮箱
- 联系电话
- 头像
基本上目前这四个数据就可以cover住我们的数据了，当然如果以后接入企业内部SSO的话，这个页面就没什么存在的必要了。
看看效果图:
数据呢，我是随便写的。
实现
可以看出，上述我们实际上调用的是编辑用户的接口，但这里有个小小的不同，待会会讲。接着我们需要有个上传头像的接口，专门处理用户的头像。
前端代码
由于基本上是拿的antd pro的源码，所以我这边只给大家commit，大家要自己去看了。
后端代码
注意，由于我调整过oss的数据，但是没有补充对应的文章。因为没有太大必要，就是个curd的操作，大家可以抄一下这个版本的代码
里面关于oss的改动，大家都可以抄起来。为了保证质量，我就没有继续水一篇这块的内容。
- 去用户表/UserUpdateForm添加phone字段
- 修改app/routers/auth/user.py下的update_user接口
注释写的很详细，因为这个接口是用户管理和个人资料设置公用的，所以普通成员是可以编辑自己的用户信息的。
但是一旦他改别人的数据，那就给他直接弹出权限不足的提示。接着如果他对role数据进行了修改，我们直接拒绝，杜绝越权现象。
- 编辑用户头像上传功能
我们在UserDao编写update_avatar方法:
参数是user_id和图片地址，接着把图片地址绑定到user身上。那么怎么获取到图片地址呢？
我们需要先上传数据到oss，接着拿到oss的url即可。所以这块oss做了一些很大的改变，大家还是看上面那个oss的操作。
- 编写用户头像上传接口
- 接收文件
- 判断文件后缀（这里需要判断是不是图片格式，笔者后续会补充）
- 上传到oss客户端并拿到url
- 更新头像
由于代码和教程隔了比较久的周期，所以导致这篇文章可能大家看的云里雾里。但是没关系，文章的目的更重要的是提供一些思路和方法，而不是一步一步的操作教程。有思考才有进步~共勉=。=
所以其实代码和文章结合才行。。。