[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-BlmKufUR":3,"public-project-articles-BlmKufUR":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},293,"BlmKufUR",46,"02. 导入并运行脚手架","## 什么是脚手架，脚手架的优势\n\n提供一个基本的项目工程，这个工程跟我们即将做的项目没有什么关联，纯粹是一个基本的开发模板，通过一个基础的成型的简单的项目模板我们来快速开发项目，这样的话效率会比较高，**省去了一些无用的流程，更多的去关注项目本身功能的开发！**\n我们的目的是：**快速**开发完成项目\n脚手架约束一些**版本号**，这样就不会因为版本问题出错\n最终大大降低了大家的学习成本，可以在短期内快速实习自己的功能开发。\n\n## 解压脚手架\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722219609921-53e229bb-d699-4d53-a102-67adbc968c0a.png#averageHue=%23faf9f9&clientId=u0a3ae94a-db40-4&from=paste&height=181&id=WgrBd&originHeight=226&originWidth=1006&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=23184&status=done&style=none&taskId=u373eb6ad-4b7b-44d5-b69c-784445b9951&title=&width=804.8)\n记住：这个**system**文件夹是项目的根文件夹，用idea打开这个文件夹运行项目\n改名为 film_comment_system，后续我们用idea打开这个** film_comment_system** 文件夹就可以运行项目了\n\n## 导入数据库\n\n通过Navicat创建 film_comment_system 的数据库，然后导入**film_comment_system.sql**文件即可\n数据库里面有一个表叫 admin\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722219716741-6aa8d7a4-e7c4-4421-a736-497a812d72c5.png#averageHue=%23f9f3f2&clientId=u0a3ae94a-db40-4&from=paste&height=343&id=QZmOl&originHeight=429&originWidth=964&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=37266&status=done&style=none&taskId=u9a7e81a9-52a0-4405-babe-8a11a813d7c&title=&width=771.2)\n\n## IDEA导入项目\n\nidea打开film_comment_system文件夹导入项目\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722219849278-6d793d2d-dcd2-44a8-889e-cd016289f3af.png#averageHue=%23292c31&clientId=u0a3ae94a-db40-4&from=paste&height=651&id=Af6UW&originHeight=814&originWidth=1000&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=87311&status=done&style=none&taskId=u409fe1d9-befa-4da8-b0a0-a3a5e3979b5&title=&width=800)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722219884736-1a934058-cdd9-4768-b401-609ed3669035.png#averageHue=%232b2f36&clientId=u0a3ae94a-db40-4&from=paste&height=300&id=ChOsS&originHeight=375&originWidth=707&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=32388&status=done&style=none&taskId=ueb94f469-d529-400c-bdc9-776359b0f28&title=&width=565.6)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722219963068-c8c5f2fa-6fec-45e6-bcd3-a1ae73ce7d62.png#averageHue=%232d3239&clientId=u0a3ae94a-db40-4&from=paste&height=261&id=oc9at&originHeight=326&originWidth=484&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=16178&status=done&style=none&taskId=u9c5fc991-7e1e-4255-9f8e-f727a376b94&title=&width=387.2)\n在 maven里面配置  阿里云镜像\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220094133-d7b9f373-e314-41c7-b251-7a33a8c4087c.png#averageHue=%23232529&clientId=u0a3ae94a-db40-4&from=paste&height=506&id=fVSR1&originHeight=632&originWidth=1742&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=110278&status=done&style=none&taskId=u4bf8b7b6-5456-4945-9fb5-1b12b1ddac8&title=&width=1393.6)\n修改数据库配置\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220155186-ba94295e-e69f-4d53-bf6e-e48511efbada.png#averageHue=%23242629&clientId=u0a3ae94a-db40-4&from=paste&height=496&id=NRg61&originHeight=620&originWidth=1562&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=118657&status=done&style=none&taskId=u48f2e02f-9d0f-41f9-b91a-12098132633&title=&width=1249.6)\n\n## 启动Springboot工程\n\n通过 maven导入Springboot项目依赖\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220231575-ca959f4c-1c5a-4628-931c-11c7ba6e3018.png#averageHue=%23232529&clientId=u0a3ae94a-db40-4&from=paste&height=736&id=SZB4M&originHeight=920&originWidth=1819&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=154685&status=done&style=none&taskId=u32b8c4eb-875e-420e-97bd-7c4a06b9b5f&title=&width=1455.2)\ndebug模式启动Springboot工程\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220274849-7be2b1a2-b41c-42a6-a013-3a6a2959b3a2.png#averageHue=%23242629&clientId=u0a3ae94a-db40-4&from=paste&height=796&id=ub2ed1971&originHeight=995&originWidth=1790&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=152094&status=done&style=none&taskId=u03cbd61f-8862-4471-afe6-271509e0166&title=&width=1432)\n访问 http:\u002F\u002Flocalhost:9090 验证后端是否启动成功\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220319305-cb62b64b-c5e6-4c65-819d-6ab72d280ea6.png#averageHue=%23e4c28c&clientId=u0a3ae94a-db40-4&from=paste&height=242&id=ua6c071dd&originHeight=302&originWidth=722&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=19996&status=done&style=none&taskId=ud71baf0f-51bf-4e35-842c-23c95b94812&title=&width=577.6)\n\n## 启动Vue工程\n\n进入vue工程目录\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220414582-04bbfc88-eb6a-4829-9042-4e0e2d3fc305.png#averageHue=%23202125&clientId=u0a3ae94a-db40-4&from=paste&height=246&id=u105c6939&originHeight=307&originWidth=1121&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=47853&status=done&style=none&taskId=u8074c5b3-dc57-4ed8-ae24-af022672a6b&title=&width=896.8)\n配置npm的淘宝镜像\nnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\u002F\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220485527-c76b34d0-7afe-4a25-a11d-b06c8e1dec54.png#averageHue=%23202328&clientId=u0a3ae94a-db40-4&from=paste&height=78&id=ue87d743f&originHeight=97&originWidth=1509&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=37450&status=done&style=none&taskId=uc319167a-c6d2-4331-89d4-fba1a1b220b&title=&width=1207.2)\n安装完成后会多出一个 node_modules的目录出来\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220512889-9efa9acb-4bec-4f49-ad0d-db983f03ecbc.png#averageHue=%232f3235&clientId=u0a3ae94a-db40-4&from=paste&height=267&id=u6c4c6fe0&originHeight=334&originWidth=447&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=16387&status=done&style=none&taskId=udc4b0781-e2a4-4334-9708-0f5b3272ea6&title=&width=357.6)\n\n打开package.json，点击**dev选项**启动项目\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220550391-1d57cce6-99c5-4e15-81e7-512be7206630.png#averageHue=%23212226&clientId=u0a3ae94a-db40-4&from=paste&height=449&id=u40061535&originHeight=561&originWidth=839&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=55744&status=done&style=none&taskId=u8f49f861-ff2e-436d-8668-aa4fba26d48&title=&width=671.2)\n\n> 注意：我们是启动了2个工程，我们的SpringBoot是9090端口访问，前端vue是5173端口访问，这是2个完全不同的工程，不用混淆了！\n\n\n\n启动vue成功后，访问  [http:\u002F\u002F127.0.0.1:5173\u002Flogin](http:\u002F\u002F127.0.0.1:5173\u002Flogin)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220675198-04fef6c5-4a28-4f0b-88e2-ef0672dcd915.png#averageHue=%2393b9e5&clientId=u0a3ae94a-db40-4&from=paste&height=821&id=u87446e76&originHeight=1026&originWidth=1917&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=84480&status=done&style=none&taskId=uaa8019f6-da4a-4d9d-88d7-7584137e269&title=&width=1533.6)\n当你看到这个页面之后，那说明你的前端启动完成了\n\n## 什么是接口？什么是页面？\n\n接口是后端提供数据的http请求，前端通过axios这样的工具就是向后端的接口请求数据，然后渲染到页面\n什么是页面？就是vue工程启动成功之后在浏览器里面访问的这个页面就是vue的页面，页面是展示用的\n\n## 登录\n\n在前端输入账号和密码点击登录，如果进入到后台的主页，说明脚手架配置成功\n输入admin \u002Fadmin 就可以进入到后台管理系统\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1722220940071-3a4eb36c-cdc7-4631-b6d0-47655f246caf.png#averageHue=%23c1d6ee&clientId=u0a3ae94a-db40-4&from=paste&height=704&id=ub8aef3db&originHeight=880&originWidth=1920&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=40451&status=done&style=none&taskId=ud9cc56a9-e81a-4b2e-8b9f-e74c86f990d&title=&width=1536)\n\n## 脚手架的内容\n\nSpringboot工程目录\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719974084791-26a60fb2-b125-402d-804e-6ac4621d1266.png#averageHue=%232d3136&clientId=uc7a64af1-e4ae-4&from=paste&height=668&id=YlT7S&originHeight=835&originWidth=471&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=77827&status=done&style=none&taskId=uebd8e0ed-4456-4249-94f0-e2ab34081f3&title=&width=376.8)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719974153959-c20fba35-46da-4aff-9758-76b3a6770608.png#averageHue=%232c2f33&clientId=uc7a64af1-e4ae-4&from=paste&height=117&id=M0SKe&originHeight=146&originWidth=380&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=14338&status=done&style=none&taskId=ub54a0374-6321-49f1-8073-90045c7ed8c&title=&width=304)\n前端vue工程目录\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719974245721-5fcaa94d-be73-4ad1-89e5-cc97bf1aa5b3.png#averageHue=%232d3035&clientId=uc7a64af1-e4ae-4&from=paste&height=625&id=phn6k&originHeight=781&originWidth=417&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=52818&status=done&style=none&taskId=ufed4ff54-6556-4bde-b539-d188ef1c195&title=&width=333.6)\n\n数据交互的配置文件\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719974265697-f1f4ba1c-23a4-48de-9a81-70df068fedde.png#averageHue=%2337393e&clientId=uc7a64af1-e4ae-4&from=paste&height=58&id=cuLj4&originHeight=72&originWidth=260&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=2516&status=done&style=none&taskId=uad059e6e-a78d-4b8d-8a72-df811bfba34&title=&width=208)\n\n## 功能点\n\n### 后端\n\n登录、注册接口、修改密码的接口\n管理员增删改查接口\n\n### 前端\n\n集成了登录页面Login.vue、注册页面Register.vue\n后台的框架页面 Manager.vue\n后台主页 Home.vue\n个人中心页面 Person.vue\n修改密码页面 Password.vue\n","coding",1,3530,639,"2024-07-29 10:54:55","2026-05-03 22:49:02","SpringBoot3+Vue3的电影评论系统","movie-review",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,28,35,42,49,56,63,70,77,84,91,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":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":29,"uuid":30,"project_id":6,"title":31,"type":9,"status":10,"public_enabled":10,"views":32,"sort":33,"created_at":34,"updated_at":14,"project_title":15,"project_slug":16},294,"06Pduwwf","03. 开发系统公告功能（1）",2477,640,"2024-07-29 12:10:44",{"id":36,"uuid":37,"project_id":6,"title":38,"type":9,"status":10,"public_enabled":10,"views":39,"sort":40,"created_at":41,"updated_at":14,"project_title":15,"project_slug":16},295,"Fdq2YYG6","04. 开发系统公告功能（2）",1703,647,"2024-07-30 11:50:26",{"id":43,"uuid":44,"project_id":6,"title":45,"type":9,"status":10,"public_enabled":10,"views":46,"sort":47,"created_at":48,"updated_at":14,"project_title":15,"project_slug":16},296,"GCaoVbnp","05. 开发系统公告功能（3）",1380,648,"2024-07-30 11:51:01",{"id":50,"uuid":51,"project_id":6,"title":52,"type":9,"status":10,"public_enabled":10,"views":53,"sort":54,"created_at":55,"updated_at":14,"project_title":15,"project_slug":16},297,"RSJvf6Eg","06. 开发系统公告功能（4）",1361,649,"2024-07-30 11:52:11",{"id":57,"uuid":58,"project_id":6,"title":59,"type":9,"status":10,"public_enabled":10,"views":60,"sort":61,"created_at":62,"updated_at":14,"project_title":15,"project_slug":16},298,"joADRMpg","07. 开发首页展示公告功能（时间线）",1332,650,"2024-07-30 11:52:49",{"id":64,"uuid":65,"project_id":6,"title":66,"type":9,"status":10,"public_enabled":10,"views":67,"sort":68,"created_at":69,"updated_at":14,"project_title":15,"project_slug":16},419,"Qus99gUh","08. 开发电影分类管理功能",1607,800,"2024-09-03 10:35:12",{"id":71,"uuid":72,"project_id":6,"title":73,"type":9,"status":10,"public_enabled":10,"views":74,"sort":75,"created_at":76,"updated_at":14,"project_title":15,"project_slug":16},420,"vkbZ8lMM","09. 开发电影信息管理",1761,801,"2024-09-03 10:35:48",{"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},421,"ZwFHi9Ao","10. 开发电影评论管理功能",1514,802,"2024-09-03 11:39:45",{"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},422,"DmVqZCwN","11. 开发用户管理功能",1171,806,"2024-09-04 11:01:37",{"id":92,"uuid":93,"project_id":6,"title":94,"type":9,"status":10,"public_enabled":10,"views":95,"sort":96,"created_at":97,"updated_at":14,"project_title":15,"project_slug":16},423,"rrMIV8oS","12. 开发用户视角的电影列表",1331,807,"2024-09-04 11:02:08",{"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"]