[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-JSqpofT8":3,"public-project-articles-JSqpofT8":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},284,"JSqpofT8",45,"06. 开发农产品管理功能","效果图，难度**3颗星**![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146959407-434e67e4-c011-4484-9201-3269bbe6b0ec.png#averageHue=%237d887a&clientId=uf3786532-6a0e-4&from=paste&height=704&id=ub40ebd4e&originHeight=880&originWidth=1920&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=106109&status=done&style=none&taskId=u72f7bb52-8cb0-4f9c-952b-1b122f95549&title=&width=1536)\n\n## 农产品信息数据库表\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720144617263-55cb3297-84f8-4b34-90ec-717ef703d301.png#averageHue=%23fcfbfa&clientId=uf3786532-6a0e-4&from=paste&height=227&id=u9aa1c697&originHeight=284&originWidth=851&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=42602&status=done&style=none&taskId=ue16f23ec-f8dc-48fa-b75b-43be7af0160&title=&width=680.8)\n\n注意sql的写法，如果报错了，记得仔细对照下我的sql![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720145589647-4232b7f8-405f-4175-a107-a59070c92711.png#averageHue=%23252f33&clientId=uf3786532-6a0e-4&from=paste&height=446&id=u02832b2c&originHeight=557&originWidth=1316&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=80279&status=done&style=none&taskId=u23665263-68a7-4286-8e80-fc803f10791&title=&width=1052.8)\n文件上传的接口地址\n\n```\n\u002F\u002F 文件上传的接口地址\nconst uploadUrl = import.meta.env.VITE_BASE_URL + '\u002Ffiles\u002Fupload'\n```\n\n## 图片上传怎么做的\n\n先写上表单的组件\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146859610-06633275-c33b-47c7-b87c-c33db8c5c053.png#averageHue=%231e2023&clientId=uf3786532-6a0e-4&from=paste&height=131&id=u62a4ecf5&originHeight=164&originWidth=1059&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=29172&status=done&style=none&taskId=u996654f2-7a6b-40af-8c91-17e73e76694&title=&width=847.2)\n设置回调钩子\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146885384-8f0a91aa-fff8-4977-920f-fff3f1affbb2.png#averageHue=%231f2125&clientId=uf3786532-6a0e-4&from=paste&height=118&id=uc583b443&originHeight=147&originWidth=965&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=28392&status=done&style=none&taskId=ud902cb5f-2411-4891-9cf6-67300733318&title=&width=772)\n后端设置文件上传和下载接口，才可以正常使用\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146904472-b56d1e33-adc3-461b-9948-7d3344f0f6b4.png#averageHue=%231f2124&clientId=uf3786532-6a0e-4&from=paste&height=508&id=u9cc11263&originHeight=635&originWidth=1185&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=93944&status=done&style=none&taskId=u8b299bf6-5f80-4aca-8c83-d713859a169&title=&width=948)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146916995-95e27f49-fdbd-4df1-b536-e7a9f3aaba44.png#averageHue=%231f2024&clientId=uf3786532-6a0e-4&from=paste&height=535&id=kXTdv&originHeight=669&originWidth=1419&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=108317&status=done&style=none&taskId=ufb2629b9-82b1-4fbc-8dd2-629df5c1e34&title=&width=1135.2)\n\n## 表格图片预览\n\n```vue\n\u003Cel-table-column label=\"图片\" prop=\"img\">\n\u003Ctemplate #default=\"scope\">\n  \u003Cel-image style=\"width: 50px; height: 50px; border-radius: 5px\" :src=\"scope.row.img\"\n  :preview-src-list=\"[scope.row.img]\">\u003C\u002Fel-image>\n\u003C\u002Ftemplate>\n\u003C\u002Fel-table-column>\n```\n\n图片预览出现bug\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146363549-dd98e214-8a57-496a-85ec-ff8bcd29ca00.png#averageHue=%23535c30&clientId=uf3786532-6a0e-4&from=paste&height=584&id=ud33268fc&originHeight=730&originWidth=1694&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=350538&status=done&style=none&taskId=ua4eb7920-fde3-4c42-866a-ff6b94c9b23&title=&width=1355.2)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146492197-d3ea65c7-e38a-4c21-80a6-73500d060f91.png#averageHue=%23fefefe&clientId=uf3786532-6a0e-4&from=paste&height=89&id=udaef1dd4&originHeight=111&originWidth=1222&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=16759&status=done&style=none&taskId=u0518529e-8362-415c-a1d7-8f2e938d3ef&title=&width=977.6)\n\n分类的下拉框怎么做的\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146709769-d35d42ae-ae1d-479c-ad58-1d31f0a90d07.png#averageHue=%23fdfdfd&clientId=uf3786532-6a0e-4&from=paste&height=267&id=uc77ee7a6&originHeight=334&originWidth=766&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=13400&status=done&style=none&taskId=u817a92ea-82f8-4158-8d39-aab11d261ea&title=&width=612.8)\n写个表单\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146726581-c758a48b-4dce-4c7b-abda-b2899685dbad.png#averageHue=%231f2024&clientId=uf3786532-6a0e-4&from=paste&height=240&id=uc8f6c9bf&originHeight=300&originWidth=1119&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=44202&status=done&style=none&taskId=u28604af0-758b-499d-a92c-ad424a8403d&title=&width=895.2)\n定义分类的数组\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146744149-be3b1f4a-5b70-4f7a-bf3e-be14d1f02117.png#averageHue=%231f2024&clientId=uf3786532-6a0e-4&from=paste&height=277&id=u1920e6d0&originHeight=346&originWidth=697&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=26528&status=done&style=none&taskId=u9eeb6884-de17-4569-a92c-feaf4b14c2a&title=&width=557.6)\n获取分类数据\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2024\u002Fpng\u002F751015\u002F1720146753819-d84683ad-9bf5-48fc-bc0d-882aa3746bbc.png#averageHue=%23202126&clientId=uf3786532-6a0e-4&from=paste&height=135&id=u160f350a&originHeight=169&originWidth=680&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=20259&status=done&style=none&taskId=u8f7d3e5c-780c-469e-8b97-c21bf98b567&title=&width=544)","coding",1,3102,608,"2024-07-05 12:00:05","2026-05-03 22:49:02","SpringBoot3+Vue3的农产品销售系统","agricultural-products-sales",{"project":18,"items":19},{"id":6,"title":15,"slug":16},[20,27,34,41,48,55,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":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},280,"JH1OiMOc","02. 导入并运行脚手架",7028,589,"2024-07-29 10:55:27",{"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},281,"ieYnhvrN","03. 开发系统公告管理功能",4802,597,"2024-07-03 12:27:42",{"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},282,"NdR2GruB","04. 开发首页公告展示功能",3398,606,"2024-07-05 11:59:23",{"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},283,"XIsedcdn","05. 开发农产品分类管理",2711,607,"2024-07-05 11:59:43",{"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":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"]