m0_51431448的博客

消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。

vue动态传递不确定个数的参数到子组件这个还是经常用的，动态绑定不确定个数的事件就不太常用了，写这篇也是因为自己没有好好看官方文档，所以来记录一下。下面的代码示例就采用vue2了，vue3也是一样的。相信大家对vue的父传子已经很熟悉了。假设子组件接受下面三个参数：那我们父组件可以单独传递：也可以一块儿通过v-bind直接传递整个对象，相当于将对象中的进行结构全部传递，官网也有写：https://cn.vuejs.org/api/built-in-directives.html#v-bind

目前monaco-editor内置有61种语言，但是只对css、html、json、typescript 支持的，功能也比较全。我们要是使用其他的语言比如javascript、java、sql等可能会报错，使用上面内置的四种语言之外的其他语言就需要我们自己定制、扩展了。如果有更多的可以自行扩展，monaco-editor中也都有对应语言的提示的自带的包，也可以自己编写逻辑哈。但是没考虑到语言的问题。我这边写了最常用的javascript、java、sql基础扩展支持。

一直用webpack打包用了好几年了，但其实只了解大概的配置意思，并没有仔细、深入去学习。那闲来无聊，就简单的浅浅学了一下webpack，这篇也来记录一下。本质上，是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。webpack打包的内容主要是要用webpack首先需要安装一下吧，webpack是基于。

平时开发的时候，我们用到图片基本都是ui给到我们的、或者是从PS、蓝湖或者慕客上面切图导出来的图片，这些都是未经过压缩的，体积都比较大，这里就有了可优化空间

由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。

我们会发现这低代码平台的模样大致的布局都大差不差，就是左中右布局，左边是一些供拖拽(点击)的基础组件，中间为画板、右边为属性配置，当然具体还得具体看，但整体大致上都是这样的布局。这篇说下关于实现低代码、零代码自己的思路、想法吧。最后再给大家推荐一下自己做的两个低代码、零代码项目，一个是快速生成大屏的、另一个是希望快速生成h5页面，希望能用在uniapp。当然这些说起来容易，思路也清楚，但是真正做起来，真的很复杂，工作量很大，也会碰到各种各样的难点，更会碰到平时开发业务中根本碰不到的棘手的问题。

之前写了一篇vue3使用monaco-editor的博文（），vue3中使用过程很顺利，没发现什么问题。但是在vue2中使用碰到一些坑。不过最后总算是搞出来能用了。首先跟vue3一样，安装monaco-editor、monaco-editor-webpack-plugin这两个插件。vue3里面呢直接安装最新的就行了，但是在vue2中对版本有要求，不能太高了，经过最后的测试，

我们在给子组件传递数据的时候，也就是父传子，一般写在props中， 其实也可以写在attrs中，如果写在attrs中，我们也可以在子组件中props中接受attrs中的变量，如果props中没写的变量都会在attrs中，我们在组件中通过this.$attrs中可以拿到。先使用render函数封装一个组件，注意写了render函数就不要写template了，不然render函数不起作用。这是加载组件G1，注意：我们加载的组件一定是引入、注册之后的，我这里全局注册了，来创建你的 HTML。

简单说一下吧，最近做了十来天的的openlayers，然后稍微研究了一下，这里总结并做了一些示例给大家分享一下，应该是相对常用的一部分吧，由于做的时间比较短，这里写了十来个示例了，有实际项目用到的，也有自己想实现的，根据官网的示例改编总结之后的。虽然只有十几个示例，但是代码量还是很大，所以代码就不在这里贴了，我都写在了Gitee上，大家可以拉下来看源码，每个示例都是单独来写，一个组件一个示例（公用的部分抽离了），相对简洁明了。然后看下目前已经做了的示例吧！

vue集成openlayers，加载天地图

我这个是直接通过传入dom生产的sheet页，也可以通过数据生成sheet页，xlsx都有对应的方法，其实不影响我们修改样式。主要关注addRangeBorder(给合并行列赋值样式)、setExcelStyle(设置导出Excel样式)这两个方法。由于上次写的修改样式只关注了单元格的宽度，并没有设置颜色以及没关注到合并的单元格部分样式没设置上等问题，所以这篇来说下。我们通过xlsx可以通过dom元素、或者数据来生产sheet页，然后我们修改样式就操作对应的sheet页就可以了。

说一下easyplayer在vue2中的使用，vue3中没测试，估计应该差不多，大家可自行验证。然后在public/index.html下再引入即可。看到报错不要慌，大家跟着我处理。习惯性将其封装为单独的组件。会发现控制台有下面报错。

我们想要实现一个简洁版的Mini-Vue框架，应该包含三个模块：分别是：渲染系统模块、可响应式系统模块、应用程序入库模块。这篇就来写一下渲染系统模块。剩下两个模块后面有时间再更新。vue渲染系统实现，应该包含三个功能，分别是：① h函数，用于返回一个VNode对象；② mount函数，用于将VNode转为真实dom，并挂载到DOM上；③ patch函数，类似于diff算法，用于对比两个VNode，决定如何处理新的VNode虚拟dom本身其实就是个javascript对象。

这两天刚看到一个需求，简单描述一下，就是我们拿到一个pdf文件流（文件流可以是后端返回的，也可以是从自己本地选的）和一个url链接 ，现在要将url链接生成二维码，并将这个二维码添加到这个pdf文件中，然后再预览或者下载这个pdf文件。灵感出自于我之前写过一篇。

这两天刚做了个新需求，要做个系统锁屏（当然锁的是当前的系统），就类似于电脑锁屏似的。共两种情况下锁屏，一种是无操作一定时间后自动锁屏；第二种是可以按下组合键（快捷键）主动进行锁屏。下面具体来说一下该需求的想法、思路以及实现

展开行在el-table中以及提供了，使用也很简单，不过就是它只能点击左侧箭头icon来控制展开收缩，我这里是点击行的就要展开收缩。所以还需要借助 row-click和expand-change结合（因为点击icon的时候不会触发row-click），然后展开的时候就得通过设置expand-row-keys这个来控制收缩，注意使用这个必须要设置row-key

这个是在若依框架无意中发现的一个下拉树通用组件。@riophae/vue-treeselect 是一个基于 Vue.js 的树形选择器组件，可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能，可以自定义选项的样式和模板。该组件易于使用和扩展，适用于各种类型的项目。部分注释百度翻译成中文了，但太多了，懒得挨个翻译了，直接看也大概知道啥意思。下面是我测试的一个例子，一般的需求应该足够了。使用自己习惯使用的包管理器安装就可以了。字体样式简单调了一下。

这就是个模糊查询，我们平常做的都是直接输入汉字去把对应的值过滤出来，但我还真是第一次通过拼音去查询（当然不只是拼音，汉字也是可以的），以前还真没注意这个。唉，这可咋搞，我怎么知道某个汉字（字符串）的拼音的首字母是什么呢？正当我愁眉苦脸的时候，哎，一个库被我发现了，hhhhh~。就是pinyin-match。下面介绍该包的使用，这个包也不大，四百多kb。蛮高效的。下面介绍一下该库的使用。

刚找到三个兄弟库，分别是预览word、Excel、pdf文档的，用着很好用，但是word这个好像是有点儿bug但还不确定，因为有的能加载出来有的加载不出来，还需要验证。

这次项目中又要预览pdf了，要求还要加水印，做的时候又发现了一种预览pdf的方式，这种方式我觉的更好一些，并且还有个要求就是添加水印，当然水印后端也是可以加的，但是后端说了一堆...反正就是要让前端做，在我看来就是借口、不想做，最近也不忙，那我就给他搞出来好了。下面来介绍一下。

最终方案就是在uniapp中获取那一大串儿json，然后传递到webview页面进行渲染，然后提交表单的时候再通知webview页面（Vue页面）将表单json再传递给uniapp进行提交。所以就涉及到了uniapp与webview之间的通信问题，接下来介绍：

我们经常可以看到一些网站都会有类似的 暗黑模式/白天模式 的主题颜色切换功能，效果很炫酷，或许我们在平时的开发中也会有类似这样的功能实现，这里先提供一个思路，就是使用CSS变量 +类名切换

一般在数据可视化项目中经常会看到无缝滚动的表格，即轮播表，我们可以使用 vue-seamless-scroll 来实现，使用起来也很方便。

之前写过一篇预览pdf的，，大家按需所用一般项目中在上传文件之前可能会有 先预览一下，看是否符合要求，符合再上传，这里先说了pdf文件，使用pdfobject库，也很方便。

vxe-table是对element-ui进行了二次封装，基本样式也做了调整，并且把导出、打印等功能也集成进去了，这篇就介绍一下vxe-table的基本使用，其实和el-table差不多，使用起来基本一样。

这里介绍一个插件（vue-print-nb），蛮好用的，用起来很方便，所以想记录一下。

不知道怎么描述这个东西了。el-select下拉框大家都知道，但是下拉框只能选择一个，而且如果数据太多的话也不太容易选择，所以这里就是封装了组件包含对应的弹窗，就是能实现多选，而且列表也是分页展示的，选择完之后将对应的名称展示在文本框中，传给后端对应的用逗号隔开（用什么隔开都可以，跟后端商量）的id。这个关联合同就是我们封装的，输入框添加了disabled，不可编辑的，只能通过点击右侧弹窗来进行选择。

我将 签名画板单独封装为一个组件，在需要的地方引入即可，注意要给外层容器一个宽高，该组件默认为宽高都为100%

async 如果不加 try/catch 会发生什么呢？下面让我们看个例子导致浏览器报错：一个未捕获的错误，并且下面的代码不执行那么在开发过程中，为了保证系统、代码的健壮性，或是为了捕获异步的错误，需要频繁的在async函数中添加 try/catch，避免出现上述示例的情况但是程序猿是越来越懒的，不想一个个加，懒惰是我们进步。

当我们第一次选择完使用什么包管理器的时候，就会默认在我们电脑的C:\Users\xxx下生成一个.vuerc的文件，这个文件里面就记录着我们使用脚手架创建项目的时候，做的一些选择，都会在这里记录

Echarts-3D地球。这里把实现地球的代码单独抽离为一个组件，在需要用到的地方引入就可以，传入一个id

然后开始的时候我是用 element-ui中的el-table试试的，结果合并的时候，我发现数据都乱了，列行的对不上号了，就给我搞的有点儿烦，有点儿整不下去了后来我就用的原生的table，一个个写出来，这法子确实有点儿笨，写的也很多，但是好处就是能实现。。。另外还比较灵活，可以任意自定义操作每个单元格，所以就用了原生table

先说下我项目中的需求，就是要自己绘制出一个我们想要的图，组态化呈现出来，然后这个图中会有很多节点，每个节点都会有自己的状态，状态会实时改变，状态变化的时候，对应的节点标签颜色等都要跟随变化。那么我们该用什么绘制呢，绘制出来还要符合我们的业务需求，说白了就是要很灵活，想改什么，想用什么节点（自定义图片等），想绑定什么属性等等，我们都可以很灵活的实现。所以就基于AntV X6 来实现这么个事儿。

其实实现懒加载的方式有很多了，现在也有很多插件（比如：vue-lazyload等），element-ui库中也有图片懒加载的方式，所以大家根据自己的喜欢选择就可以了

当我们收缩菜单的时候，中间的dataV边框并没有自适应容器，展开的时候又超出了容器的宽度，所以bug就来了，为了解决百度找了好多资料，但基本上都是说使用组件内部的initWH方法重置组件的宽高，官网也确实有说

首先是布局，这就是个很经典的后台管理系统的容器页面，这里分为上下结构，上面一般放些系统logo、登录的用户信息，还有一些小功能等等。然后下面又分为左右结构，左边就是我们的导航菜单，右边那一块儿是我们将来所有的业务页面存放的地方

npm run serve启动项目之后，在network中会自动持续发送 /sockjs-node/info?t= 请求（vue/cli5是目前最新的版本，绝大多数项目都是在vue/cli5版本以下搭建的，通过vue/cli5搭建的项目没有该接口，应该有其他替换），那么这个请求有什么用呢？

在实际项目中肯定少不了的增删改查中，前端表单有时候必须校验一些规则，比如必须输入电话号码、必须是数字、必须输入真实身份证号、必须输入整数且大于0等等等等，太多了，所以这里就列一下常用的自定义校验规则。然后我们想在element-ui中的el-form表单中使用上面的规则，为了方便使用可以再建一个validator.js，这个文件就是在el-form-item上的rules自定义做校验使用的回调方法。为了方便使用，我们可以 第二个js文件（validator.js）中的函数挂载在Vue的原型上，拱全局使用。.

当我们项目开发到后期的时候，可能就要谈及到去优化下项目了，比如经常碰见的：打包体积过大，首屏加载太慢，还有性能的问题，这其实跟我们平时开发的时候息息相关，代码写的怎么样还得是看个人了...