- 此项目有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、包裹查询逻辑未写。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent