匆匆那年

Vue同一路由跳转页面不刷新解决方案及注意事项之二

之前写过一个《Vue同一路由跳转页面不刷新解决方案及注意事项》，在这篇文章里面鞋到了怎么解决这个问题，具体内容可以点击查看，这里简单说一下，就是利用将时间戳传给路由的query，也就导致$route.fullPath不一样，然后配合key来解决。同时也提到了这样做的缺陷，缺点就是组件内的路有生命周期beforeRouteLeave不执行了，我们通常在这个周期里面做一些例如编辑文章时突然要跳走，可以来提示是否保存草稿的事情。 其实我们看官网可以发现其实Vue官方是在vue-rroute2.2版本中引入的 beforeRouteUpdate，这个钩子的。 还是在之前的代码中进行测试，我们从/goNext跳转到/goBack页面。 这时肯定没有问题，goNext里面的beforeRouteLeave周期是会执行的， beforeRouteUpdate是没有的。 现在我们从/goNext跳转到/goNext?ts=12123323232页面。 和之前测试的一样，beforeRouteLeave周期没有执行的， 但是beforeRouteUpdate执行了，我们之前需要的比如跳转前提示保存草稿场景中，我们原本写在beforeRouteLeave周期里面的代码就可以在beforeRouteUpdate再写一份了，这样的话就能达到保证给予跳转前提示的作用了，并且这两个钩子只会执行一个，这样我们也不用自行区分了，是不是很棒，感谢Vue官方。

By 匆匆那年, ago

项目Vue转成React hooks可能存在的问题–急需类似setState回调

假设在Vue中有如下三个方法，并且初始时this.a = ‘a’; this.b = ‘b’; funA() { this.a = '1221'; this.funB(); return this.funC(); }, funB() { this.a = this.a + '–'; }, funC() { return this.a + this.b; } 不要纠结于上面具体的写法，只是作为demo演示现有项目中很可能有类似这样的写法。 上面在调用funA后在Vue里面可能会得到1221-—b，那么在React中，应该是会返回ab吧，因为setState的值是异步更新的，在class组件写法里面我们可以用回调来保证自己拿到的state的值是设置为更新后的结果，在hooks中呢，并没有此回调。 问题来了，要将上面的vue代码用React Hooks怎么实现，我们依然期望是像在vue中一样funA() 稳定的返回 1221-—b 迁移技术栈的过程中，将vue的方法一对一改写成react方法肯定是业务风险最小的做法，一般情况下这样迁移没啥难度，还不会遗漏原有功能，但是我举例的这种场景vue中肯定有，需要怎么改成react hooks的写法实现类似的功能呢？

By 匆匆那年, ago

wangEditor输入中文后直接粘贴bug来了解compositionstart

昨天有人反馈邮件编辑过程中的一个报障，具体内容就是在编辑器中输入中文然后直接粘贴先前复制好的信息，然后出现了bug，比如之前复制了订单号“1234”，再输入“您的订单号”后直接粘贴，编辑器内显示的结果是“1234您的订单号”，这是不符合预期的，报障了给录屏信息，看的出其实是输入光标问题导致，点击编辑器内区域开始编辑时光标是落在最前方，也就是“您”字的前面，粘贴后实际上页面显示的光标是落在“号”字后面的，但是粘贴时确还是认为光标在“您”字前方，所以“1234”就落在了“您”的前面了，而不是大家预期的“号”后面。英文输入无此问题。 鉴于编辑器用的是wangEditor，我很自然的想到如果这个bug真的存在的，wangEditor多半也是有的，跑到官网看了下，并没有。邮件项目的web版也没有此bug，但是邮件项目其实是在壳里面的，公司老版的壳是QT，新版的是Electron版，目前新版还在灰度中，只有少部分人在使用，实测该问题在QT上存在，Electron版上没有。 中文输入法的问题很容易想到是不是要用compositionstart、compositionend和compositionupdate了，在此之前我们可以先看看wangEditor是记录当前光标的位置的。 javascript // 绑定事件 _bindEvent: function _bindEvent() { // 实时保存选取 this._saveRangeRealTime(); // 按回车建时的特殊处理 this._enterKeyHandle(); …. } // 实时保存选取 _saveRangeRealTime: function _saveRangeRealTime() { var editor = this.editor; var $textElem = editor.$textElem; // 保存当前的选区 function saveRange(e) { // 随时保存选区 editor.selection.saveRange(); // 更新按钮 ative 状态 editor.menus.changeActive(); } // 按键后保存 $textElem.on(‘keyup’, saveRange); Read more…

By 匆匆那年, ago

php发送请求，解决curl返回空白问题

自己对php不熟悉，参考了网上的的，自己做个记录吧。 function postUrl($url, $post_data){ $post_data = json_encode($post_data); $headerArray =array("Content-type:application/json", "Accept:application/json"); $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); /**配置返回信息**/ curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);//获取的信息以文件流的形式返回，不直接输出 curl_setopt($curl, CURLOPT_HEADER, 0);//不返回header部分 /**配置超时**/ curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 10);//连接前等待时间,0不等待 curl_setopt($curl, CURLOPT_TIMEOUT, 5);//连接后等待时间,0不等待。如下载mp3 /**配置页面重定向**/ curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);//跟踪爬取重定向页面 curl_setopt($curl, CURLOPT_MAXREDIRS, 10);//指定最多的HTTP重定向的数量 curl_setopt($curl, CURLOPT_AUTOREFERER, 1); // 自动设置Referer /**配置HEADER**/ curl_setopt($curl,CURLOPT_HTTPHEADER, $headerArray); curl_setopt($curl, CURLOPT_ENCODING, ""); // Accept-Encoding编码，支持"identity"/"deflate"/"gzip",空支持所有编码 Read more…

By 匆匆那年, ago

使用ssh拉取github代码

常规的下载github代码的方式有如下几种 直接以zip形式下载源码 以http(https)方式下载 以ssh方式下载 github-cli下载 这里主要讲的是第三种，怎么用ssh方式下载？ 使用主要好处是不用每次输入密码，及时github账号的账号密码变更了没事，当然前提是配置的公钥没有被删除。在公司上班的员工这一优势更加明显，因为一般公司都会强制要求三个月或者六个月换一次密码，密码换多了自己记着都费劲，用ssh就无此烦恼，一次配置终身受益。 一、怎么生成ssh的公钥私钥？ ed25519算法生成密钥 ssh-keygen -t ed25519 -C "email@example.com" RSA算法生成密钥 ssh-keygen -o -t rsa -b 4096 -C "email@example.com" 目前应该还是用rsa的居多吧。 默认密钥是保存在用户目录的.ssh目录下 私钥 ~/.ssh/id_rsa 公钥 ~/.ssh/id_rsa.pub 我习惯根据不同的用途来存储 我的github相关的是这样存储 私钥 ~/.ssh/github_rsa 公钥 ~/.ssh/github_rsa.pub 二、怎么配置github上的ssh 将我们的公钥，也就是 ~/.ssh/id_rsa.pub里面的内容复制存储在github上面 将ssh key交由ssh agent管理 ssh-add ~/.ssh/github_rsa 怎么查看ssh agent已经管理的ssh key了呢 ssh -l 后面我们就可以用ssh方式下载了 我们还可在配置文件中配置下信息 Read more…

By 匆匆那年, ago

el-form-item、a-form-model-item实现多个input、select关联校验

有时候我们有一个表单里面的表单项除了简单的校验，还有些之间的关联校验，比如两个数字型的最大值和最小值，我们还要校验最大值不能小于最小值。 el-form-item <el-form :model="dataForm" :rules="rules"> <el-form-item prop="number"> 最小值<el-input-number v-model="dataForm.min"></el-input-number> </el-form-item> <el-form-item prop="number"> 最大值<el-input-number v-model="dataForm.max"></el-input-number> </el-form-item> <el-form-item> <el-select v-model="dataForm.type" clearable> <el-option :value="1" label="第一个"></el-option> <el-option :value="2" label="第二个"></el-option> </el-select> </el-form-item> </el-form> 大家可以看到在最大值和最小值里面的prop上面写的时number，所以她们用的校验就是rules.number。所以现在我们就看看rules里面怎么写的。 export default { name: 'asyncValidate', data() { return { dataForm: { min: '', max: '', type: '', }, rules: { number: Read more…

By 匆匆那年, ago

对微内核的一点执念

自从知道了这个名词，咋一听觉得很神秘的，等看了网上的例子才发现其实没有那么高不可攀，等对自己周围主要产品的深入了解后发现这个思想原来在我们的周围很常见的，比如webpack，nginx等。 之前还写过一篇《以webpack为例来看微内核架构》 微内核系统一般分为两个部分——核心系统和插件系统，核心系统通过注册表感知插件信息。 在了解了几个微内核系统后，觉得很实用，很自然的就有想将这套理念运用到自己的项目中的想法，比如自己的web项目当中，但是按照自己的理解感觉这样可能并不可行，或者说就算强行实现的话可能也不纯粹。其中一个问题就是注册表怎么弄？微内核系统一般都是这样的，有个配置文件，除了配置系统参数外还会配置准备使用的插件，然后有一个“编译”过程，这个过程会读取配置文件，然后生成注册表，也就是说后续哪些插件可用在“编译后”就已经定型了。我们常规的web项目在运行时就已经是打包之后的，而哪些插件是否可用在当时打包时并不知道。要么就是我们推迟注册表的实现，具体怎么说呢？ 我们可以认为所有的插件都可用，但是不同用户的插件的差异性怎么体现呢？我们可以在进入web项目后就读取自己的配置，一般可能调用后台接口来获取不同用户的不同权限、插件信息，这种方式有些弊端： 实现不同用户操作行为时功能的差异性需要程序员根据写代码时自觉完成隔离。 想让插件间相互依赖比较困难，我们不太好有个遍历所需插件的过程。 我一直是想自己开发一个简易的微内核系统，个人认为只有自己开发一个才能更深刻的理解微内核的精髓。 比如做一个app，然后有一个插件市场，在里面可以选择安装各种插件，安装后就可以实现对应的功能，也可以尝试插件中的相互依赖使用，比如有一个订单系统，一个支付系统和一个通知系统，当启用了通知系统后，订单系统和支付系统的通知就可以通过通知系统来通知了，否则就走各个系统自己的通知流程。 上面只是自己想法的一部分，后面的后续会继续完善。

By 匆匆那年, ago

kotlin报错Unresolved reference: supportFragmentManager

最近自学到dialog出了点问题，卡在Unresolved reference: supportFragmentManager这个报错了。 在百度上搜了下，感觉没什么答案，出现这样的问题主要可能有两个原因 百度搜索问题的搜索关键词不合理 你遇到的问题其他人还没有遇到，要么就是你涉足的领域太深，其他人还没专研到这里，要么就是这个问题太过简单，根本就不算个问题。 说来惭愧，我这个问题属于过于简单的这种。。。 经过搜索问题的这段经历，我有点感触： android开发网上的搜索材料有点混乱，网上有的答案是java版的，几年前google已经将kotlin作为Android的第一语言了。网上很多答案给出的很多类、方法都已经过期了，看到被废弃的方法自然是让人感觉不爽的。 其实还是因为自己的基本功自学的不扎实。。。 我最后在stackoverflow找到了答案，虽然该提问的内容跟我的不完全一致，但是通过这个提问我还是收获到了我的答案。 我此时此刻get到关于kotlin的Activity的几个点。 这几个点可能不一定准啊，大牛勿喷 kotlin的Activity里面的很多“全局变量”用法其实是类似JavaScript的window.xxx可以直接用xxx一样。 比如我们可以使用Math.random()，或者window.Math.random()这样来使用。 所以上面截图的supportFragmentManager其实就是this.supportFragmentManager。 kotlin里面不推荐了使用类似java的getXXX和setXXX方法了，它喜欢将其作为属性.xxx来使用。所以获取this.supportFragmentManager属性的值可以认为是调用this.getSupportFragmentManager()。 getSupportFragmentManager其实FragmentActivity里面的方法，所以如果无法获取该方法是因为你的Activity不是继承自FragmentActivity的。 果不其然，我之前将自己的MainActivity继承自基类Activity了，而不是FragmentActivity或者常见的AppCompatActivity（继承自FragmentActivity），改一下就好了。

By 匆匆那年, ago

Android Studio报错Cause: dl.google.com:443 failed to respond

这虽然是一个老生常谈的问题了，但是昨天还是碰到了，还搞了半天。。。 我自己的电脑也是可以科学上网的，但是就是在用android studio开发android这里翻车了，gradle。。。 网上一般有这么几种解决方案 修改IDE的代理 改hosts文件 找个dl.google.com的ip 站长工具 172.217.24.78 dl.google.com PS: 我特意还找了可以ping通的ip来改hosts，但是还是不行 改gradle.properties文件 注释掉https相关的 #systemProp.https.proxyPort=1081 systemProp.http.proxyHost=127.0.0.1 #systemProp.https.proxyHost=127.0.0.1 systemProp.http.proxyPort=1081 用手机热点上网 奇葩吧。 宽带和手机流量不都是电信运营商的吗，区别在哪里呢？运营商？ 最后我也是搞了好久才搞定，用的是修改IDE的代理和用手机热点上网解决的。。。

By 匆匆那年, ago

华为HMS core SDK，返回错误码6003解决方案

最近想业余搞搞Android，所以就一边看android，一边看kotlin，第一个想了解和接入的SDK就是华为的HMS（对，支持国产）。 第一步想到的就是接入华为账号体系。 根据官网的提示对项目新建了如下工程Hello。 增加了HMS相关的东西： 在Hello/build.gradle // Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript { ext.kotlin_version = '1.3.41' repositories { google() jcenter() maven {url 'https://developer.huawei.com/repo/'} // HMS Core SDK } dependencies { classpath 'com.android.tools.build:gradle:3.5.3' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" // NOTE: Do not place your application dependencies Read more…

By 匆匆那年, ago