1.熟练掌握vue全家桶,vue、vue-router、vuex、ivew ui等技术进行各种应用开发。
2.熟练掌握原生JavaScript代码,熟悉js原型链、闭包和事件机制。
3.熟练使用DIV+CSS布局,精通HTML5、CSS3。
4.熟练使用 Ajax,能与后端合作完成研发工作,能够解决常见的跨域问题。
5.熟练使用 element-ui、swiper、ECharts等插件。
6.对于浏览器http、https有了解。
7.了解ES6/7/8/9特性。
8.熟练使用git。
一、直直拼(小直商城管理系统)
技术栈:Vue2.6 + Vue-Router + Vuex + ElementUI + Echarts + Vue-draggable + Vue-admin
主要负责: 1. 使用Vue-admin起步,优化路由,根据业务功能设计文件夹层次。根据路由对象的index值优化侧边菜单,使侧边 菜单能够自动根据当前页面路由自动开合子菜单;
2. 使用Echarts制作首页图表,结合el-date-picker实现了根据日期范围拉取图表数据,并使用disabledDate属性对 时间戳判定从而限定日期选择范围;
3. 使用el-table制作商品管理、会员管理等多个表格,实现了表格的分页、服务端排序、自定义列显示、多选,并结 合使用复选框、拖拽条、日期范围选择框、Tree组件制作了功能复杂的筛选器,可以进行富查询。使用el- autocomplete实现关键词智能感应;
4. 使用Vue-draggable实现了商品分类管理的拖拽功能,可以进行一级分类拖拽排序,更可以让二级、三级分类自由 拖拽到其他级别排序,并实时用axios发出Ajax请求命令服务器从而实现商品分类的增、删、改等功能;
5. 自己封装了“省市县镇”地址选择组件,实现了行政区划的四级联动,用户可以自由回退更改任一级别行政区划,组 件使用v-model与外部交互,方便父组件读取、设置它的值;
6. 项目中,多次使用el-dialog或者el-drawer制作表单,表单实现了“一框两用”,即增加表单和修改表单为同一个表 单。表单有完备的验证功能,包括必填验证、正则表达式验证以及服务端验证等;
7. 使 用Vue-Router的参数功能,实现页面的跳转,子页面识别参数并发出具体Ajax请求。多个页面跳转之后,使用 Vuex保存页面访问顺序,以Tab形式进行显示,方便用户快速进行页面切换;
8. 实现了登录与注册。利用localStorage存储服务器返回的token值,对axios编写拦截器,遇见403状态码时,即命 令跳转到登录页面。利用Vue-Router的路由守卫,进行路由鉴权,识别meta中的鉴权标记,判断用户是否具备相关 权限。
二、小直商城小程序
技术栈:uni-app + Vue2.6 + localStorage 主要负责:
1. 制作首页,实现了首页swiper轮播图显示,下拉刷新和瀑布流的无穷滚动。编写秒杀倒计时算法,从服务器HTTP 响应头部识别时间,根据时间戳差,显示倒计时;
2. 制作搜索结果页,无穷滚动,实现了函数防抖节流。独立开发完成了富筛选逻辑,比如空调能够筛选品牌、价格范围、匹数、壁挂还是立柜式;而裙子能够筛选品牌、价格范围、颜色、季节、年龄等。实现了当用户选择了某个筛选 条件时,能够用汉字显示已选择的项,比如显示“品牌(海尔等2个)”;
3. 独立制作完成商品的颜色、分类的切换逻辑。后端返回的数据是三个数组colorList、versionList、 mappingList。其中mappingList是所有颜色和型号的排列组合。利用v-for制作按钮的罗列,独立实现了判断按钮是 否能够点击的算法功能,也实现了点击按钮能够切换产品SKU的功能。独立制作完成了判断按钮是否能点击的逻辑;
4. 利用scroll-view实现了“概览”、“评论”、“图文详情”的切换。实现了当页面scrollTop值超过了150就出现顶部盒 子,并且利用CSS3的transition实现了opacity的平滑动画过渡。当点击“评论”时,利用scroll-into-view这个属性, 跳转到指定的盒子;
5. 在商品展示页面,用scroll-top值实现了商品评论的懒加载。只有当scroll-top值超过了300,才发出Ajax请求 comment接口。独立开发完成点击小图看大图功能,使用了微信的wx.previewImage() API;