[2020-04-29]mysql groupBy 查询获取最新的一条记录
[2020-04-22]使用正则表达式工具
[2020-04-21]moment 使用 startOf 和 endOf 获取相同的值
[2020-04-20]使用 postman 调试 egg 服务接口时绕过 csrftoken 检查
[2020-04-20]ts 转 js 时, 部分文件首字母大小写错误
[2020-04-20]moment 实现后端常用的日期类型参数检查
[2020-04-14]typescript 重写类型声明文件中定义的 interface 属性类型
[2020-04-08]svg 转 font 使用时, 显示混乱或修改颜色时只有部分路径生效
[2020-04-03]使用 vue-class-component 定义 vue 组件时, 当 data 数据中初始值为 undefined 时, 对应属性无法正常运作
[2020-04-02]typeorm 连接 mysql 8.0 报错 Client does not support authentication protocol requested by server;

[2020-04-29]mysql groupBy 查询获取最新的一条记录

注意: 以下解决方案仅做记录, 由于本人目前水平有限, 用这样的查询怕会出问题所以并没有直接使用

以下解决方案来自 stackoverflow

SELECT p1.postid
FROM Posts p1 LEFT JOIN posts p2
  ON (p1.owneruserid = p2.owneruserid AND p1.postid < p2.postid)
WHERE p2.postid IS NULL AND p1.owneruserid = 20860;

1 row in set (0.28 sec)

[2020-04-22]使用正则表达式工具

https://regexr.com/

https://jex.im/regulex/

[2020-04-21]moment 使用 startOf 和 endOf 获取相同的值

const day = moment(date);
const dayBgn = day.startOf('day');
const dayEnd = day.startOf('day');

console.log(dayBgn === dayEnd); // true

这里比较下两个值其实就可以知道, 其实 startOf 和 dayEnd 两个方法是改变了 day 的值并返回

所以上面例子中 day 和 dayBgn 和 dayEnd 其实都是同一个引用

不确定 moment 有多少个 api 都是这种模式, 之前以为都是返回一个新的 moment 对象, 以后使用 moment 要更加注意这个问题才行

正确的用法如下

const dayBgn = moment(date).startOf('day');
const dayEnd = moment(date).startOf('day');

console.log(dayBgn === dayEnd); // false

[2020-04-20]使用 postman 调试 egg 服务接口时绕过 csrftoken 检查

其实比较方便的做法是直接关掉 csrftoken 的检查, 但是要在联调阶段关掉重启重启还是比较麻烦的, 又要保证其他接口功能完整性, 也要在本地可以调试问题接口

方法来自 https://duola8789.github.io/2019/05/05/05%20%E5%85%A8%E6%A0%88%E5%BC%80%E5%8F%91/03%20Egg/Egg02%20%E4%BD%BF%E7%94%A8Postman%E5%8F%91%E9%80%81Post%E8%AF%B7%E6%B1%82/

感谢博主的整理, 这里搬运文字只是做一下记录, 如果有疑问可以看原文, 有图比较详细

使用Postman来测试API时，直接发送POST请求，会返回403，因为没有传递CSRF token，这个时候可以通过环境配置，来让Postman自动生成CSRF token。

这个功能需要使用独立的Postman APP，Chrome插件是不行的。

在Postman右上角，新建一个环境：

postman1.png

点击Add添加后，将环境切换为新建的环境：

postman2.png

然后在Tests标签下，通过下面的脚本，获取cookie中的csfrtoken，并且写入到postman的全局变量中：

var csrf_token = postman.getResponseCookie("csrftoken").value
postman.clearGlobalVariable("csrftoken");
postman.setGlobalVariable("csrftoken", csrf_token);
然后发送一个Get请求，来写入Cookie：

postman3.png

在发送Post请求时，在Header中添加字段：

postman4.png

再点击发送Post请求就没问题了。

[2020-04-20]ts 转 js 时, 部分文件首字母大小写错误

小伙伴把 ts 文件编译成 js 文件时, 发现有的 ts 首字母是小写字母, 但是编译过后的 js 文件却变成大写字母了

定位后发现, 原来是其中一个引用该 ts 文件的地方写错了, 奇怪的在引用时写错大小写没有报错

|- a.ts
|- b.ts

import a from 'A.ts'

[2020-04-20]moment 实现后端常用的日期类型参数检查

• 格式检查

后端接口检查参数, 对于日期参数限定格式为 YYYY-MM-DD, 在检查日期合法的同时, 也需要检查格式是否符合预期

简单用 moment 的 api 来实现

moment(date, 'YYYY-MM-DD').format('YYYY-MM-DD') === date

• 日期大小检查

日期 A 是不是早于/晚于日期 B

moment('2010-10-20').isBefore('2010-10-21');

[2020-04-14]typescript 重写类型声明文件中定义的 interface 属性类型

解决方案来自 https://stackoverflow.com/questions/41285211/overriding-interface-property-type-defined-in-typescript-d-ts-file

// type
interface A {
    x: string
}

export type B = Omit<A, 'x'> & { x: number };

// interface

interface A {
    x: string
}

interface B extends Omit<A, 'x'> {
  x: number
}

[2020-04-08]svg 转 font 使用时, 显示混乱或修改颜色时只有部分路径生效

在 iconmoon 上也能找到相关说明

原因是 svg 中并不是所有的元素都是 fill 方式填充的形状

我对 svg 了解甚少, 目前看来好像必须要把 Stroke 和 Text 一类的都转化成 Fill 才行

<g>
    <g>
        <circle stroke="#002300"></circle> <!-- 这里的元素在处理成 font 时可能会导致显示混乱 -->
        <path fill="#002300"></path>
        <path fill="#002300"></path>
    </g>
</g>

目前我是用 Sketch 来处理有问题的 svg, 只需要选中对应形状, 然后再图层(Layer)菜单选择轮廓化(Convert to Outlines), 然后导出处理过后的 svg 即可

如果你使用的是其他工具编辑 svg, 可以参考下对应的 iconmoon 文档的说明

Converting Strokes & Text to Fills
The current version of the IcoMoon app ignores strokes when generating fonts or CSH files. But you can convert strokes to fills in different vector editing programs:

Adobe Illustrator
Select the shapes that you want to convert and then choose Object → Expand. You might need to choose Object → Expand Appearance before you can apply Object → Expand.

Ink Scape
Select the shapes that you want to convert and then choose Path → Stroke to Path.

Sketch
Select the shapes that you want to convert and choose Layer → Convert to Outlines

[2020-04-03]使用 vue-class-component 定义 vue 组件时, 当 data 数据中初始值为 undefined 时, 对应属性无法正常运作

问题复现如下

export default class Foo extends Vue {
  foo: string | undefined = undefined;

  bar: string | undefined = "123";
}

使用 vue devtool 观察结果如下

可以看出 foo 属性没有被正确处理

小伙伴找到这个 issue

看讨论来看这个 feature 而不是 bug - -!

按 issue 上的讨论来进行修改

export default class Foo extends Vue {
  data() {
    return {
      foo: undefined,
    };
  }

  bar: string | undefined = "123";
}

使用 vue devtool 观察结果如下, foo 属性没有被正确处理

不过这样改并不完善, 原因是使用 data hook 来初始化的属性, 并不能被 typescript 识别并处理, 当你使用改属性的时候会报错

export default class Foo extends Vue {
  data() {
    return {
      foo: undefined,
    };
  }

  bar: string | undefined = "123";

  test(): void {
    console.log(this.foo); // 这里会报错找不到 foo 属性
  }
}

最终处理如下, 不过的确有点难看

export default class Foo extends Vue {
  data() {
    return {
      foo: undefined,
    };
  }

  foo: string | undefined = undefined;

  bar: string | undefined = "123";

  test(): void {
    console.log(this.foo); // 不会报错
  }
}

[2020-04-02]typeorm 连接 mysql 8.0 报错 Client does not support authentication protocol requested by server;

使用 typeorm 连接 mysql 8.0 时, 会报错连不上, 原因大致是 目前 nodejs 的 mysql 的模块不支持 mysql 8.0 的默认的加密认证方式 (这里后续还需研究)

在 stackoverflow 上找到了解决方案, 直接上连接 https://stackoverflow.com/questions/50093144/mysql-8-0-client-does-not-support-authentication-protocol-requested-by-server

这里也直接贴下回答方便自己回答

Execute the following query in MYSQL Workbench

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'

Where root as your user localhost as your URL and password as your password

Then run this query to refresh privileges:

flush privileges;

Try connecting using node after you do so.

If that doesn't work, try it without @'localhost' part.