vue 人资项目学习
文章平均质量分 90
Hyman-ya
这个作者很懒,什么都没留下…
展开
-
Vue 人资 实战篇十一 改变路由模式(hash模式改为history模式)、性能分析和CDN的运用、在node.js环境中应用并代理跨域
1.0 打包之前的路由模式**目标**配置打包之前的路由模式在SPA单页应用中,有两种路由模式hash模式 : #后面是路由路径,特点是前端访问,#后面的变化不会经过服务器history模式:正常的/访问模式,特点是后端访问,任意地址的变化都会访问服务器开发到现在,我们一直都在用hash模式,打包我们尝试用history模式改成history模式非常简单,只需要将路由的mode类型改成history即可const createRouter = () => new Router原创 2021-06-10 16:07:35 · 1054 阅读 · 0 评论 -
Vue 人资 实战篇十 全屏化插件、动态主题设置、多语言化语言包、tab页视图(假)
1.0 全屏插件的引用目标:实现页面的全屏功能全屏功能可以借助一个插件来实现第一步,安装全局插件screenfullnpm i screenfull第二步,封装全屏显示的插件·· src/components/ScreenFull/index.vue<template> <!-- 放置一个图标 --> <div> <!-- 放置一个svg的图标 --> <svg-icon icon-class="full原创 2021-06-09 20:16:24 · 312 阅读 · 0 评论 -
Vue 人资 实战篇九 其他模块集成和主页审批-图表-日历、echarts、 枚举的一个方法
1.0 全模块集成目标: 将其他业务模块代码集成到该项目中到目前为止,我们已经完成了一个基本项目框架 + 组织架构 + 公司 + 员工 + 权限的 业务联调, 时间关系,我们不可能将所有的业务都去编写一遍,这里提供大家 其余模块的集成代码,最终的目的是让大家得到一个完成的业务模块要集成的模块业务,包括工资模块,社保模块,考勤模块,审批模块在我们提供的资源集成模块中,我们提供了四个模块的**路由/页面/api*, 按照下面的路径拷贝即可路由 => src/router/modul原创 2021-06-09 16:04:08 · 367 阅读 · 0 评论 -
Vue 人资 实战篇八 权限设计 重点!!!路由访问权限,左侧导航栏显示等等,还有 mixin 混入方法
1.0 权限设计-RBAC的权限设计思想传统的权限设计是对每个人进行单独的权限设置,但这种方式已经不适合目前企业的高效管控权限的发展需求,因为每个人都要单独去设置权限基于此,RBAC的权限模型就应运而生了,RBAC(Role-Based Access control) ,也就是基于角色的权限分配解决方案,相对于传统方案,RBAC提供了中间层Role(角色),其权限模式如下RBAC实现了用户和权限点的分离,想对某个用户设置权限,只需要对该用户设置相应的角色即可,而该角色就拥有了对应的权限,这样一来原创 2021-06-08 20:16:41 · 762 阅读 · 2 评论 -
Vue 人资 实战篇七 员工管理下 配置腾讯云COS、封装上传图片组件、、上传到腾讯云、上传进度条、图片地址转换二维码、打印组件、
14.0 配置腾讯云Cos目标: 配置一个腾讯云cos由于上课的开发的特殊性,我们不希望把所有的图片都上传到我们自己的官方服务器上,这里我们可以采用一个腾讯云的图片方案用户上传 =》 腾讯云服务器 =》 返回地址 =》 地址存入数据库选择 对象存储 cos 模块创建存储桶(选择 公有读私有写)设置 cors 规则 (来源选择 * , 操作全部勾选)因为我们本身没有域名,所以这里设置成*****,仅限于测试,正式环境的话,这里需要配置真实的域名地址15.0 封装上传图片组件-上传组件需原创 2021-06-07 15:03:30 · 912 阅读 · 0 评论 -
Vue 人资 实战篇七 员工管理上 封装通用的组件、formatter属性、过滤器的使用、树形结构、建立公共导入的页面路由、excel的导入和导出、
1.0 封装一个通用的工具栏目标:封装一个通用的工具栏供大家使用1.1 通用工具栏的组件结构在后续的业务开发中,经常会用到一个类似下图的工具栏,作为公共组件,进行一下封装组件 src/components/PageTools/index.vue<template> <el-card class="page-tools"> <el-row type="flex" justify="space-between" align="middle">原创 2021-06-07 14:41:31 · 742 阅读 · 0 评论 -
Vue 人资 实战篇六 公司与角色管理 跟以前的项目差不多, 就注意一下 try 和 catch、await 的联合使用
1.0 建立公司角色页面的基本结构**目标**建立公司页面的基本结构1.1 采用element-ui的组件实现src/views/setting/index.vue<template> <div class="dashboard-container"> <div class="app-container"> <el-card> <el-tabs> <!-- 放置页签 --原创 2021-06-04 16:04:21 · 472 阅读 · 2 评论 -
Vue 人资 实战篇五 组织架构页面 递归函数的调用、树形结构、效验规则、利用ref调用子组件的方法、通过debugger调试、加载进度条的使用
1.0 组织架构树形结构布局目标:使用element-UI组件布局组织架构的基本布局一个企业的组织架构是该企业的灵魂,组织架构多常采用树形金字塔式结构,本章节,我们布局出页面的基本结构1.1 实现组织架构的头部内容首先实现头部的结构,采用element的**行列布局 <el-card class="tree-card"> <!-- 用了一个行列布局 --> <el-row type="flex" justify="space原创 2021-06-03 20:34:17 · 522 阅读 · 1 评论 -
Vue 人资 实战篇四 路由页面整理 静态和动态路由、一次性新建多个文件、函数式组件
1.0 路由页面整理目标 删除基础模板中附带的多余页面因为复杂中台项目的页面众多,不可能把所有的业务都集中在一个文件上进行管理和维护,并且还有最重要的,前端的页面中主要分为两部分,一部分是所有人都可以访问的, 一部分是只有有权限的人才可以访问的,拆分多个模块便于更好的控制1.1 静态路由和动态路由**注意**这里的动态路由并不是 路由传参的动态路由静态路由 表示 都允许访问动态路由 表示 需要权限来访问了解完成路由设计之后,我们对当前的路由进行一下整理1.2 删除多余的静态路由表原创 2021-06-02 16:59:58 · 660 阅读 · 0 评论 -
Vue 人资 实战篇三 主页模块 token拦截、token注入、pvg的颜色、权限拦截器、自定义指令、Token失效
1.0 主页的token拦截处理目标:根据token处理主页的访问权限问题本节任务:完成主页中根据有无token,进行页面访问的处理1.1 权限拦截的流程图 以及 流程图转化代码我们已经完成了登录的过程,并且存储了token,但是此时主页并没有因为token的有无而被控制访问权限在基础框架阶段,我们已经知道**src/permission.js**是专门处理路由权限的,所以我们在这里处理在导航守卫的位置,我们添加了NProgress的插件,可以完成进入时的进度条效果提交代码// 权限拦截原创 2021-06-01 21:10:21 · 956 阅读 · 10 评论 -
Vue 人资 实战篇二 登录模块 修饰符 重点!!! 设置端口,网站名,跨域问题,token处理,拦截器处理
----------------------------------- 登录模块1.0 设置固定的本地访问端口和网站名称目标: 设置统一的本地访问端口和网站title本节注意: 修改服务的配置文件,想要生效的话,必须要重新启动服务,值‘8888’后面不能留有空格1.1 本地服务端口在**vue.config.js**中进行设置vue.config.js 就是vue项目相关的编译,配置,打包,启动服务相关的配置文件,它的核心在于webpack,但是又不同于webpack,相当于改良版的webp原创 2021-05-31 23:25:57 · 605 阅读 · 5 评论 -
Vue 人资 实战篇一 vue-element-admin学习,项目初始化,sass运用
人力资源的环境搭建1.0 vue-element-admin的了解和介绍vue-element-admin (https://panjiachen.gitee.io/vue-element-admin-site/zh/)是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。是一个后台集成方案, 集成了PC项目中很多的业原创 2021-05-31 15:39:27 · 979 阅读 · 0 评论