09. 开发普通用户登录、注册、个人资料、修改密码功能

5050 字约 11 分钟读完2298 次阅读更新于 2026/5/3

当你看到页面全都是空白一片的时候，你应该按下 f12 键检查浏览器控制台，看看什么报错
image.png
后端完成用户登录的逻辑
image.png

登录成功后，在浏览器的localStorage里面会出现缓存的用户数据，然后在 Manager.vue里面就可以拿到数据了
image.png
image.png

菜单设置只能管理员角色访问
image.png

知其然 知其所以然
你没用能力去修改你的代码问题，甚至你都无法定位问题所在

个人信息

在修改完成用户信息后要及时更新缓存的用户信息
image.png

子组件通知父组件更新数据
Person.vue
image.png
Manager.vue
image.png
在Manager.vue里 从缓存取出最新的数据
image.png

修改密码

image.png

注册

image.png

修改样式

logo.png
color: #39bf23

bg.png
bg.png