如何白嫖一个属于自己的产品分类页

107 阅读2分钟

起初身为程序员,想做一个下面的功能分类页面,只能说是见怪不怪了吧。

image.png

但是今天是一个朋友找的我,问我可否帮他搞一个,然后我也在 沸点 征求了下网友的意见。怎么做合适,怎么才能让我这个不懂技术的朋友可以快速上手而且还省钱!!(真™好朋友🆒了~)

项目构思

首先想到的就是github Page这个白嫖神器,直接解决了部署域名等麻烦问题。

朋友的初衷也很简单,本身是搞了一个租聘服装的店,每次客户进店都要选衣服,总是挑来挑去搞得乱糟糟的。

  • 分类目录:自动识别public/分类文件下创建的文件目录作为侧边的分类名称
  • 图片存储:为了简化项目,图片就直接寄托在了public/静态文件下;
  • 喜欢收藏:直接通过本地存储在localStorage中;

确定好以上构思,实际开发起来就简单很多了。

Classify一个简单的分类

⚠注意:目前项目是寄托在 github page 上,打开速度可能有待提高。 上传图片时建议尽量保持比例 1:1 的正方形图片; 图片不要太大,可在 tinypng.com/ 压缩下,否则加载会很吃力

这是一个开源的无需服务器,用于分类物品的项目。你可以用它来管理你的衣服(衣柜),商品(橱窗),饭菜(菜单)等,凡是一切可以分类得,你都可以拿来使用。

在线预览

github项目地址

分类的展示

可通过维护 public/分类 文件,用户自定义自己的左侧分类栏目。

  • 1-帽子:其中1-部分为排序,不会在分类栏目中展示,可以设置你想要靠前得分类;

2cbd0777abdfa748d2b173abf8d3d5e.png

  • 1-鸭舌帽(白).jpg:内部图片同理,1-可以选择作为排序,也可以作为编号,会展示在内容的左上角;
  • 假如你不想展示具体名称,你可以直接定义3-.jpg即可不展示,但是其中得编号是必要得;(文件名总要有个东西在吧🙄)

可拓展

后期可能会考虑增加金额和优化喜欢栏目吧。但后续优化都应该不会打破用户主导的本地操作的初衷,无需搭建服务器,通过文件夹维护的理念。

maybe文件名会变成这样?1-鸭舌帽(白)¥15.00元.jpg

所以后面大家有需要可以拿来用,后期如果有什么优化建议也欢迎在issues提出建议,提了也不一定改😄。关键是集思广益,好的建议我会不自觉的采纳的!