[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-nCDmvc9n":3,"public-project-articles-nCDmvc9n":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},426,"nCDmvc9n",46,"15. 开发电影评分排行榜功能","最后做完的效果\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725506992853-faca7c9c-ce54-48c6-924d-7ab362f59554.png)\n\n\n\n核心代码：\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv style=\"display: flex; grid-gap: 10px\">\n    \u003Cdiv class=\"card\" style=\"width: 50%; padding: 20px\">\n      \u003Cdiv style=\"margin-bottom: 20px; font-size: 20px; font-weight: bold\">电影评分榜\u003C\u002Fdiv>\n      \u003Cdiv v-for=\"(item, index) in data.filmList\" :key=\"item.id\" @click=\"goDetail(item.id)\" style=\"cursor: pointer; margin-bottom: 10px\">\n        \u003Cdiv style=\"display: flex; grid-gap: 10px\">\n          \u003Cdiv style=\"padding-top: 10px\">\n            \u003Cdiv style=\"font-weight: bold; font-size: 18px; color: gold\" v-if=\"index === 0\">1\u003C\u002Fdiv>\n            \u003Cdiv style=\"font-weight: bold; font-size: 18px; color: silver\" v-else-if=\"index === 1\">2\u003C\u002Fdiv>\n            \u003Cdiv style=\"font-weight: bold; font-size: 18px; color: chocolate\" v-else-if=\"index === 2\">3\u003C\u002Fdiv>\n            \u003Cdiv style=\"font-size: 18px; color: #333\" v-else>{{ index + 1 }}\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \u003Cimg :src=\"item.cover\" alt=\"\" style=\"width: 100px\">\n          \u003Cdiv style=\"flex: 1\">\n            \u003Cdiv style=\"font-size: 20px; margin-bottom: 10px\">{{ item.name }}\u003C\u002Fdiv>\n            \u003Cdiv style=\"color: #666; margin-bottom: 10px\" class=\"line3\">{{ item.descr }}\u003C\u002Fdiv>\n            \u003Cdiv>\n              \u003Cel-rate v-model=\"item.score\" allow-half show-score disabled>\u003C\u002Fel-rate>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv style=\"width: 50%; padding: 20px\">\n      \u003Cdiv style=\"margin-bottom: 20px; padding-left: 50px; font-size: 20px; font-weight: bold\">系统公告\u003C\u002Fdiv>\n      \u003Cel-timeline>\n        \u003Cel-timeline-item v-for=\"item in data.noticeList\" :key=\"item.id\" :timestamp=\"item.time\" placement=\"top\">\n          \u003Cdiv class=\"card\">\n            \u003Cdiv style=\"font-size: 16px; font-weight: bold; margin-bottom: 10px\">{{ item.title }}\u003C\u002Fdiv>\n            \u003Cdiv style=\"color: #666\">{{ item.content }}\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fel-timeline-item>\n      \u003C\u002Fel-timeline>\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport request from \"@\u002Futils\u002Frequest\";\n\nconst data = reactive({\n  user: JSON.parse(localStorage.getItem('system-user') || '{}'),\n  noticeList: [],\n  filmList: []\n})\n\nconst goDetail = (id) => {\n  location.href = '\u002FfilmDetail?id=' + id\n}\n\nrequest.get('\u002Fnotice\u002FselectAll').then(res => {\n  data.noticeList = res.data\n})\n\nrequest.get('\u002Ffilm\u002FselectRanking').then(res => {\n  data.filmList = res.data\n})\n\u003C\u002Fscript>\n```\n\n\n\n后端查询排行榜的方法：\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725507045524-66332723-ecdb-4c29-b0c5-75b3a0d2c134.png)\n\n\n\n## 换一下登录注册的背景图\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fjpeg\u002F751015\u002F1725507149370-3eed6441-d470-490d-bbf6-539e3d03abb2.jpeg)![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fjpeg\u002F751015\u002F1725507150725-56b17bfe-b810-45be-83e6-23ea6fa507b4.jpeg)\n\n\n\n## 补充注册逻辑\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725507316422-3a080c1b-c256-459d-8268-efb0e9362efe.png)\n\n","coding",1,1051,811,"2024-09-05 11:44:44","2026-05-03 22:49:02","SpringBoot3+Vue3的电影评论系统","movie-review",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,41,48,55,62,69,76,83,90,97,104,111,118],{"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},292,"kCgjr7mm","01. 电影评论系统介绍",4823,638,"2025-01-09 09:33:06",{"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},293,"BlmKufUR","02. 导入并运行脚手架",3530,639,"2024-07-29 10:54:55",{"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},294,"06Pduwwf","03. 开发系统公告功能（1）",2477,640,"2024-07-29 12:10:44",{"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},295,"Fdq2YYG6","04. 开发系统公告功能（2）",1703,647,"2024-07-30 11:50:26",{"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},296,"GCaoVbnp","05. 开发系统公告功能（3）",1380,648,"2024-07-30 11:51:01",{"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},297,"RSJvf6Eg","06. 开发系统公告功能（4）",1361,649,"2024-07-30 11:52:11",{"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},298,"joADRMpg","07. 开发首页展示公告功能（时间线）",1332,650,"2024-07-30 11:52:49",{"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},419,"Qus99gUh","08. 开发电影分类管理功能",1607,800,"2024-09-03 10:35:12",{"id":77,"uuid":78,"project_id":6,"title":79,"type":9,"status":10,"public_enabled":10,"views":80,"sort":81,"created_at":82,"updated_at":14,"project_title":15,"project_slug":16},420,"vkbZ8lMM","09. 开发电影信息管理",1761,801,"2024-09-03 10:35:48",{"id":84,"uuid":85,"project_id":6,"title":86,"type":9,"status":10,"public_enabled":10,"views":87,"sort":88,"created_at":89,"updated_at":14,"project_title":15,"project_slug":16},421,"ZwFHi9Ao","10. 开发电影评论管理功能",1514,802,"2024-09-03 11:39:45",{"id":91,"uuid":92,"project_id":6,"title":93,"type":9,"status":10,"public_enabled":10,"views":94,"sort":95,"created_at":96,"updated_at":14,"project_title":15,"project_slug":16},422,"DmVqZCwN","11. 开发用户管理功能",1171,806,"2024-09-04 11:01:37",{"id":98,"uuid":99,"project_id":6,"title":100,"type":9,"status":10,"public_enabled":10,"views":101,"sort":102,"created_at":103,"updated_at":14,"project_title":15,"project_slug":16},423,"rrMIV8oS","12. 开发用户视角的电影列表",1331,807,"2024-09-04 11:02:08",{"id":105,"uuid":106,"project_id":6,"title":107,"type":9,"status":10,"public_enabled":10,"views":108,"sort":109,"created_at":110,"updated_at":14,"project_title":15,"project_slug":16},424,"Q6ApfoCa","13. 开发电影详情页",1254,808,"2024-09-04 11:53:18",{"id":112,"uuid":113,"project_id":6,"title":114,"type":9,"status":10,"public_enabled":10,"views":115,"sort":116,"created_at":117,"updated_at":14,"project_title":15,"project_slug":16},425,"gjsxuriJ","14. 开发电影评论功能",1501,810,"2024-09-05 11:44:17",{"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}]