我爱布朗熊-优快云博客

原创 6.4 JavaScript Apis - 日期对象、DOM节点

关闭按钮和erweima是父子关系，所以我们完全可以点击关闭按钮，直接关闭它的父级，就无需获取erweima元素了。删除节点和隐藏节点（display:none）有区别：隐藏节点还是存在的，但是删除，则从html中删除节点。如果不是下载的代码的方式，我们直接点击右上角“在新窗口打开”即可，然后点击右键，“查看网页源代码”如下图所示，关闭二维码的案例，点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子。创建节点，即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点。

2024-12-12 17:25:33 1035

原创 6.2 JavaScript Apis - 事件流

事件冒泡有一个非常好的用途，就是事件委托，事件委托其实是一种技巧事件委托是利用事件流的特征解决一些开发需求的知识技巧优点：减少注册次数，提高程序性能原理：事件委托其实是利用事件冒泡的特点给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件如果同时给多个元素注册事件，我们之前使用的是for循环注册事件，那有没有一种技巧注册一次事件就能完成以上效果呢？我们点击的li，但是li上没有真正的点击事件，此时会事件冒泡到父级元素ul上，ul上会有点击事件

2024-12-12 17:23:07 646

原创 6.1 JavaScript Apis - 定时器、事件监听、鼠标事件、键盘事件

console.log("间歇函数执行了")},1000)

2024-12-12 17:21:39 755

原创 5.2 JavaScript 案例 - 轮播图

利用随机数字，让小圆点添加高亮的类(addClass)，这里利用CSS结构伪类选择器。目前还不是一个很完整的轮播图，不能点击小圆点、不能前后左右翻页，后面会慢慢的完善。随机选择一个数字，选出数组对应的对象，更换图片，底部盒子背景颜色及文字内容。激活小圆点，移除上一个高亮的类名，当前变量对应的小圆点添加类。处理图片自动复原从头播放（放到变量++后面，紧挨）准备一个数组对象，里面包含详情信息（素材包含）如果图片播放到最后一张，就是大于等于数组的长度。这里的ul-li，就是里面的底部模块的小点。

2024-12-12 17:20:15 361

原创 5.1 JavaScript Apis - const、DOM元素

2024-12-12 15:40:52 837

原创 4. JavaScript - 对象

console其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫 log，然后调用 log 这个方法，即 console.log()通过new关键字创建的对象（系统对象、自定义对象），如Object、Array、Date等。声明对象，并添加了若干属性后，可以使用“.”获得对象中属性对应的值，我称之为属性访问。也可以动态为对象添加属性，动态添加与直接定义是一样的，只是语法上更灵活。数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。对象里面是无序的键值对，没有规律。

2024-12-12 15:38:35 955

原创 3. JavaScript - 函数

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。声明函数调用函数声明的函数必须调用才会真正被执行1.2 函数传参通过向函数传递参数，可以让函数更加灵活多变，参数可以理解成是一个变量声明（定义）一个功能为打招呼的函数总结：形参与实参：形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）形参可以理解为是在这个函数内声明的变量（比如 num1 = 10

2024-12-12 15:37:25 657

原创 2.JavaScript基础 - 运算符、if语句、switch语句、while语句、for语句

通过 "[] "定义数组，数据中可以存放真正的数据，如小明、小刚、小红等这些都是数组中的数据，我们这些数据称为数组单元，数组单元之间使用英文逗号分隔。使用以上方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。字符串比较的时候，是比较的字符对应的ASCII码，从左往右依次比较，如果第一位一样再比较第二位，以此例推。使用场景：适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句的功能相同。😉 也可以来构造“无限”循环，同样需要使用break退出循环。

2024-12-12 15:36:27 599

原创 1.JavaScript基础 - 变量、常量、数据类型

JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果JavaScript的 |MDN的 (mozilla.org)HTML和CSS是标记语言可以实现网页特效（监听用户的一些行为让网页做出对应的反馈）表单验证（针对表单数据的合法性进行判断）数据交互（获取后台的数据，渲染到前端）服务端编程（node.js）JS整体分成两大类ECMAScriptJavaScript语言基础或者说是基本语法，规定了js基础语法核心知识比如：变量、分支语句、循环语句、对象等等。

2024-12-12 10:01:33 1280

原创 7.Linux - 安装MySQL、Tomcat、Nginx、RabbitMQ、Redis

装上了 EPEL之后，就相当于添加了一个第三方源。Tomcat是由Apache开发的一个Servlet容器，实现了对Servlet和JSP的支持，并提供了作为Web服务器的一些特有功能，如Tomcat管理和控制平台、安全域管理和Tomcat阀等。但是现在有一个问题，/usr/bin是系统中Java所在的位置，/export/server/jdk1.8.0_411是我们配置。简单来说，Tomcat是一个WEB应用程序的托管平台，可以让用户编写的WEB应用程序，被Tomcat所托管，并提供网站服务。

2024-12-12 09:58:33 1285

原创 6. Linux - 文件的上传与下载、解压缩

1. 路由的目标网络或IP地址。这指示了数据包应该被发送到哪里。> default表示，如果访问一个ip，既不满足192.168.101.0条件，也不满足192.168.122.0条件，就会走default

2024-12-12 09:57:02 953

原创 5.Linux - IP地址、网络传输、进程

可以通过top命令查看CPU、内存的使用情况，类似Windows的任务管理器默认5s刷新一次语法直接输入top即可，按q或ctrl+c退出-p 选项：只显示某个进程的信息-d选项：设置刷新时间，默认是5s-c选项：显示产生进程的完整命令，默认是进程名-n选项：指定刷新次数，比如top -n 3 刷新输出3次后退出-b选项：以非交互非全屏模式运行，以批次的方式执行top，一般配合-n指定输出几次统计信息，将输出重定向到指定文件，比如 top -b -n 3 > /tem/top.tmp。

2024-12-12 09:55:24 1150

原创 4.Linux - 实用操作

下面的命令是将系统自带的localtime文件删除，并将/usr/share/zoneinfo/Asia/Shanghai 文件链接为localtime文件即可。这个地方还有一个执行命令的快捷方式，比如下面，通过感叹号作为前缀，在后面写上对应的字符，他就会在历史命令里面从下向上搜索。可以通过ntpd服务名（安装的时候自动注册上服务的），配合systemctl进行控制，如下所示，发现ntp关闭着。但是对于要执行很久之前的历史命令，不建议使用这种命令，很容易造成执行错误的命令。

2024-12-12 09:45:28 683

原创 3.Linux - 用户和权限

g选项指定用户的组，并且此组需要已经存在，如存在同名组，则必须使用-g，不指定-g的时候，会创建同名组并自动加入。所以，我们需要学习在Linux中进行用户、用户组管理的基础命令，为后面学习权限控制打下基础。假如用户A访问用户B（不是一个组），要看用户B的其他用户权限的配置中用户A是否拥有。u表示user所属用户权限，g表示group组权限，o表示other其他用户权限。-r选项，删除用户的HOME目录，不使用-r，删除用户时HOME目录保留。针对某文件，可以控制用户的权限，也可以控制用户组的权限。

2024-12-12 09:41:26 1507

原创 2.Linux - 基础结构及命令

ls的参数表示的是一个Linux的路径，也就是ls要展示的目标，如果不写这个参数的话，默认展示的就是当前HOME目录，若指定一个Linux路径的话，就能查看指定文件夹的内容。vim是vi的加强版本，兼容了vi的所有指令，不仅能编辑文本，而且还具有shell程序的编辑功能，可以不同颜色的字体来辨别语法的正确性，极大方便了程序的设计和编辑性。如Linux的用户为zjqlinux，其HOME目录是/home/zjqlinux，说白了就是用户在Linux系统中的专属目录，默认在/home/用户名。

2024-12-12 09:40:08 850

原创 1.Linux入门

我们平常所用的电脑是个人桌面操作系统，也就是Windows或者是macOS目前我们要学的是服务器操作系统Linux，开发人员开发的程序，最终需要再Linux服务器操作系统上运行操作系统是计算机软件的一种，主要负责作为用户和计算机硬件之间的桥梁，调度和管理计算机硬件进行工作可以看一下发送微信消息时，消息是怎么传送的操作系统在其中的活：调度键盘进行文字输入、调度显示器显示内容、调度CPU内存供微信运行、调度网卡发送信息、调度网卡接受信息。

2024-06-07 17:24:32 782

原创 5.3 iHRM人力资源 - 员工管理 - 新增员工、员工详情

当我们点击新增按钮的时候，会路由到一个新的页面src/views/employee/detail.vue可以直接在路径上输入试一下这么跳转按钮如下所示，便可以跳转但是出现了下面的问题，是框架的问题，改一下1.4 数据和校验具体的规则二、级联组件封装2.1 实现思路如下图所示的内容整体思路如下图所示级联组件如下图所示当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择然后再detail.vue中引入此组件引入使用效果图工具类的api级联组件代码效果图我们发现某个部门下没有数

2024-04-18 20:52:05 871

原创 5.2 iHRM人力资源 - 员工管理 - 使用文件导入导出员工

就是下面这一大片乱七八糟的玩意（二进制文件流），接收完流后通过下载的方式将文件下载下载（图片左下方）因为我们使用了一个input框，所以关闭或者上传后要清空内容。如下图所示，用户需要按照模板样式上传Excel表格。因为返回的不是JSON数据了，所以我们要处理一下。现在的参数不是JSON了，而是form-data。如下图所示的按钮，点击下载一个Excel模板。这个地方和“导出员工Excel”差不多的形式。这个地方涉及一个接口二进制流blob。此时弹框的取消和关闭是管用的。// 控制弹层是否展示。

2024-04-17 22:40:44 1101 1

原创 5.1 iHRM人力资源 - 员工管理

当我们获取获取数据的时候，找到“传智教育”节点，并且把这个节点记录下来，并且选中这个节点，然后查询“传智教育”下的员工数据。并且搜索的时候，我们应该把我们分页设置为第一页，因为只要是查询就要从第一页开始看，之后查询员工的数据即可。首次加载的时候获取员工数据，切换部门的时候加载此部门中员工数据。当我们切换左侧节点的时候，右侧展示的员工数据也会发生改变。但是我们的头像列和聘用形式列的值不对劲，之后改一下。我们选择如下所示的方法，当值发生变化的时候就触发。典型的，左边是树，右边是表的页面结构。

2024-04-17 22:38:58 1297

原创 4.1 iHRM人力资源 - 角色管理

接下来我们要展示出如下图所示的结构element-ui的表格里面可以传入我们的插槽的内容我们根据数字1或者0展示文字的问题，我们可以使用作用域插槽下图中，row表示行数据，column表示列数据，我们要行数据row就可以了如下所示--放置表格组件--> < el-table :data = " list " >

2024-04-17 22:34:05 759 1

原创 3.2 iHRM人力资源 - 组织架构 - 编辑及删除

但是现在还有一个问题，当我们点击“编辑”后，关闭，再点击“新增”，我们发现弹层左上角显示“编辑部门”，而不是“新增部门”，原因就是this.$refs.addDept.resetFields()重置表单时有问题，并没有把id给清空。但是目前有下面这个问题，当我们点击“编辑”后，会出现下面的情况，所以我们应该把“编辑”功能和“新增”功能的校验区别开。因为我们“添加”和“编辑”功能公用的一个组件，所以我们需要区分一下是编辑下的文本框还是增加下的文本框。其实“添加”功能的“确认”和“取消”在这里差不多就能复用。

2024-04-16 22:14:39 710 2

原创 3.1 iHRM人力资源 - 组织架构、树形结构、添加子部门

树形组件：用层级结构展示信息，可展开或者折叠效果图我们其实要实现下面的这种树形结构，在右侧还有操作地方，但是我们在1.1中只展示了名称没有显示右侧因为element-ui中树形结构默认只显示节点的名称，如果我们想树形结构左边有内容右边也有内容的话，就需要对树形结构进行自定义我们这个地方需要再使用一个element-ui的行和列组件如下图所示，我们向实现这种结构行 el-row列 el-col我们代码要实现下面这种形式1.2.3 获取组织架构数据-api封装获取组织架构的API初始化后调用

2024-04-16 22:13:38 1005

原创 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 974

原创 2.2 iHRM人力资源 - 主页权限认证、Vux共享用户资料

假如我们把获取用户资料的代码写在"Dashboard"模块，那首先访问Dashboard也就是主页的时候我们完全可以调用请求/sys/profile得到用户信息的资料，然后放在Vuex中做成数据共享。随便打开一个页面刷新测试即可，如果有信息说明哪个界面都能获取到用户基本信息，我们做的就是对对对对对对的！假如说我们的Vuex中有用户资料信息，就不要再重复进行获取了，我们只保证没有用户资料信息的时候进行获取。我们登录之后要获取用户的资料，比如说用户名、用户头像，然后把用户资料放在Vuex中进行共享。

2024-04-16 22:11:17 886

原创 6.2 认证授权模块 - 继承JWT、网关认证

JWT 介绍JSON Web Token（JWT）是一种使用JSON格式传递数据的网络令牌技术，它是一个开放的行业标准（RFC 7519），它定义了一种简洁的、自包含的协议格式，用于在通信双方传递json对象，传递的信息经过数字签名可以被验证和信任，它可以使用HMAC算法或使用RSA的公钥/私钥对来签名，防止内容篡改使用JWT可以实现无状态认证，什么是无状态认证？基于session。

2024-03-11 10:55:49 531 1

原创 7.3 支付模块 - 创建订单、查询订单、通知

在请求微信或支付宝下单接口时需要传入商品订单号，在与第三方支付平台对接时发现，当用户支付失败或因为其它原因最终该订单没有支付成功，此时再次调用第三方支付平台的下单接口发现报错“订单号已存在”，此时如果我们传入一个没有使用过的订单号就可以解决问题，但是商品订单已经创建，因为没有支付成功重新创建一个新订单是不合理的。订单服务完成支付后将支付结果发给每一个与订单服务对接的微服务，订单服务将消息发给交换机，由交换机广播消息，每个订阅消息的微服务都可以接收到支付结果.

2024-03-07 18:24:15 920

原创 7.2 支付模块 - 付费课程选课、支付

此时又会创建一个新的服务 - 订单支付模块用户去学习收费课程时引导其去支付，如下图：当用户点击“微信支付”或支付宝支付时执行流程如下1、请求学习中心服务创建选课记录2、请求订单服务创建商品订单、生成支付二维码。3、用户扫码请求订单支付服务，订单支付服务请求第三方支付平台生成支付订单。4、前端唤起支付客户端，用户输入密码完成支付。5、第三方支付平台支付完成发起支付通知。6、订单支付服务接收第三方支付通知结果。7、用户在前端查询支付结果，请求订单支付服务查询支付结果。8、订单支付服务向学习中心服务通知支付结果。

2024-03-07 18:22:47 1203

原创 7.1 支付模块 - 用户选课

记录我在网站学习的课程，我的课程表中有免费课程和收费课程两种，对于免费课程可直接添加到我的课程表，对于收费课程需要下单、支付成功后自动加入我的课程表。：课程价格为0，有效期默认365，开始服务时间为选课时间，结束服务时间为选课时间加1年后的时间，选课状态为选课成功。如果选择的课程是收费的，那么在选课记录表中，选课状态就是待支付，等待支付成功后，此课程会加入到课表中。如果选择的课程是免费的，那么在选课记录表中，选课状态就是成功，并且此课程已经加入到课表中了。

2024-03-07 18:21:29 837

原创 6.4 认证授权模块 - 用户授权

如何实现授权？业界通常基于RBAC实现授权RBAC分为两种方式基于角色的访问控制按角色进行授权比如：主体的角色为总经理可以查询企业运营报表，查询员工工资信息等，访问控制流程如下判断如下图所示if(主体.hasRole("总经理角色id") || 主体.hasRole("部门经理角色id")){查询工资基于资源的访问控制优点：系统设计时定义好查询工资的权限标识，即使查询工资所需要的角色变化为总经理和部门经理也不需要修改授权代码，系统可扩展性强用户必须具有查询工资权限才可以查询员工工资信息等。

2024-02-26 17:03:10 1154

原创 6.3 认证授权模块 - 用户认证

写在auth工程中下面这篇文章和此处获取UserDetails对象的方式不同，可能是因为包不同的原因SpringSecurity - 基于数据库认证与授权在目前1.1.3所使用的security包中无法使用下面的代码@Component//注入，将来查询对象@Autowired/*** @param s 其实就是输入的username（账号）*/@Override// 1.根据username账号查询数据库// 因为账号是不可能重复的，直接selectOne即可。

2024-02-26 17:01:32 506

原创 6.2 认证授权模块 - 继承JWT、网关认证

2024-02-26 16:59:34 999

原创 6.1 认证授权模块

微信扫码认证，这是一种第三方认证的方式，这种认证方式是基于OAuth2协议实现OAUTH协议为用户资源的授权提供了一个安全的、开放而又简易的标准。同时，任何第三方都可以使用OAUTH认证服务，任何服务提供商都可以实现自身的OAUTH认证服务，因而OAUTH是开放的。业界提供了OAUTH的多种实现如PHP、JavaScript，Java，Ruby等各种语言开发包，大大节约了程序员的时间，因而OAUTH是简易的。

2024-02-26 16:57:45 497

原创 5.4 内容管理模块 - 课程搜索

全文检索是指计算机索引程序通过扫描文章中的每一个词，对每一个词建立一个索引，指明该词在文章中出现的次数和位置，当用户查询时，检索程序就根据事先建立的索引进行查找，并将查找的结果反馈给用户的检索方式。

2024-02-26 16:56:01 1045

原创 5.3 内容管理模块 - 课程发布、任务调度、页面静态化、熔断降级

消息SDK给我们提供的，也就是下面这几步SDK中唯一没有的就是抽象方法execute，也就是执行任务的逻辑没有，我们需要的是写一个类继承MessageProcessAbstract并实现execute方法，编写任务的具体执行逻辑/*** @description 消息处理抽象类*/@Slf4j@Data@Autowired/*** @param mqMessage 执行任务内容* @return boolean true:处理成功，false处理失败。

2024-01-21 20:10:45 1098

原创 5.2 内容管理模块 - 课程发布需求分析、分布式技术方案

首先理解什么是本地事务？平常我们在程序中通过spring去控制事务是利用数据库本身的事务特性来实现的，因此叫数据库事务，由于应用主要靠关系数据库来控制事务，此数据库只属于该应用，所以基于本应用自己的关系型数据库的事务又被称为本地事务。本地事务具有ACID四大特性，数据库事务在实现时会将一次事务涉及的所有操作全部纳入到一个不可分割的执行单元，该执行单元中的所有操作要么都成功，要么都失败，只要其中任一操作执行失败，都将导致整个事务的回滚。了解了本地事务之后再了解一下分布式事务如下所示，内容管理数据库、Redi

2024-01-21 20:08:05 1163

原创 5.1 内容管理模块 - 课程预览、提交审核

课程预览就是把课程的相关信息进行整合，在课程预览界面进行展示，课程预览界面与课程发布的课程详情界面一致客户可以通过课程预览页面查看信息是否存在问题如下课程预览的数据来源下图显示了整个课程预览的流程图说明如下：1、点击课程预览，通过Nginx、后台服务网关请求内容管理服务进行课程预览。2、内容管理服务查询课程相关信息进行整合，并通过模板引擎技术在服务端渲染生成页面，返回给浏览器。3、通过课程预览页面点击”马上学习“打开视频播放页面。4、视频播放页面通过Nginx请求后台服务网关，查询课程信息展示课程计划目录，

2024-01-15 22:30:56 1293

原创 2.1 iHRM人力资源 - 登录

开发环境：开发人员开发代码、测试的代码环境。此环境对代码的要求不是很高，可以随意更改，因为还不是面向真正的用户生产环境：也叫做正式环境，面向真实的用户下面我们就要实现下图流程中的“区分环境”模块怎么区分不同的环境？使用环境变量，有如下两个位置.env.development中设置开发环境变量默认 NODE_ENV 值为.env.production中设置生产环境变量默认 NODE_ENV 值为production。

2024-01-15 11:04:58 1686

原创 1.IHRM人力资源后台 - 项目搭建

我们只暴露两个属性说明我们项目的VUEX都放在modules模块中，而getters是向外暴露一些便捷的访问属性，并没有我们常见的state、mutation和action。在router目录index.js文件中地址对应组件，对应的组件就是路由器组件，在views目录中。我们将上面的图标进行使用的时候还需要借助一个组件，此组件已经将图标注册好了，图标就可以正常显示了。一个地址对应一个组件，但一个组件可能会对应多个地址。所以说我们的getters只是做了一个便捷访问，更便捷的访问模块中的属性。

2024-01-15 11:01:24 2230 1

原创 4.4 媒资管理模块 - 分布式任务处理介绍、视频处理技术方案

视频转码是指的对视频文件的编码格式进行转换视频上传成功需要对视频的格式进行转码处理，比如：avi转成mp4一般做文件存储的服务都需要对文件进行处理，例如对视频进行转码处理，可能由于文件量较大需要使用多线程等技术进行高效处理文件格式：是指.mp4、.avi、.rmvb等这些不同扩展名的视频文件的文件格式视频文件的内容主要包括视频和音频，其文件格式是按照一定的编码格式去编码，并且按照该文件所规定的封装格式将视频、音频、字幕等信息封装在一起，

2024-01-09 21:21:33 1669

原创 4.3 媒资管理模块 - Minio系统上传图片与视频

下面的内容其实是完成标红的地方做这一部分的时候可能发现course_base课程基本信息表和media_files表没有关联，那怎么将图片的url存放到course_base课程基本信息表中的pic字段呢？当上传完图片之后，会点击保存，这个时候就会对course_base表中的各种信息进行操作了但是我感觉没有很好的方法让course_base表。

2023-12-24 23:15:23 1702