[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-rrMIV8oS":3,"public-project-articles-rrMIV8oS":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},423,"rrMIV8oS",46,"12. 开发用户视角的电影列表","![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725415085956-529f79a7-2f40-4e26-bc49-ce039d5add14.png)\n\n\n\ncss\n\n```css\n.line1 {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n.line3 {\n    word-break: break-all;\n    text-overflow: ellipsis;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3; \u002F* 超出几行省略 *\u002F\n    overflow: hidden;\n}\n```\n\n\n\n## 最关键的方法\n\n1. 电影的总评论数量\n2. 电影的平均评分\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725417593458-0582bedf-5de9-4157-a72e-c067dd50f8df.png)\n\n## 数据联动\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725418083311-3694fbce-001e-4cb5-8dbb-1c4d904a1d76.png)\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725418055659-e7f5abba-992e-4344-96ec-368f0b0270e2.png)\n\n查询 sql：\n\nselect film.*, category.name as categoryName from film left join category on film.category_id = category.id **\u003Cfont style=\"color:#DF2A3F;\">WHERE film.category_id = ?\u003C\u002Ffont>** order by film.id desc LIMIT ?\n\n\n\n页面效果：\n\n![](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1725418215252-9a43c079-ef1c-4793-8819-506df5a039d8.png)\n\n\n\n## 页面的代码\n\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-input v-model=\"data.name\" placeholder=\"请输入电影名称查询\" style=\"width: 300px; margin-right: 10px\">\u003C\u002Fel-input>\n      \u003Cel-button type=\"primary\" @click=\"load\">查询\u003C\u002Fel-button>\n      \u003Cel-button type=\"info\" @click=\"reset\">重置\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-button :class=\"{ 'film-active' : data.categoryId === null }\" @click=\"loadFilmByCategory(null)\">全部\u003C\u002Fel-button>\n      \u003Cel-button :class=\"{ 'film-active' : data.categoryId === item.id }\" v-for=\"item in data.categoryList\" :key=\"item.id\" @click=\"loadFilmByCategory(item.id)\">{{ item.name }}\u003C\u002Fel-button>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card\" style=\"margin-bottom: 5px\">\n      \u003Cel-row :gutter=\"20\">\n        \u003Cel-col :span=\"6\" v-for=\"item in data.tableData\" :key=\"item.id\" style=\"margin-bottom: 20px\">\n          \u003Cimg :src=\"item.cover\" alt=\"\" style=\"width: 100%; height: 400px; border-radius: 5px\">\n          \u003Cdiv style=\"margin: 5px 0; font-size: 18px\" class=\"line1\">{{ item.name }}\u003C\u002Fdiv>\n          \u003Cdiv style=\"margin: 5px 0; display: flex; align-items: center\">\n            \u003Cel-rate v-model=\"item.score\" disabled allow-half show-score>\u003C\u002Fel-rate>\n            \u003Cdiv style=\"flex: 1; text-align: right; color: #1967e3\">{{ item.commentNum }}人评论\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \u003Cdiv style=\"font-size: 13px; color: #666\" class=\"line3\">{{ item.descr }}\u003C\u002Fdiv>\n        \u003C\u002Fel-col>\n      \u003C\u002Fel-row>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"card\">\n      \u003Cel-pagination background layout=\"total, prev, pager, next\" v-model:current-page=\"data.pageNum\" v-model:page-size=\"data.pageSize\"\n                     :total=\"data.total\" @current-change=\"load\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { reactive } from \"vue\";\nimport request from \"@\u002Futils\u002Frequest\";\n\nconst data = reactive({\n  name: null,\n  pageNum: 1,\n  pageSize: 8,\n  tableData: [],\n  total: 0,\n  categoryList: [],\n  categoryId: null\n})\n\n\u002F\u002F 查询所有电影分类信息\nconst loadCategory = () => {\n  request.get('\u002Fcategory\u002FselectAll').then(res => {\n    data.categoryList = res.data\n  })\n}\nloadCategory()\n\n\u002F\u002F 根据分类查询电影列表\nconst loadFilmByCategory = (categoryId) => {\n  data.categoryId = categoryId\n  load()\n}\n\nconst load = () => {\n  request.get('\u002Ffilm\u002FselectPage', {\n    params: {\n      pageNum: data.pageNum,\n      pageSize: data.pageSize,\n      name: data.name,\n      categoryId: data.categoryId\n    }\n  }).then(res => {\n    data.tableData = res.data.list\n    data.total = res.data.total\n  })\n}\nload()\n\nconst reset = () => {\n  data.name = null\n  load()\n}\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.film-active {\n  background-color: #1967e3;\n  color: white;\n}\n\u003C\u002Fstyle>\n```\n\n","coding",1,1331,807,"2024-09-04 11:02:08","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,98,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":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":99,"uuid":100,"project_id":6,"title":101,"type":9,"status":10,"public_enabled":10,"views":102,"sort":103,"created_at":104,"updated_at":14,"project_title":15,"project_slug":16},424,"Q6ApfoCa","13. 开发电影详情页",1254,808,"2024-09-04 11:53:18",{"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"]