[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-JH1OiMOc":3,"public-project-articles-JH1OiMOc":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},280,"JH1OiMOc",45,"02. 导入并运行脚手架","## 什么是脚手架，脚手架的优势\n\n快速生成一个基本的项目，这个项目没有跟项目相关的任何内容，纯粹是一个开发的基本模板，通过一个基础的成型的简单的项目模板我们来快速开发项目，这样的话效率会比较高，**省去了一些无用的流程，更多的去关注项目本身功能的开发！**\n我们的目的是：**快速**开发完成项目\n脚手架约束一些**版本号**，这样就不会因为版本问题出错\n最终大大降低了大家的学习成本，可以在短期内快速实习自己的功能开发。\n\n## 解压脚手架\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719972580281-144b143a-efd8-4894-b218-db92e85d2a94.png#averageHue=%23fbf8f7&clientId=uc7a64af1-e4ae-4&from=paste&height=197&id=u52533072&originHeight=246&originWidth=930&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=22173&status=done&style=none&taskId=u0aaae0b9-280b-48ca-94af-4aae961dc63&title=&width=744)\n记住：这个**system**文件夹是项目的根文件夹，用idea打开这个文件夹运行项目\n改名为  farm _system，后续我们用idea打开这个** farm _system** 文件夹就可以运行项目了\n\n## IDEA导入项目\n\n复制这个路径\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719972711510-3bd159ce-6037-430a-9a7a-083debc18d05.png#averageHue=%23fef8f7&clientId=uc7a64af1-e4ae-4&from=paste&height=185&id=ud5510f34&originHeight=231&originWidth=1011&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=19127&status=done&style=none&taskId=u7c976f23-06cf-42cd-970e-374712dcfae&title=&width=808.8)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719972735640-43654608-6cad-43b9-86df-27e2dd61e3f7.png#averageHue=%232e3237&clientId=uc7a64af1-e4ae-4&from=paste&height=435&id=ue667908b&originHeight=544&originWidth=470&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=33039&status=done&style=none&taskId=ud02c66ea-b9ab-4b4a-a930-862f765f90b&title=&width=376)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719972749822-2c05b807-ce2c-4a94-8ccb-93ce5de083ae.png#averageHue=%232c3036&clientId=uc7a64af1-e4ae-4&from=paste&height=296&id=ub65fad3e&originHeight=370&originWidth=700&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=27991&status=done&style=none&taskId=u7f46aab4-c128-4fcc-9a2c-529eb6caeb4&title=&width=560)\n\n## 启动Springboot工程\n\n通过 maven导入Springboot项目依赖\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719972838359-15a468ee-8b10-41a4-a5e3-1619f8b1c69b.png#averageHue=%23242629&clientId=uc7a64af1-e4ae-4&from=paste&height=643&id=u6625ccf4&originHeight=804&originWidth=1479&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=98939&status=done&style=none&taskId=ufb3f3826-35ec-4b09-9505-9988418c9ed&title=&width=1183.2)\n启动Springboot工程\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719972971921-37a29ab4-9848-49da-8ba8-7592a32ded58.png#averageHue=%2325272a&clientId=uc7a64af1-e4ae-4&from=paste&height=367&id=u2b0040a5&originHeight=459&originWidth=1900&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=93280&status=done&style=none&taskId=u7c678d43-3031-4de7-8e28-7580b23da9a&title=&width=1520)\n启动成功\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719972942984-3d3e66f1-aa82-417b-97a3-8127f9f6b794.png#averageHue=%23212428&clientId=uc7a64af1-e4ae-4&from=paste&height=473&id=u8c364965&originHeight=591&originWidth=1819&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=123998&status=done&style=none&taskId=u667e55be-c7d4-4ee9-9a33-57a3ef8fc39&title=&width=1455.2)\n访问 localhost:9090 验证后端是否启动成功\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719973053232-4f152a49-0a58-4a1a-ab63-af7b05d694e4.png#averageHue=%23fafafa&clientId=uc7a64af1-e4ae-4&from=paste&height=253&id=u539e8675&originHeight=316&originWidth=516&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=16845&status=done&style=none&taskId=u9735b67b-f223-4b90-a65e-190500c711f&title=&width=412.8)\n\n## 启动Vue工程\n\n进入vue工程目录\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719973133469-7e8c44ec-a330-4b3a-a1ed-1525380d91fe.png#averageHue=%23202328&clientId=uc7a64af1-e4ae-4&from=paste&height=145&id=uce9bec55&originHeight=181&originWidth=1091&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=44816&status=done&style=none&taskId=u43a4df40-4f02-40d0-a0f7-ad46d36b160&title=&width=872.8)\n配置npm的淘宝镜像\nnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\u002F\n\n我们是实战项目教学，不是零基础教学，你们要先去学一下** Java基础、JavaWeb，前端的基础：html、css、js**\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\u002F1719973567226-5ea4c457-5344-4199-8624-0fe59ef2d0ee.png#averageHue=%238bb1e2&clientId=uc7a64af1-e4ae-4&from=paste&height=704&id=u2f9c96c1&originHeight=880&originWidth=1920&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=55007&status=done&style=none&taskId=u30d375f1-17ea-4d46-8517-daa0623f53d&title=&width=1536)\n\n## 导入数据库\n\n创建数据库  farm_system\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719973668708-8c78680d-a355-4913-a817-8019e789ac19.png#averageHue=%23f7f7f6&clientId=uc7a64af1-e4ae-4&from=paste&height=391&id=u89a62a13&originHeight=489&originWidth=550&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=14125&status=done&style=none&taskId=u0bf21219-007c-4f2f-8930-c7ff6fe2b24&title=&width=440)\n导入成功后会出现  admin 的数据库表\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719973730904-d5c35116-347d-45e6-a4d0-ba98b6e3b147.png#averageHue=%23f1f0ee&clientId=uc7a64af1-e4ae-4&from=paste&height=177&id=u4b1e182c&originHeight=221&originWidth=315&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=11790&status=done&style=none&taskId=uc78aa265-a4b7-423b-8332-4b419eb3475&title=&width=252)\n在SpringBoot工程的 application.yml 文件里配置数据库\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719973862743-f1cef4ae-e628-4c6c-8a19-74c00b0fb2a7.png#averageHue=%23232529&clientId=uc7a64af1-e4ae-4&from=paste&height=581&id=u229cc64a&originHeight=726&originWidth=1474&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=135151&status=done&style=none&taskId=u4d54f11e-354c-408d-b784-ff19c561fa4&title=&width=1179.2)\n\n## 登录\n\n在前端输入账号和密码点击登录，如果进入到后台的主页，说明脚手架配置成功\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1719973817126-b343382f-3f15-484a-849c-0a6ff2715d94.png#averageHue=%23bfd4ec&clientId=uc7a64af1-e4ae-4&from=paste&height=704&id=uf7451a94&originHeight=880&originWidth=1920&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=41373&status=done&style=none&taskId=u52c49899-f196-431b-8cbc-429f7905bcd&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=ua7409294&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=u55c57e66&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=u95d36c51&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=Ij8wb&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,7028,589,"2024-07-29 10:55:27","2026-05-03 22:49:02","SpringBoot3+Vue3的农产品销售系统","agricultural-products-sales",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,28,35,42,49,56,63,70,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":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},281,"ieYnhvrN","03. 开发系统公告管理功能",4802,597,"2024-07-03 12:27:42",{"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},282,"NdR2GruB","04. 开发首页公告展示功能",3398,606,"2024-07-05 11:59:23",{"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},283,"XIsedcdn","05. 开发农产品分类管理",2711,607,"2024-07-05 11:59:43",{"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},284,"JSqpofT8","06. 开发农产品管理功能",3102,608,"2024-07-05 12:00:05",{"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},285,"L4Z6x2gY","07. 开发农产品进货管理",2047,609,"2024-07-05 12:00:21",{"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},286,"uO2NaUtZ","08. 开发普通用户管理模块",1719,610,"2024-07-05 12:00:36",{"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},287,"C4o6D1oJ","09. 开发普通用户登录、注册、个人资料、修改密码功能",2298,612,"2024-07-05 17:06:18",{"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"]