13-项目经验
# 找项目渠道
- https://www.axureshop.com/
# 1，维联LIMS实验室管理系统
项目名称：维联LIMS实验室管理系统
项目介绍： 该后台系统集成了实验室的人员管理，器材管理，签到管理，实验室预约，实验室使用情况统计等模块，提供了现代主流企业级专业实验室科学管理LIMS解决方案。
技术选型：@vue/cli + vue2 + vue-router3 + vuex3 + element-ui
工作职责：
- 从零基本webpack5独立构建项目工程化环境
- 管理系统全局功能实现，使用screenfull实现项目的全屏，使用react-intl实现项目的国际化
- 系统的面包屑导航的设计与实现
- 基于redux，实现项目中全局组件的大小设置和颜色主题设置
- 负责基于前端的权限设置，通过全局导航守卫配合用户角色和算法，实现管理控制各级用户的路由访问权限
- 负责器材管理，签到管理、实验室预约、数据统计等模块的开发工作并且利用Hooks通用完成多例通用组件
- 使用axios进行网络请求，并实现了对网络请求部分的完全封装，使用请求拦截器阻止重复请求，使用响应拦截器处理解构成功请求，优化返回格式，处理失败请求，优化全局错误捕获机制。
- 通过Echarts 实现各类统计数据可视化，通过饼图展示实验室使用效率，研发人员出勤率，通过柱状图展示实验室使用率的变化， 并且通过使用自定义theme主题，保证图表风格统一美观。
- 由于实验结果及分析的特殊保密性条件要求，项目采用企业级内网数据库及服务器部署方案，秉持提高客户使用体验的原则，加入localStorage历史数据缓存复加载方案，鉴于按月查询历史实验数据原则上无法改变，因此将查询历史结果计入缓存中，在重复进入页面时无需进行查询。
# 2，社区志愿者管理系统开发
项目名称：社区志愿者管理系统开发
项目介绍：
技术选型：vue-element-admin
工作职责：
- 使用axios进行网络请求，并实现了对网络请求部分的完全封装，使用请求拦截器阻止重复请求，使用响应拦截器处理解构成功请求，优化返回格式，处理失败请求，优化全局错误捕获机制
- 基于vuex，vue-router的前端管理权限设计，不同用户权限不同
- 用户详细信息注册，修改和登录
- 用户前台志愿者的申请，审核，邀请等功能，评论留言评价查询
- 管理后台的活动，公告，轮播图，宣传，志愿者，评论管理
- 过滤关键词设计，基本数据增删改查
- 负责基于前端的权限设置，通过全局导航守卫配合用户角色和算法，实现管理控制各级用户的路由访问权限
# 3，XX商城
项目名称：XX商城
项目介绍：
技术选型：vue-element-admin
工作职责：
- 项目使用vue3，vue-router组合式api和setup语法糖实现，全面拥抱vue3生态圈，摆脱选项式api this对象式语法，拥抱组合开发更轻松
- 使用pinia状态管理简洁易用，提高开发效率，降低心智负担，管理全局状态，购物车全局管理，存储用户信息
- 拥抱hooks语法，抽离逻辑，复用代码，效率更高，抽离分页逻辑
- 使用vantui库提高开发效率，完成页面绘制，增删改查
- 使用axios进行网络请求，并实现了对网络请求部分的完全封装，使用请求拦截器阻止重复请求，使用响应拦截器处理解构成功请求，优化返回格式，处理失败请求，优化全局错误捕获机制，使用vant提示组件提示用户错误信息
- 完成登录，注册，修改用户信息，订单生成，购物车, 订单状态...
# 4，XX商城中后台
项目名称：XX商城中后台
项目介绍：
技术选型：管理系统的技术选型
工作职责：
- 基于vue-element-admin架子实现的后端权限设计
- 通过vuex存储用户信息，用户按键权限表，实现了对用户操作的权限控制
- 权限设计实现：
- 用户登录从服务器获取相应的角色获取相应的路由信息
- 拿到路由信息再生成相对的路由，菜单，按钮
- 相关角色显示相应的菜单只能进行相应操作
- 使用axios进行网络请求，并实现了对网络请求部分的完全封装，使用请求拦截器阻止重复请求，使用响应拦截器处理解构成功请求，优化返回格式，处理失败请求，优化全局错误捕获机制
- 完成商品信息管理，轮播图管理，角色管理，权限管理，会员管理，订单状态管理...
- 使用echarts实现数据可视化
# 5，云选鲜花商城
项目名称：云选鲜花商城
项目介绍：
技术选型：Uniapp
工作职责：
- 配合 UI 及 UE 设计师，商讨确定页面架构、布局及交互细节；
- 约定开发、命名等规则，确定项目结构，划分页面层级结构等；
- 根据需求及原型图开发相关页面
- 负责xxx、xxx、xxx、xxxx模块(对比码路严选)的开发工作；负责xxx、xxxx等公用组件的封装。
- 设计项目内SPU和SKU体系，在商品详情页和购物车页的规格展示与选择均基于此体系
- 公共方法的封装（请求封装、工具方法封装、本地存储、业务逻辑相 关方法封装等）
- 弹层、图片上传、loading、弹框、空页面等公共组件的封装；
- 及时跟进微信政策，进行登录授权改版；采用mixin统一处理会员授权逻辑；封装通用请求方法。
- 使用防抖函数解决用户搜索栏输入匹配时的查询内容显示延迟问题、使用图片懒加载来提高页面渲染性能、使用路由懒加载来提升主页面加载时间
- 用fastclick解决部分设备点击延迟300毫秒的问题，使用better-scroll代提原生滚动解决页面滚动生硬不流畅的问题。
- 参与配置Scss全局样式变量和样式函数及混合，可快速更换站点展示主题风格，完成ellipsis函数编写，可高效配置内容换行隐藏功能
- 负责项目的分包，项目上线与发版
# 6，南京银行手机APP上门服务系统
项目名称：南京银行手机APP上门服务系统
项目介绍：vue+vant 构建的方便行员内部使用的上门业务系统。
技术选型：
- 实现账号登录，判断当前是否登录并根据行员及经理权限展示不同内容。
- 负责部分产品的需求实现，与业务老师共同商讨前端业务流程，与后台开发保持良好沟通，快速理解并落实各方需求。
- 使用 三方人脸等sdk实现影像平台交互以及大数据风险处理。
- 在项目中封装vue高性能组件实现页面样式统一、开发迅速敏捷、提升代码专业化规范化。
# 7，XXX后台管理
项目名称：XXX后台管理
项目介绍：react+antd-ui 构建后台管理系统，react-router-dom 实现 SPA 应用的路由跳转。
技术选型：create-react-app + react17 + react-router-dom5 + redux + antd4
工作职责：
- 实现账号登录，以及使用全局路由守卫进行路由拦截，判断当前是否是否登录。
- 负责部分产品的需求实现，与后台开发保持良好沟通，快速理解并落实各方需求。
- 使用 echarts 动态展示官网日，周，月的注册量。
- 在项目中封装react高性能组件，产品数据管理，公司新闻动态，合作公司管理，客户管理，分页的渲染以及增删改查，模糊搜索，排序功能的实现。
- 通过富文本编辑器实现发起话题模态框的展示及输入。
- 使用 redux进行状态管理和数据缓存，localStorage 进行前端持久化存储。
- 使用 egg 框架和 mysql 数据库模拟数据接口，利用 mock 数据实现前后台并行开发。
# 8，XXX PC官网
项目名称：XXX PC官网
项目介绍：维护早期官网首页模块，主题游模块，定制旅游模块，订单管理模块，客户评价模块。项目早期使用 html+jQuery 的方式进行开发，为了提高市场竞争性，公司决定将官网进行重构，当时使用的 react全家桶进行开发。
技术选型：
工作职责：
- 导航栏公共组件的封装。
- swiper 完成轮播图效果及交互逻辑。
- 对项目进行优化，去除了一些不再使用的模块，添加了新的模块和功能, 公司产品与服务 展示更加完备, 用户申请试用更加方便。
- 在项目开发中使用代理解决跨域，利用 axios 完成数据交互，实现页面内容渲染。
- 使用react-loadable、react-lazyload实现路由懒加载，以及图片懒加载优化首页加载速度，增强用户体验。
- 利用 css3 和 animation 完成页面动画过渡效果。
- 解决浏览器的兼容问题，目前兼容 chrome, firfox , safari , 以及 IE9 以上版本。
- 对公司官网进行维护和优化，并参与公司内部管理系统前端的需求到开发。
# 9，光大普惠贷标签管理中台
项目名称：光大普惠贷标签管理中台
项目介绍：该项目为光大银行普惠贷业务的大型数据挖掘中台。将来自不同渠道、形式的行为、消费、借贷数据快速转变为易于分析和使用的多维数据标签，从而实现对业务对象的个体画像和群体画像分析。
技术选型：Vue2.6，vue-router，vuex，axios，Element-ui，Echarts
工作职责：
- 项目基于Vue-cli2开发，使用Element-ui搭配部分自定义功能组件实现大部分功能模块开发，通过对项目进行分析和构思，将页面及路由合理拆分，并抽取可复用组件，力求高内聚低耦合
- 负责基于 froala 的富文本组件相关功能的开发，包括表格复制粘贴行、表格文本样式应用，并对组件进行打包上传公司内网npm库，在其他项目中亦可复用。
- 抽取列表及分页组件的mixin文件，并且分离列表页中数据初始化逻辑，开放自建操作接口生命周期钩子函数，大幅度缩减重复性代码，避免了重复性工作
- 配合产品完成监控系统设计，实现对系统前端代码、资源、接口调用、页面渲染异常的精准捕获，将记录接入到架构巡检系统，降低线上 70%以上的异常风险；
- 负责utils工具类库的抽取工作，例如公用搜索条件库、可复用正则库、Blob流导出、节流防抖等工具方法的抽取，保证项目中所有复用内容保持一致，在多人员开发过程中保持高效及低错误率，遵循前端工程化原则。
- 通过webpack-bundle-analyzer分析项目打包速度与资源体积， 配合CDN抽离Vue、Lodash、Echarts等资源包，配合云端OSS静态资源库，iconfont项目图标UI库，分离静态资源，大幅度缩小项目体积，优化渲染与打包速度。
- 制定eslint编码规范，配置prettier 设置项规范代码风格并进行代码检测，通过git管理代码，并定时对团队成员代码进行Code Review。
# 10，广东省环境应急平台WAP端
项目名称：广东省环境应急平台WAP端
项目介绍：广东省环境应急平台基于《环境应急预案》总要求进行开发，根据企业填报的信息，包括环境风险源，危废，在广东省地图上显示。
技术选型：Vue2.6，vue-router，vuex，axios，vant，vue-baidu-map，vue-esign
工作职责：
- 完成宣传首页、企业认证、企业数据填报页模块开发工作
- 使用vue-esign完成填报时企业负责人签名板功能，代替纸质书面签名，高效提升使用体验和签章效率。
- 使用防抖函数解决用户搜索栏输入匹配时的查询内容显示延迟问题、使用图片懒加载来提高页面渲染性能、使用路由懒加载来提升主页面加载时间
- 使用fastclick解决部分设备点击延迟300毫秒的问题，使用better-scroll代提原生滚动解决页面滚动生硬不流畅的问题。
- 参与配置Scss全局样式变量和样式函数及混合，可快速更换站点展示主题风格，完成ellipsis函数编写，可高效配置内容换行隐藏功能
# 11，西门子&博世家电小程序
项目名称：西门子&博世家电小程序
项目介绍：本小程序包括西门子及博士家电产品的购买与售后安装等配套体系，由家电绑定、使用引导、电器商城、报修服务、个人中心等模块组成。完成用户预览家电，选购商品及确认规格，下单付款，配送追踪直至收货与预约安装、上手使用的全流程的闭环。
技术选型：Uniapp
工作职责：
- 负责xxx、xxx、xxx、xxxx模块的开发工作；负责xxx、xxxx等公用组件的封装。
- 设计项目内SPU和SKU体系，在商品详情页和购物车页的规格展示与选择均基于此体系
- 日常维护神策埋点，封装模块并手写正则加递归统计页面所有埋点，采用intersectionObserver优化埋点时机，合理的埋点系统布控可追踪用户浏览痕迹，根据用户行为喜好进行客制化推荐数据推送，并且发掘项目内优化点
- 负责消息中心迭代开发，独立封装websocket公共方法，配合后端实现了未读信息数动态刷新与消息通知实时弹窗推送推送，解决了消息通知滞后提醒的问题
- 采用事件车，手写缓存池优化频繁请求，使用防抖函数解决搜索栏输入匹配时的查询内容显示闪动问题、使用图片懒加载来提高页面渲染性能
- 及时跟进微信政策，进行登录授权改版；采用mixin统一处理会员授权逻辑；封装通用请求方法。
# 12，橘子严选电商H5移动端项目
项目名称：
项目介绍：橘子严选是一款为客户开发的以电子产品销售为主的H5商城移动端项目。项目使用Vue2+vant进行构建，主要包括商城首页、分类、购物车、个人信息、商品管理、订单管理、地址管理等，接入微信支付宝处理订单业务。根据手机号注册和登录业务。
技术选型：Vue2+vant2
工作职责：
- 用户注册，登录模块（用户注册信息验证，验证码，登录信息）
- 商场首页制作（首页轮播，搜索功能，商品展示）
- 商品详情（收藏加购，商品详细信息）
- 购物车逻辑（购物车数量价格计算，添加修改功能，结算功能）
- 个人管理（上传头像，编辑用户信息）
- 地址/订单管理（查看地址，订单模块）
- 接入高德地图api，获取用户地理位置信息
# 13，常熟市一网通管理平台
项目名称：常熟市一网通管理平台
项目介绍：常熟市一网通管理平台，应用与常熟市大数据局，提供党建信息，审批服务，综合执法，网格服务等，主要通过 Mapbox 地图配合 Echarts 图，将数据可视化展示，方便业务人员查阅全市信息，项目中可以查看全市主要街区监控，危险车辆行位置等，包括全市疫情情况，项目主要提供信息展示，信息查询服务。
技术选型：Vue / Mapbox / axios / lodash / Echarts
工作职责：
- 公共业务组件开发，例如模态框、表格、监控组件等。
- Mapbox 地图配置开发、地图落点、人员轨迹。
- Svg 图片开发，减少项目体积并且提升加载速度。
- 通过 Trtc Web SDK 腾讯云实时音视频通讯解决方案完成音视频通话开发。
- 通过 webpack 构建业务脚手架，优化打包速度。
- 引入 CDN 提升加载速度，并且对 js html css 文件开启 Gzip 压缩，减少项目体积。
- 通过 Git lab 进行代码托管极持续集成部署，减少部署成本。
- 接入钉钉登录、虞政通登录、登陆后无需再次登录，多系统只需登录一次。
# 14，上海恒蚨幕墙管理平台（B端/C端）
项目名称：常熟市一网通管理平台
项目介绍：上海恒蚨幕墙管理平台系统定位于建筑幕墙行业、主要是为了提升幕墙行业下订单效率低, 易出现误下单的问题, 在 B 端中，项目其中包含了项目管理 , 项目用材, 采购单管理, 订单到货管理 , 分包管理等业务。在 C 端中，项目主要包含了设计师下料 , 下订单 , 根据公司现有设计师的需求来设计研发的 ，功能有登录 , 注册 , 手机号登录 , 账号密码修改 , 可视化信息展示 , 用户下单管理等。
技术选型：Vue / Vue-cli / Vue-router / Axios / Element-UI / Ramda / Echarts
工作职责：
- 用户注册 , 用户登录 （用户注册信息验证、登录验证码、注册验证、登录验证）
- 首页可视化信息展示 ( 首页可视化图表信息, 采用 Echarts 技术实现可视化数据展示)
- 用户反馈模块 (用户反馈信息至公司后台 , 使用 Axios 进行数据的动态展示 )
- 采购单管理（采购单详情模块、采购单编辑模块、条件查询、分页）
- 项目管理（项目可视化信息展示、项目查询模块、项目编辑模块 )
- 项目成员管理（成员查询模块、成员查询模块）
- 首页可视化图表 ( 首页可视化图表信息, 采用 Echarts 技术实现可视化数据展示)
- 订单到货管理 ( 订单到货提交模块, 订单到货信息查询模块, 订单局部到货模块)
- 项目预警管理 ( 预警提醒模块 , 预警模板添加模块, 预警提示模块)
# 15，上海恒蚨幕墙（门户）
项目名称：上海恒蚨幕墙（门户）
项目介绍：上海恒蚨幕墙门户网站是公司自己的官方网站, 并做了 SEO 优化 , 并且提交到了百度百度认证门户中, 动画用的是 Animate 的 CSS 动画库, 其中网站的布局采用了Bootstrap , 做了响应式的适配, 不同设备的访问 , 有着不同的样式与效果, 其中还用到了Jquery.js 库, 做了一些动画 !
技术选型：HTML5、CSS3、jQuery、Bootstrap、Animate
工作职责： 参与了页面设计，业务讨论，利用 jQuery 和Animate和实现网页动效, 利用bootstrap 来实现网页的布局 , 使网页在不同的设备的访问中展现不同的样式。
# 16，武汉宜购文具（uni-app，小程序）
项目名称：武汉宜购文具
项目介绍：武汉宜文具是根据客户需求，特殊定制的项目，项目分为前端页面与后台页面。 前台页面主要包括：商场首页、分类、购物车、我的信息页面。用户可以挑选不同的商品进行收藏，购买等业务。 后台页面主要包括：商品管理、订单管理、发货管理、库存管理。商家可以通过后台管理库存，管理订单，处理退货，处理发货业务。
技术选型：Vue / Uni-app / Vuex / Axios
工作职责：
- 商场首页（ 搜索功能、首页轮播图、首页商品展示 ）
- 我的信息（ 登录功能、获取用户信息功能、获取用户地址功能 ）
- 库存管理（ 商品入库模块、商品出库模块、商品录入模块 ）
- 发货管理（ 单号信息模块、退货管理模块、待付款信息模块 ）
# 17，首玺茶家具微信小程序(小程序+管理后台)
项目名称：首玺茶家具微信小程序(小程序+管理后台)
项目介绍：本项目是茶家具购物的小程序, 电商类的项目，页面主要由茶家具的首页，茶具样式、木材的分类页，茶家具商品详情页，茶家购物车和茶家具用户个人账号登录页面组成。用户通过茶具、款式、木材来挑选心仪家具，进行收藏、添加到购物车、购买功能。展现商家优惠活动，从而方便用户的生活、增强体验感, 充分提高用户的购买欲。
技术选型：uniapp
工作职责：
- 参与项目需求讨论，确定项目周期，项目使用框架和插件。
- 首页，分类页，详情页前端 UI 页面的实现
- 个人登录页面，账户注册、修改密码、个人信息查看等功能，并进行登录判断
- 购物车的商品添加选购，购物车商品数量的修改，商品的删除等一系列基础功能的实现
- 用户新增和修改收货地址以及默认收货地址的管理
- 用户收货后，对商品退单的功能实现
- admin后台的独立开发打包以及部署
# 18，盛香优品H5商城
项目名称：盛香优品H5商城
项目介绍：本项目是针对公司用户开发的一个商城类的项目, 用户可根据再公司库存的积分抵扣或者微信支付, 去购买不同类别的沉香产品. 用户可以查询订单状态, 也可以对商品进行评价处理.
技术选型：vue3+管理后台
工作职责：
- 首页, 商品分类页的页面的功能以及UI展示
- 购物车的结算以及提交订单的功能
- 订单管理, 查看商品支付及发货状态以及评价的功能
- admin后台的用户管理, 商品管理, 购物信息处理，针对退货情况做出应对等功能5.admin后台axios封装, 打包部署
# 19，运维人员任务管理平台
项目名称：运维人员任务管理平台
项目介绍：此项目是配套公司数字化管理平台的运维人员管理平台, 主要是涉及到给各个模块运维人员任务的派发, 调整, 编辑, 以及紧急任务的警报, 并且能够直观的体现需要运维项目的详情与进展
技术选型：React hooks+React-redux+Redux-thunk+React-router+ant-design
工作职责：
- 通过cra进行项目的搭建, 封装项目的fetch请求
- 负责登录、任务列表、人员列表页面
- 通过高阶组件HOC对可复用的列表组件功能进行封装
- 自定义hooks 如useDebounce, useTitle进行标题更改功能实现以及输入框的防抖优化
- 通过react-redux+useContext进行状态以及数据管理
- 通过hooks 的缓存方法 对项目的组件进行优化, 减少不必要的render
# 20，超凡通用商城管理系统
项目名称：超凡通用商城管理系统
项目介绍：该项目是公司自研的一个通用商城后台管理系统，前端使用vue+elementUI实现，后台采用java实现。具有商城后台的完善功能，能够方便的和大部分定制商城系统做集成，是公司商城类应用后台的重要支撑。主要功能为首页运营数据统计等内容。该项目是一个长期投入不断完善的系统，最终达到满足市面上绝大部分商城类应用后台管理需求。 技术选型：
工作职责：
- 采用vue-element-admin实现基本框架搭建
- Axios封装api请求工具函数，对接口进行统一管理。
- 使用vue导航守卫实现前端登录鉴权，vuex保存用户状态和其他共享状态。
- 使用tinymce插件实现富文本内容录入。使用echarts实现所有数据可视化展示。
- 参与实现商品管理，商品录入，条件查询和分页查询。商品录入功能主要包括基本信息录入，图片上传，富文本内容录入，并关联商品品牌，商品分类，关联商品等功能。难点内容是动态sku的录入。先录入sku分类，再通过组合形成所有品类的sku库存信息。
- 订单管理包含待付款，待发货，待收获，已完成和已关闭状态。实现订单列表，订单详情，和订单条件查询。订单状态需要和客户端订单状态关联。
- 售后和退单管理功能，包含退单功能列表，退单状态管理。
- 实现会员管理，广告位管理和文章管理。
- 实现营销数据统计展示，使用echarts实现数据可视化，比如商品销量日期折线图等。
# 21，慢知茶
项目名称：慢知茶
项目介绍：慢知茶是为客户开发的一款以茶叶为主要销售品类的微信小程序。改项目包含微信小程序商城客户端和一个后台管理系统。 技术选型：微信小程序+后台管理系统
工作职责：
- 使用uniapp搭建客户端开发框架；
- 独立完成整个客户端应用的样式布局和数据交互；
- 使用promise对api请求进行封装, 统一接口请求；
- 封装工具类utils.js比如日期格式化，对象格式化转换等；
- 接入微信登录认证，实现微信支付和订单管理等功能；
- 使用token实现认证登录，并通过导航守卫进行登录鉴权。使用vuex进行用户登录状态存储；
- 使用echarts实现首页数据可视化，包含订单/日期折线图，最热销量比例饼图等；
- 实现商品录入，包含基本信息和图文描述信息
- 实现图片资源上传和图片管理，还有新闻资源管理；
# 22，递福莱小程序
项目名称：递福莱小程序
项目介绍：递福莱小程序是一个商城类小程序，主要经营健康类农产品。包含首页轮播，推荐导航，我的个人中心等功能。该小程序可以提供商品试用，用户进行信息登记可以在后台审核免费领取试用品，帮助商户推广产品。
技术选型：微信小程序+后台管理系统
工作职责：
- 实现首页相关功能，动画特效，交互功能；
- 实现商品列表和商品详情展示。商品列表可以条件查询，价格排序；
- 实现商品列表的分页显示和上拉加载；
- 实现购物车相关功能，包括新增，编辑和修改，实现购物车和后台同步功能；
- 实现订单管理功能，以及订单状态修改等功能。
- 实现个人中心管理，包括微信登录认证，退出功能。
- 将可复用的代码进行组件封装实现代码复用，提高代码可读性。
# 23，海思坦企业管理官网+后台内容管理系统
项目名称：海思坦企业管理官网
项目介绍：该项目是为海思坦公司制作的官网以及官网内容管理的中后台。方便了企业展示公司业务以及宣传公司企业文化，中后台辅助官网数据进行数据展示与更改。保证了企业后台使用者自主更新页面展示内容。
技术选型：
- 前台采用：html5+css3+jquery，还包含swiper.js和animate.css等插件
- 中后台：vue+vue-cli+vue-router+axios+vue-elementUI实现
工作职责：
- 企业官网静态页面实现.
- 企业官网首页轮播，以及其他过渡动效和用户交互.
- 中后台企业日志管理、企业服务项目展示管理、官网内容相关数据等.
- 公共样式的封装，公共类库的改进与完善.
- SEO 搜索优化.