大家今天跟大家聊聊我这几天折腾的“三佳购物网站”项目,算是个小小的个人实践,从无到有,磕磕绊绊,但也确实学到不少东西。
起因:
一开始也没想着要做这么个东西。就是前几天,家里老人喜欢看三佳购物频道,老念叨着上面卖的啥啥啥但是,又不会网购,只能打电话。我就寻思,能不能自己搞一个简单的网站,把上面卖的东西搬过来,方便老人家自己看,自己选。
准备工作:
说干就干!我得摸清楚三佳购物到底卖些花了两天时间,守着电视,把他们频道里主要卖的商品都记了下来,什么拖把,茶叶,锅碗瓢盆之类的,还真是挺全的。然后就是找素材,商品图片,描述,能找到的尽量都找来。
技术选型:
- 前端:HTML + CSS + JavaScript。纯静态页面,简单粗暴,适合我这种半吊子水平。
- 后端:暂时没有。因为只是个展示页面,没涉及到用户注册、登录、支付那些复杂的逻辑,所以就没必要搞那么复杂了。
开始动手:
先搭了个HTML框架,把页面结构弄出来,包括导航栏、商品列表、底部信息等等。然后就开始往里面填充内容,商品图片一张张放,商品描述一句句敲。这部分工作量还是挺大的,眼睛都看花了。
CSS样式也费了不少劲。想要模仿三佳购物的风格,但是又不想完全一样,就自己改了一些颜色和布局。
JavaScript主要用来实现一些简单的交互效果,比如点击商品图片可以放大显示,搜索框可以进行简单的商品搜索等等。
遇到的坑:
- 图片素材不好找。很多商品图片都比较模糊,要么就是有水印,费了好大劲才找到一些能用的。
- CSS样式调整。不同浏览器的兼容性问题,调来调去,总是有一些地方显示不太正常。
- 商品描述信息不全。有些商品只有简单的几句话描述,没办法,只能自己编一些。
最终效果:
虽然只是个简单的静态页面,但是基本实现了我想要的功能。商品分类展示,商品图片放大,简单的搜索功能,老人家用起来应该没啥问题。
这回实践,让我对前端开发有了更深的理解。虽然只是简单的HTML、CSS、JavaScript,但是要做出一个像样的页面,还是需要花不少心思的。也体会到了前端开发的各种坑,比如兼容性问题,素材难找等等。
后续计划:
如果以后有时间,可以考虑加上后端,实现用户注册登录、购物车、订单管理等功能,做一个真正的电商网站。这只是想想而已,毕竟工作也挺忙的,哈哈。
这回“三佳购物网站”的实践,虽然简单,但确实很有意义。不仅方便了家里老人,也让我自己学到了不少东西。以后有机会,还会继续尝试其他的项目,不断提升自己的技术水平。