[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-C4o6D1oJ":3,"public-project-articles-C4o6D1oJ":17},{"id":4,"uuid":5,"project_id":6,"title":7,"content":8,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},287,"C4o6D1oJ",45,"09. 开发普通用户登录、注册、个人资料、修改密码功能","当你看到页面全都是空白一片的时候，你应该按下 f12 键检查浏览器控制台，看看什么报错\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720162692620-29335db4-9751-4c1d-9b8d-356e48ec4583.png#averageHue=%23fcf7ed&clientId=ud5ad94cd-27eb-4&from=paste&height=707&id=u53edcad9&originHeight=884&originWidth=1889&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=47751&status=done&style=none&taskId=u3b0cf923-8398-4cc9-bcd5-2a9e7bfce45&title=&width=1511.2)\n后端完成用户登录的逻辑\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720162931663-c53fb0fd-d75b-4685-bebc-9e567d82803b.png#averageHue=%231f2024&clientId=ud5ad94cd-27eb-4&from=paste&height=336&id=u60423bc9&originHeight=420&originWidth=770&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=46391&status=done&style=none&taskId=u930695b2-bed1-47e1-968d-6ab57d312ff&title=&width=616)\n\n登录成功后，在浏览器的localStorage里面会出现缓存的用户数据，然后在 Manager.vue里面就可以拿到数据了\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720162991483-d4ea5b45-ba53-4aea-ae67-f917755714fd.png#averageHue=%231f2225&clientId=ud5ad94cd-27eb-4&from=paste&height=121&id=ub8afec06&originHeight=151&originWidth=1211&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=33583&status=done&style=none&taskId=u25751c9d-8590-48e3-9280-3793980ff7e&title=&width=968.8)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720162913271-bc49ea00-5434-49ba-aaef-60573a468ed0.png#averageHue=%23f9f5f5&clientId=ud5ad94cd-27eb-4&from=paste&height=373&id=ud9e94af7&originHeight=466&originWidth=1837&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=54626&status=done&style=none&taskId=u1577bf47-3fee-4272-951e-5b4b178118b&title=&width=1469.6)\n\n菜单设置只能管理员角色访问\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720163110163-e294b40d-8e08-4b29-a40b-274fd84f8653.png#averageHue=%231e1f22&clientId=ud5ad94cd-27eb-4&from=paste&height=351&id=uadae33d7&originHeight=439&originWidth=1017&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=60849&status=done&style=none&taskId=u79c367a5-5399-476a-be54-522be5a27a3&title=&width=813.6)\n\n**知其然  知其所以然**\n你没用能力去修改你的代码问题，甚至你都无法定位问题所在\n\n## 个人信息\n\n在修改完成用户信息后要及时**更新缓存的用户信息**\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720163426336-9dde3c7b-5914-41d6-832d-e2f1d03e379d.png#averageHue=%23faf9f9&clientId=ud5ad94cd-27eb-4&from=paste&height=403&id=u49cc50d3&originHeight=504&originWidth=1629&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=50465&status=done&style=none&taskId=u5a1ba079-7491-4cba-9c89-f45f045ccb2&title=&width=1303.2)\n\n\n子组件通知父组件更新数据\nPerson.vue\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720163446801-e6fa05f1-76d4-4c86-a501-967b071636bb.png#averageHue=%231f2125&clientId=ud5ad94cd-27eb-4&from=paste&height=392&id=aUYSc&originHeight=490&originWidth=1057&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=84628&status=done&style=none&taskId=uf063a70a-d68a-48f7-876c-3ddeacc6386&title=&width=845.6)\nManager.vue\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720163514788-da463ec3-23d7-4444-8ae4-ef5dbfc5f5c4.png#averageHue=%231e2024&clientId=ud5ad94cd-27eb-4&from=paste&height=100&id=uaabd409e&originHeight=125&originWidth=981&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=18370&status=done&style=none&taskId=u235161d1-3770-4164-8c68-c186838d686&title=&width=784.8)\n在Manager.vue里 从缓存取出最新的数据\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720163543917-da19911a-316b-4f17-9a6a-122033a7c108.png#averageHue=%23212328&clientId=ud5ad94cd-27eb-4&from=paste&height=98&id=ua3c6b3ca&originHeight=122&originWidth=971&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=17779&status=done&style=none&taskId=u5626383e-fdb8-458b-84ff-7aea890fd53&title=&width=776.8)\n\n## 修改密码\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720163653932-b9266d77-0e77-4ebd-8193-15278551b482.png#averageHue=%231f2024&clientId=ud5ad94cd-27eb-4&from=paste&height=325&id=u1c46257e&originHeight=406&originWidth=906&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=48856&status=done&style=none&taskId=u0ae2533d-5c06-4cd3-86e9-770cb0650ef&title=&width=724.8)\n\n## 注册\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720163870251-c7c5deb1-68d9-4205-8a66-85cfd75e7150.png#averageHue=%231f2125&clientId=ud5ad94cd-27eb-4&from=paste&height=157&id=ud0b920fe&originHeight=196&originWidth=575&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=12588&status=done&style=none&taskId=u361ef1f1-ccdd-4e28-bd74-90b3199a427&title=&width=460)\n\n## 修改样式\n\n![logo.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720163942899-1558249e-1b26-476c-8eab-c26d2d567964.png#averageHue=%23000000&clientId=ud5ad94cd-27eb-4&from=paste&height=160&id=u598c3ac3&originHeight=200&originWidth=200&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=4745&status=done&style=none&taskId=ucc49600f-6c69-41ca-9466-10e0575a2be&title=&width=160)\ncolor: #39bf23\n\nbg.png\n![bg.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720164025883-1ddfa1cf-f7dd-4e25-8cfa-4d6386c8e21a.png#averageHue=%236f8f32&clientId=ud5ad94cd-27eb-4&from=paste&height=1024&id=uaf56db81&originHeight=1280&originWidth=1920&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=751512&status=done&style=none&taskId=uc4382421-b1b9-4421-b7db-fac8462a17f&title=&width=1536)","coding",1,2298,612,"2024-07-05 17:06:18","2026-05-03 22:49:02","SpringBoot3+Vue3的农产品销售系统","agricultural-products-sales",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,41,48,55,62,69,76,77,84],{"id":21,"uuid":22,"project_id":6,"title":23,"type":9,"status":10,"public_enabled":10,"views":24,"sort":25,"created_at":26,"updated_at":14,"project_title":15,"project_slug":16},279,"vTqaWLV8","01. 农产品销售系统介绍",8545,588,"2025-01-09 09:48:08",{"id":28,"uuid":29,"project_id":6,"title":30,"type":9,"status":10,"public_enabled":10,"views":31,"sort":32,"created_at":33,"updated_at":14,"project_title":15,"project_slug":16},280,"JH1OiMOc","02. 导入并运行脚手架",7028,589,"2024-07-29 10:55:27",{"id":35,"uuid":36,"project_id":6,"title":37,"type":9,"status":10,"public_enabled":10,"views":38,"sort":39,"created_at":40,"updated_at":14,"project_title":15,"project_slug":16},281,"ieYnhvrN","03. 开发系统公告管理功能",4802,597,"2024-07-03 12:27:42",{"id":42,"uuid":43,"project_id":6,"title":44,"type":9,"status":10,"public_enabled":10,"views":45,"sort":46,"created_at":47,"updated_at":14,"project_title":15,"project_slug":16},282,"NdR2GruB","04. 开发首页公告展示功能",3398,606,"2024-07-05 11:59:23",{"id":49,"uuid":50,"project_id":6,"title":51,"type":9,"status":10,"public_enabled":10,"views":52,"sort":53,"created_at":54,"updated_at":14,"project_title":15,"project_slug":16},283,"XIsedcdn","05. 开发农产品分类管理",2711,607,"2024-07-05 11:59:43",{"id":56,"uuid":57,"project_id":6,"title":58,"type":9,"status":10,"public_enabled":10,"views":59,"sort":60,"created_at":61,"updated_at":14,"project_title":15,"project_slug":16},284,"JSqpofT8","06. 开发农产品管理功能",3102,608,"2024-07-05 12:00:05",{"id":63,"uuid":64,"project_id":6,"title":65,"type":9,"status":10,"public_enabled":10,"views":66,"sort":67,"created_at":68,"updated_at":14,"project_title":15,"project_slug":16},285,"L4Z6x2gY","07. 开发农产品进货管理",2047,609,"2024-07-05 12:00:21",{"id":70,"uuid":71,"project_id":6,"title":72,"type":9,"status":10,"public_enabled":10,"views":73,"sort":74,"created_at":75,"updated_at":14,"project_title":15,"project_slug":16},286,"uO2NaUtZ","08. 开发普通用户管理模块",1719,610,"2024-07-05 12:00:36",{"id":4,"uuid":5,"project_id":6,"title":7,"type":9,"status":10,"public_enabled":10,"views":11,"sort":12,"created_at":13,"updated_at":14,"project_title":15,"project_slug":16},{"id":78,"uuid":79,"project_id":6,"title":80,"type":9,"status":10,"public_enabled":10,"views":81,"sort":82,"created_at":83,"updated_at":14,"project_title":15,"project_slug":16},288,"K9Tgh6d7","10. 开发农产品购买页面",2484,613,"2024-07-05 17:06:40",{"id":85,"uuid":86,"project_id":6,"title":87,"type":9,"status":10,"public_enabled":10,"views":88,"sort":89,"created_at":90,"updated_at":14,"project_title":15,"project_slug":16},289,"ABnTvrYX","11. 开发下单、订单管理功能",2335,614,"2024-07-05 17:07:14"]