基于Express与React制作的pwa小电商

项目介绍

• 此项目有2部分组成，前端仓库地址为 https://github.com/yehuozhili/shop100frontend ，后端仓库地址为 https://github.com/yehuozhili/shop100backend 。
• 前后端都由我一个人完成，无设计稿，图片自己网上找的，使用rem适配，css写的有点乱，后端测试部分未写完。
• 写这个主要也是自己学习用，因为我自己在里面也手写了很多功能，下面项目特色会展示出来。
• 项目最后部署我是使用https发挥pwa威力，不然在http下pwa没有多少意义。部署后感觉第一次访问网站有点墨迹，跟一开始本地跑速度差的有点多，还有很大优化空间。不过后续访问会有serviceworker执行缓存就会快很多了。
• 这里还要感谢下教我技术的老师，特别是张仁阳老师和姜文老师，我的react和张仁阳老师学的，基础部分和姜文老师学的，本来我连个手写promise都搞不懂到底怎么回事，以为自己可能不适合搞这个，后来一次公开课听了姜文老师那节promise给我很大的信心。

项目特色

• 手写的虚拟化列表组件，在历史记录和首页处使用了这组件

• 登录注册，地址功能，功能，购物车小动画，加载页面动画等，为了方便改造，注册完可以直接登录。

• 搜索带自动补全功能，虽然我感觉我这实现没写好。

• pwa安装应用

• pwa离线缓存

• 手写分片上传，后来没有采用，但是前后端代码都保留着。

• 自定义hook解决安卓机键盘遮挡

线上体验地址

https://www.yehuozhili.xyz:5677/#/

项目使用

• 下载前后端项目后进行npm install安装，命令在package.json里都有。
• 后端需要建立.env文件，照着.env.example配置一些信息。
• 前端src下有个env.tsx文件，写了后端地址。
• 另外如果不使用https,html上的一个http转https的meta标签可以去了，serviceworker也可以不用。将其剥离出去就行。
• 我部署项目使用的是docker,后端项目基于pm2镜像制作，前端项目基于nginx制作。https是申请的免费证书。自签名证书浏览器不认的。

项目结构

• 前端主要使用react,redux,thunk完成主要逻辑，pwa部分靠workbox。
• 目录结构：

|─api     ------- 后端请求 ├─assets  ------- 资源文件 │  ├─images  │  └─style  ----- 公用样式 ├─components ---- 公用组件 │  ├─CityPicker │  ├─hooks   ---- 自定义钩子 │  ├─Loader │  ├─Nav │  ├─Search │  ├─Tabs │  ├─Upload │  └─Virtualize ├─routes      ---- 路由组件 │  ├─Cart  │  ├─Home │  │  └─components │  │      ├─HomeHeader │  │      ├─HomeProduct │  │      └─HomeSlider │  ├─Login │  ├─ProductDetail │  ├─Profile │  │  └─component │  │      └─ProfileCollection │  ├─ProfileCollection │  ├─ProfileEdit │  ├─ProfileForget │  ├─ProfileHistory │  ├─ProfilePackage │  ├─ProfileReceive │  ├─ProfileReceiveAdd │  ├─Register │  ├─Search │  └─Settle │      └─components │          └─AddressSelect ├─store  │  ├─actions  ----派发action │  └─reducers ----reducer逻辑 ├─typings   ------ 声明文件 └─utils      -----公用函数 

• 后端主要使用express完成。
• 目录结构：

├─controllers  ---控制器 ├─exceptions  --- 错误处理 ├─middlewares ----中间件 ├─models      ----模型 ├─public       ---静态资源 │  ├─detail │  ├─images │  │  └─uploads --上传目录 │  ├─products │  └─sliders └─utils        --- 通用逻辑 

需要改造点

• 1、登录注册部分未验证邮箱。
• 2、首页图片太大太多以及逻辑太多，需要精简，加快首页渲染时间。
• 3、支付后面逻辑未写。
• 4、包裹查询逻辑未写。