项目一:淘淘外卖(Vue)
项目描述:
淘淘外卖是一个线上美食购物平台,具备地址搜索、下单、外卖派送等服务功能。
个人职责:
负责完成登录模块、地址管理、外卖派送信息模块、商品列表、商品详情页、购物
车、下单等功能模块的开发。
主要技术:
1、使用 vue 框架,通过 vue-cli 快速搭建项目结构,获取接口数据完成项目页面的布局和数据渲染。
2、使用 vue-router 构建单页面应用,配置路由,实现页面间的跳转。
3、使用 Vant 组件库和 flex 布局进行整体的页面结构搭建。
4、对网络请求进行封装,动态加载数据并且渲染页面,以及前端使用代理解决跨域问题。对请求进行拦截实现对 token 的判断。
5、通过组件传值、路由传参等方法传值完成对用户下单信息的整合,在点击提交时向后台发送请求。
6、在 Vuex 中把以下单店铺 id 为键和以商品 id 为值的形式存储进入数组内,并且每次在向数组中添加时先循环判断数组内是否存在此店铺 id,如果存在则直接放入对应商铺id 位置内,不存在则在数组内添加新的键值对。通过这样实现不同商家展现不同内容的购物车详情。
7、通过对接口返回的 sku 相关数据进行处理,方便进行多层循环,当用户点击时根据点击的值判断及展示对应的规格和价格
项目二:悦享头条(Vue)
项目描述:
悦享头条是一款面向移动端用户开发的综合资讯客户端,用户可以进行在线阅读实时新闻,在线评论回复,大大提升用户的互动性和扩展性阅读。
个人职责:
负责首页、登录界面、文章列表、文章详情页、搜索界面、评论等功能。
主要技术:
1、vue-cli 脚手架进行项目的快速搭建,结合 vue-router 通过配置路由实现页面间的跳转。
2、使用Vant组件库搭建项目页面(列表的上拉加载、下拉刷新)
3、封装 api 接口,方便复用和后期维护,axios 请求拦截器统一配置 token。
4、利用 axios 和后台的数据交互,实现页面的动态渲染。
5、使用localStorage+Vuex进行数据的存储和传递。
6、 用导航守卫和响应拦截器判断当前是否携带 token。利用 websocket 实现问答部分小智同学和用户的互动等。
7、使用节流和防抖的思想优化性能
项目三:多商户商城(React)
项目描述:
多商户商城是一个多种类商品的线上购物平台,通过选择喜欢的产品下单,商家根据用户的订单进行发货。
个人职责:
负责用户登录、商品列表、搜索、商品分类、筛选、商家注册、商家店铺界面、购物车、收货地址、下单、用户个人信息等功能的实现。
主要技术:
1、构建 API 接口测试用例,和 UI 设计师沟通确定页面布局与交互效果,负责
与后台进行对接完成 API 接口文档前后台数据交互。
2、通过对 Prommise 进行封装,进行一次或者多次网络请求,使用 render 数渲染到页面中。
3、利用 hooks 将组件中相互关联的部分拆分成更小的函数组件进行开发。
4、利用 react-router-dom 构建单页面应用,配置路由,实现页面间的跳转,同时使
用 react-transition-group 制作各种页面切换效果。
5、使用 redux 处理应用的共享状态,实现组件间状态通信。
项目四:宜美家居(微信小程序)
项目描述:
宜美家居是一个线上家居购物平台,用户根据自己的需求进行选购商品,商家进行发货给用户。
个人职责:
负责首页推荐频道、分类筛选、搜索商品、商品详情、购物车、下单、用户个人中心、优惠券模块页面展示和对订单数据的添加,更改,删除等。
主要技术:
1、使用Swiper插件实现轮播图以及通过弹性布局来实现页面效果。
2、通过向后端请求数据获取数据,点击商品获取商品详情信息及页面展示。完成前后台数据交互、数据可视化效果实现。
3、购物车功能的实现,对商品添加、移除功能的封装。
4、使用wx.setStorage实现数据存储,通过wx.getStorage获取数据。
5、采用 VantUI组件库中的微信小程序版和微信小程序内置的组件,来快速搭建页面。
6、采用 rem布局实现不同手机端适配。使用阿里矢量图标库,完成页面图标的展示。配合less进行开发。
项目四:新零帮(React)
项目描述:
新零帮系统是一款集 wms 零售仓储,scm 供应链,erp 进销存,会员管理等功能
的后台管理系统。
个人职责:
负责 erp 中采购计划、采购订单、采购入库、销售订单、销售出库、库存管理等
功能的开发工作;会员管理中会员资料,卡设置,卡类型,卡管理,卡操作,积分规则,积
分兑换,消费券等模块的开发工作;其他模块的功能模块开发工作。
主要技术:
Web 端:
1、此项目为一个前后台分离的后台管理系统
2、前端: 使用 react + qiankun + umi + TS + ES6 + Webpack 等技术
3、使用 Ant Design 等组件框架
4、采用模块化、组件化的模式开发
移动端(app):
1、前端: 使用 reactNative + TS + ES6 + Webpack 等技术
2、采用模块化、组件化的模式开发