Vue实战
文章平均质量分 91
学习笔记
我爱布朗熊
目前是个学生,仍然在学习阶段
展开
-
5.3 iHRM人力资源 - 员工管理 - 新增员工、员工详情
当我们点击新增按钮的时候,会路由到一个新的页面src/views/employee/detail.vue可以直接在路径上输入试一下这么跳转按钮如下所示,便可以跳转但是出现了下面的问题,是框架的问题,改一下1.4 数据和校验具体的规则二、级联组件封装2.1 实现思路如下图所示的内容整体思路如下图所示级联组件如下图所示当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择然后再detail.vue中引入此组件引入使用效果图工具类的api级联组件代码效果图我们发现某个部门下没有数原创 2024-04-18 20:52:05 · 679 阅读 · 0 评论 -
5.2 iHRM人力资源 - 员工管理 - 使用文件导入导出员工
就是下面这一大片乱七八糟的玩意(二进制文件流),接收完流后通过下载的方式将文件下载下载(图片左下方)因为我们使用了一个input框,所以关闭或者上传后要清空内容。如下图所示,用户需要按照模板样式上传Excel表格。因为返回的不是JSON数据了,所以我们要处理一下。现在的参数不是JSON了,而是form-data。如下图所示的按钮,点击下载一个Excel模板。这个地方和“导出员工Excel”差不多的形式。这个地方涉及一个接口二进制流blob。此时弹框的取消和关闭是管用的。// 控制弹层是否展示。原创 2024-04-17 22:40:44 · 828 阅读 · 1 评论 -
5.1 iHRM人力资源 - 员工管理
当我们获取获取数据的时候,找到“传智教育”节点,并且把这个节点记录下来,并且选中这个节点,然后查询“传智教育”下的员工数据。并且搜索的时候,我们应该把我们分页设置为第一页,因为只要是查询就要从第一页开始看,之后查询员工的数据即可。首次加载的时候获取员工数据,切换部门的时候加载此部门中员工数据。当我们切换左侧节点的时候,右侧展示的员工数据也会发生改变。但是我们的头像列和聘用形式列的值不对劲,之后改一下。我们选择如下所示的方法,当值发生变化的时候就触发。典型的,左边是树,右边是表的页面结构。原创 2024-04-17 22:38:58 · 1082 阅读 · 0 评论 -
4.1 iHRM人力资源 - 角色管理
接下来我们要展示出如下图所示的结构element-ui的表格里面可以传入我们的插槽的内容我们根据数字1或者0展示文字的问题,我们可以使用作用域插槽下图中,row表示行数据,column表示列数据,我们要行数据row就可以了如下所示--放置表格组件--> < el-table :data = " list " >原创 2024-04-17 22:34:05 · 673 阅读 · 1 评论 -
3.2 iHRM人力资源 - 组织架构 - 编辑及删除
但是现在还有一个问题,当我们点击“编辑”后,关闭,再点击“新增”,我们发现弹层左上角显示“编辑部门”,而不是“新增部门”,原因就是this.$refs.addDept.resetFields()重置表单时有问题,并没有把id给清空。但是目前有下面这个问题,当我们点击“编辑”后,会出现下面的情况,所以我们应该把“编辑”功能和“新增”功能的校验区别开。因为我们“添加”和“编辑”功能公用的一个组件,所以我们需要区分一下是编辑下的文本框还是增加下的文本框。其实“添加”功能的“确认”和“取消”在这里差不多就能复用。原创 2024-04-16 22:14:39 · 622 阅读 · 1 评论 -
3.1 iHRM人力资源 - 组织架构、树形结构、添加子部门
树形组件:用层级结构展示信息,可展开或者折叠效果图我们其实要实现下面的这种树形结构,在右侧还有操作地方,但是我们在1.1中只展示了名称没有显示右侧因为element-ui中树形结构默认只显示节点的名称,如果我们想树形结构左边有内容右边也有内容的话,就需要对树形结构进行自定义我们这个地方需要再使用一个element-ui的行和列组件如下图所示,我们向实现这种结构行 el-row列 el-col我们代码要实现下面这种形式1.2.3 获取组织架构数据-api封装获取组织架构的API初始化后调用原创 2024-04-16 22:13:38 · 912 阅读 · 0 评论 -
2.3 iHRM人力资源 - 路由、左侧菜单栏、处理token失效、退出登录、修改密码
因为el-dropdown-item的标签并不是H5的标签,@click.native表示el-dropdown-item标签最终形成的H5的标签去注册H5标签的点击事件。如果不写“.native”表示注册的这个组件的自定义事件,而这个组件本身并没有click这个自定义事件,所以我们需要native触发click点击事件。如果确定某个组件显示,我们就又会用上一个组件叫做Item组件,此Item组件会渲染咱们传进去的标题和图标,也是就一个渲染过程。说明:超级管理员的密码不可修改,修改密码的时候要有校验功能。原创 2024-04-16 22:12:23 · 902 阅读 · 0 评论 -
2.2 iHRM人力资源 - 主页权限认证、Vux共享用户资料
假如我们把获取用户资料的代码写在"Dashboard"模块,那首先访问Dashboard也就是主页的时候我们完全可以调用请求/sys/profile得到用户信息的资料,然后放在Vuex中做成数据共享。随便打开一个页面刷新测试即可,如果有信息说明哪个界面都能获取到用户基本信息,我们做的就是对对对对对对的!假如说我们的Vuex中有用户资料信息,就不要再重复进行获取了,我们只保证没有用户资料信息的时候进行获取。我们登录之后要获取用户的资料,比如说用户名、用户头像,然后把用户资料放在Vuex中进行共享。原创 2024-04-16 22:11:17 · 805 阅读 · 0 评论 -
2.1 iHRM人力资源 - 登录
开发环境:开发人员开发代码、测试的代码环境。此环境对代码的要求不是很高,可以随意更改,因为还不是面向真正的用户生产环境:也叫做正式环境,面向真实的用户下面我们就要实现下图流程中的“区分环境”模块怎么区分不同的环境?使用环境变量,有如下两个位置.env.development中设置开发环境变量默认 NODE_ENV 值为.env.production中设置生产环境变量默认 NODE_ENV 值为production。原创 2024-01-15 11:04:58 · 1277 阅读 · 0 评论 -
1.IHRM人力资源后台 - 项目搭建
我们只暴露两个属性说明我们项目的VUEX都放在modules模块中,而getters是向外暴露一些便捷的访问属性,并没有我们常见的state、mutation和action。在router目录index.js文件中地址对应组件,对应的组件就是路由器组件,在views目录中。我们将上面的图标进行使用的时候还需要借助一个组件,此组件已经将图标注册好了,图标就可以正常显示了。一个地址对应一个组件,但一个组件可能会对应多个地址。所以说我们的getters只是做了一个便捷访问,更便捷的访问模块中的属性。原创 2024-01-15 11:01:24 · 1628 阅读 · 0 评论 -
Element-UI+Vue实现开发权限
默认展开所有结点默认勾选结点 ,然后绑定一个数组@click="showSetRigthDialog(scope.row)",scope.row代表着这一整行的数据对象,也就是人物,我们为什么要传入这个呢?因为我们要实现默认勾选结点,利用递归的方式。原创 2022-10-22 13:25:38 · 4416 阅读 · 5 评论 -
Springboot+Vue+Element-UI——DatePicker日期选择器的使用(Vue发送请求)
在Element-UI官网上,我选择的是下图中左侧的默认的一个日期选择器下面是data中的数据,经过测试,下面是数组也行,是对象也行且经过测试,我们在控制台可以输出一下,我们发现这个数据就是数组的形式。原创 2022-10-16 13:21:43 · 2227 阅读 · 0 评论 -
Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource
那我们怎么理解代理服务器(粉色)呢?房主中介的作用,左手顾客,右手房东类似中间人,本身也是服务器。8080是我们目前所处在的位置(红色),代理服务器和我们处在的位置一个样,也是8080,始终保持一致当我们在8080(红色)端口向5000端口索要数据的时候,并不会直接发送给5000端口(服务器),而是先发送给代理服务器(粉色8080),然后粉色的代理服务器反手把这次请求发送给了5000;原创 2022-10-08 18:09:16 · 7074 阅读 · 1 评论 -
Element-UI+Vue实现用户的删除操作
为了避免用户不小心点击的删除按钮,我们应该在删除操作之前提示一下用户,这个时候依然需要使用Element-UI中的弹框组件——确认消息好处:以后我们在使用的时候,我们可以直接使用this+. 进行使用,更方便。原创 2022-10-06 21:03:35 · 2892 阅读 · 0 评论 -
Element-UI+Vue实现主页布局——侧边栏用户布局(下)
这个地方后端应该是做了一个模糊查询,根据某一点的内容来搜索内容,我们双向绑定的是queryInfo.query属性,然后当我们点击搜索按钮的时调用getUserList回调函数发起请求,最终我们得到数据返回到页面上。我们再switch开关上面添加一个@change的函数,这个是Element-UI文档中的,我们只需要定义后面的函数参数就可以了,然后将scope.row参数传入到里面。在我们点击确认按钮的时候,绑定一个单击事件,然后对我们填写的内容进行预验证,如果验证不通过的话会依然停留在对话框阶段。原创 2022-10-06 20:09:35 · 3604 阅读 · 1 评论 -
Element-UI+Vue实现主页布局——侧边栏用户布局(上)
我们首先来看按钮以及文字提示的参数,接下来我们会有用处原创 2022-10-05 18:52:44 · 7789 阅读 · 2 评论 -
Vue+ELementUI主页布局----侧边栏布局(el-aside)
第一节Login.vue登录表单知识: Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客具体Element-UI地址:Element - The world's most popular Vue UI framework 目录一、布满整个页面二、主页Header布局三、主页左侧带单布局四、axios请求拦截器添加token,保证拥有获取数据的权限五、发起请求获取左侧菜单数据六、左侧菜单UI绘制6.1优化一级菜单6.2当打开一个一级菜单后其他一级菜单关闭6.3实现左侧菜单的折叠与展开原创 2022-10-04 20:46:13 · 33987 阅读 · 2 评论 -
Element-UI+vue实现登录表单
rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],}原创 2022-09-30 21:02:02 · 5640 阅读 · 2 评论