[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-Q6ApfoCa":3,"public-project-articles-Q6ApfoCa":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},424,"Q6ApfoCa",46,"13. 开发电影详情页","![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725419177155-a285e429-969b-4bcc-bfc0-dd834714ddd4.png)\n\n## 查询电影详情接口\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725420112332-c1031c46-5cd6-4dc9-b402-ec6f80be0e9c.png)\n\n## 随机推荐电影\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725421035192-5652dd64-778c-4f4d-a290-1782068b7c5e.png)\n\n\n\n## 详情页布局代码\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv style=\"display: flex; align-items: flex-start; grid-gap: 10px\">\n      \u003Cdiv class=\"card\" style=\"flex: 1; padding: 20px\">\n        \u003Cdiv style=\"display: flex; align-items: center;\">\n          \u003Cdiv style=\"font-weight: bold; font-size: 18px; flex: 1\">{{ data.film.name }}\u003C\u002Fdiv>\n          \u003Cdiv>\n            \u003Cel-button type=\"primary\" plain>写短评\u003C\u002Fel-button>\n            \u003Cel-button type=\"success\" plain>写长评\u003C\u002Fel-button>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Cdiv style=\"margin-bottom: 20px\">\n          \u003Cel-rate v-model=\"data.film.score\" disabled allow-half show-score>\u003C\u002Fel-rate>\n        \u003C\u002Fdiv>\n\n        \u003Cdiv style=\"display: flex; grid-gap: 20px; margin-bottom: 20px\">\n          \u003Cimg :src=\"data.film.cover\" alt=\"\" style=\"width: 200px; height: 270px; border-radius: 5px\">\n          \u003Cdiv style=\"flex: 1; color: #666\">\n            \u003Cdiv style=\"margin-bottom: 10px\">\u003Cstrong>导演：\u003C\u002Fstrong>{{ data.film.director }}\u003C\u002Fdiv>\n            \u003Cdiv style=\"margin-bottom: 10px\">\u003Cstrong>主演：\u003C\u002Fstrong>{{ data.film.actors }}\u003C\u002Fdiv>\n            \u003Cdiv style=\"margin-bottom: 10px\">\u003Cstrong>类型：\u003C\u002Fstrong>{{ data.film.categoryName }}\u003C\u002Fdiv>\n            \u003Cdiv style=\"margin-bottom: 10px\">\u003Cstrong>制片国家\u002F地区：\u003C\u002Fstrong>{{ data.film.country }}\u003C\u002Fdiv>\n            \u003Cdiv style=\"margin-bottom: 10px\">\u003Cstrong>语言：\u003C\u002Fstrong>{{ data.film.language }}\u003C\u002Fdiv>\n            \u003Cdiv style=\"margin-bottom: 10px\">\u003Cstrong>上映日期：\u003C\u002Fstrong>{{ data.film.date }}\u003C\u002Fdiv>\n            \u003Cdiv style=\"margin-bottom: 10px\">\u003Cstrong>片长：\u003C\u002Fstrong>{{ data.film.duration }}\u003C\u002Fdiv>\n            \u003Cdiv style=\"margin-bottom: 10px\">\u003Cstrong>IMDb：\u003C\u002Fstrong>{{ data.film.imdb }}\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003Cdiv style=\"font-size: 20px; color: #1967e3; margin-bottom: 10px\">{{ data.film.name }} 的剧情简介\u003C\u002Fdiv>\n        \u003Cdiv style=\"color: #666; line-height: 24px; text-align: justify\">{{ data.film.descr }}\u003C\u002Fdiv>\n\n      \u003C\u002Fdiv>\n\n\n      \u003Cdiv style=\"width: 300px; padding: 20px\" class=\"card\">\n        \u003Cdiv style=\"font-size: 20px; margin-bottom: 20px\">推荐电影\u003C\u002Fdiv>\n        \u003Cdiv style=\"margin-bottom: 20px; cursor: pointer\" v-for=\"item in data.recommendList\" :key=\"item.id\" @click=\"goDetail(item.id)\">\n          \u003Cimg :src=\"item.cover\" alt=\"\" style=\"width: 100%; margin-bottom: 5px\">\n          \u003Cdiv style=\"font-size: 18px\">{{ item.name }}\u003C\u002Fdiv>\n          \u003Cdiv>\n            \u003Cel-rate v-model=\"item.score\" disabled allow-half show-score>\u003C\u002Fel-rate>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport router from \"@\u002Frouter\";\nimport request from \"@\u002Futils\u002Frequest\";\n\nconst data = reactive({\n  id: router.currentRoute.value.query.id,\n  film: {},\n  recommendList: []\n})\n\nrequest.get('\u002Ffilm\u002FselectById\u002F' + data.id).then(res => {\n  data.film = res.data\n})\n\nrequest.get('\u002Ffilm\u002FselectRecommend\u002F' + data.id).then(res => {\n  data.recommendList = res.data\n})\n\nconst goDetail = (id) => {\n  location.href = '\u002FfilmDetail?id=' + id\n}\n\u003C\u002Fscript>\n```\n\n","coding",1,1254,808,"2024-09-04 11:53:18","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,105,112],{"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":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":106,"uuid":107,"project_id":6,"title":108,"type":9,"status":10,"public_enabled":10,"views":109,"sort":110,"created_at":111,"updated_at":14,"project_title":15,"project_slug":16},425,"gjsxuriJ","14. 开发电影评论功能",1501,810,"2024-09-05 11:44:17",{"id":113,"uuid":114,"project_id":6,"title":115,"type":9,"status":10,"public_enabled":10,"views":116,"sort":117,"created_at":118,"updated_at":14,"project_title":15,"project_slug":16},426,"nCDmvc9n","15. 开发电影评分排行榜功能",1051,811,"2024-09-05 11:44:44"]