Slog97_使用React框架进行前端开发9

• ArthurSlog

• SLog-97

• Year·1

• Guangzhou·China

• October 16th 2018

• 个人网站：http://www.arthurslog.com

• CSDN：https://blog.csdn.net/u010997452/article/list/1

• GitHub：https://github.com/BlessedChild/ArthurSlog

• NPM：https://www.npmjs.com/~arthurslog

• 掘金：https://juejin.im/user/59f2a424f265da432f305c66/posts

• 简书：https://www.jianshu.com/u/b9ebe10f0534

• segmentfault：https://segmentfault.com/u/arthurslog/articles

任何不以降低成本为目的的雇佣关系 都是在耍流氓

---

开发环境MacOS(Mojave 10.14 (18A391))

信息源

• 参考各大线上运营的商城

开始编码

• 本次完成了四个基础页面的编码，分别是‘个人中心’、‘购物车’、‘全部商品’ 和 ‘个人中心’

• 其中 除了‘购物车’ 页面 其他三个基础页面都是带有底部导航的

• 而 ‘购物车’ 的底部导航栏更新为支付导航栏

• ‘购物车’ 页面 在左下角新增了一个 ‘返回主页’ 的标签

• 目前 各个页面提供的的业务功能如下：

‘商城主页’

顶部商品搜索栏
首页商品图片轮播栏
公告栏
活动导航栏
商品推荐栏
商品类目导航栏
商品分类展示

‘购物车’

商品选中、展示栏（商品图片、商品介绍、商品价格、购入数量）
商品全选按钮
商品总价显示栏
结算按钮
返回主页按钮

‘全部商品’

商品展示栏（商品图片、商品介绍、商品价格）
加入购物车按钮

‘个人中心’

余额、积分、卡、券
我的订单、待付款、待接单、待发货、已发货、已完成
性别、生日、收获地址
手机号、微信绑定
店铺主页、推广中心、关注我们、店铺信息

• 以上完成了基础页面的业务功能

• 相关代码已经更新至Github

• 可以直接到Github上看一看源码 顺便点个star 支持一下谢谢（笑）

• 文件结构的处理是一个需要权衡的关键点 鉴于时间有限 目前先暂时不做大的调整

• 下面 上几张当前mobile端的产品界面：

• 工程文件已经上传至Github：https://github.com/BlessedChild/ArthurSlogStore

• 至此，实现了四个基础界面 ‘商城主页’、‘购物车’、‘全部商品’、‘个人中心’ 的前端编码。

---

• 欢迎关注我的微信公众号 ArthurSlog

• 如果你喜欢我的文章 欢迎点赞 留言

• 谢谢