某思云院 项目简介:
这是一款致力于解决企业人才发展、实现人才和企业共赢的人才学习平台,集知识库、系统化课程和数据报表为一体,从而将培训结果数字化。
项目架构:
使用Vue2开发框架 + ES6 + Vuex + Element UI + Webpack + Axios等前端技术实现。
项目责任:
负责首页、素材管理、学习管理、数据报表管理以及登录注册模块页面搭建和功能展示。
技术要点:
1. 使用Element UI实现页面布局,快速构建项目结构。
2. 使用Vuex管理数据, 将每个模块的数据进行单独管理, 使用更方便, 更具有扩展性。
3. 使用ECharts可视化图表对首页数据进行展现。
4. 使用Swiper插件实现首页的轮播图效果,封装Swiper、Pagination等公共组件实现组件高复用。
5. 使用vue-lazyload插件来完成图片懒加载,使用vee-validate插件来完成表单单独校验和统一校验 。
6. 路由全局前置守卫中进行token校验,使用localStorage本地存储token,实现用户免登陆。
=============================
某管家 项目简介:
该项目后台管理系统,集成了首页、组织管理、OA管理、资源管理、用户权限控制管理等相关业务功能的呈现。
项目架构:
使用Vue3开发框架 + Vite + TS + Vue Router + Pinia + Element Plus + Axios等前端技术实现。
项目责任:
负责编写用户首页、用户管理、角色管理、菜单管理、资源管理及OA管理的部分功能。
技术要点:
1. 使用 Element-Plus库实现静态页面搭建,使用深度作用域选择器修改Element Plus组件内部的样式。
2. 基于Ajax,对axios进行二次封装,添加基础路径和超时时间,添加请求响应拦截器,并对响应的错误进行统一的处理。
3. 通过路由全局前置守卫中进行token校验,再利用 addRoute API生成不同的私有路由表实现页面权限功能。
4. 使用Vue3 自定义全局指令 v-permission实现按钮权限控制。
5. 使用Lodash库的cloneDeep深克隆动态路由表,解决不同用户二次登录时,路由组件展示缺失的问题。
6. 封装el-upload组件,和后端配合来实现部分培训大视频的切片上传、断点续传和秒传。
7. 使用nextTick()和ref完成切换到编辑模式下自动获取焦点,以便直接修改员工相关信息。
8. 持续不断地优化代码,提升用户体验。如:取消页面重复/上一个页面的请求、切换频繁的组件使用v-show、使用mixin分发vue组件中的可复用功能等等。
9. 利用TS的强类型、接口、泛型等语法来规范项目代码。