js/ts getElementById 和 getElementsByClassName 以及 querySelector 和 querySelectorAll的应用详解
本文内容主题为:介绍在某些需要获取dom元素的场景下,最常用的4个Api的使用细节。
js/ts 键值对相关的Record、Map, 以及"'相关易误解的map遍历'与'常识的forEach遍历'"的区别与详解
本文内容主题为:ts中键值对Record、Map的对比;以及遍历函数forEach与map的对比。并对各自的使用场景做出了自己的初步总结。
GORM中如何使用JSON的查询
前言对于数据库中的JSON类型的介绍, 请查看这篇文章。https://srackhall.top/2022/11/03/json-types-for-sqlite-and-postgresql/
使用
官方示例
其中类型datatypes.JSON实际上是gorm对go语言原生json.RawMessage类型的再封装, 并提供了一系列抽象方法。以便我们对相关数据库内的json做查询。
也就是说, 对于json的转换操作, 还是要在对应的语言端进行。只不过:
用JSON类型来存储’对象转JSON后字符串’
好处是, 可以利用sql提供的方法来单独获取json内某一字段。以及可以享受无需在前端执行JSON.stringify()的优势。
坏处是, 无法针对整体的json字符串做一些编码加密操作。
用Text类型来存储’对象转JSON后字符串’
好处是, 可以针对整体的json字符串做一些编码加密操作。(比如利用GORM提供的钩子函数)
坏处是, 无法使用sql提供的方法来单独获取json内的某一字段。 只能依赖读取整体json字符串文本, 然后在对应语言内转换为对应对象, 然后 ...
SQLite和PostgreSQL的json类型
JSON类型实际上也是文本类型在SQLite中,JSON类型的字段实际上被作为文本字段对待³。这意味着,SQLite将JSON数据存储为普通文本¹²。然而,尽管JSON数据在SQLite中被存储为文本,但你可以对定义为JSON的字段调用特定的函数,来实现JSON内容的增删改查³。
例如,SQLite提供了一系列的JSON函数和运算符,如json(), json_array(), json_object(), json_extract(), json_remove()等等¹²。这些函数和运算符可以让你在SQLite数据库中存储、操作和查询JSON数据¹²。
总的来说,虽然在存储方式上,SQLite的JSON类型和text类型没有区别,但在操作上,JSON类型提供了更多针对JSON格式数据的操作功能。这使得在SQLite中处理JSON数据变得更加方便和高效¹²³。
参考
SQLite使用JSON扩展_sqllite json 类型-CSDN博客
JSON Functions And Operators - SQLite
SQLite - JSON 函数和运算符 - Runebook.dev ...
将部分修改, 提交到历史中的某个提交(commit)中去, 但不想改变这个提交(commit)之后的历史记录
直接使用git rebase -i head^n并通过修改对应commit为e来对此提交进行修改。
可以在修改前, 先通过git add先将需要增加的部分修改添加到暂存区, 然后用git commit --amend --no-edit/git commit --amend将这部分提交添加到这个对应的commit中。
随后, 继续通过git rebase --continue来结束本次历史修改。
tips: 当然, 如果你是在开发过程中的最新修改中发现了某些修改实际上应该在历史中的某次提交中, 你可能需要先使用git stash 与 git stash apply 来配合使用。
请放心, git stash 只会记录修改部分的内容, 而不是最新的整个文件内容。 因此, 您不必担心这么做, 会带来与特定阶段不应该有的修改内容(不会改变这个提交(commit)之后的历史记录)。
也就是说即使你是在最新的开发状态下使用的git stash, 但只要这部分修改的原始内容, 与 要修改的那次commit完全重合, 没有冲突, 就完全没有任何问题。
因为git stash在使用时, ...
介绍一些开源的设计软件
前言对于非专业人士, 无需使用臃肿的主流设计软件, 反而使用一些开源但不失强大的设计软件, 是比较好的选择。
2d相关
Gimp
图片处理能力上最为突出, 同时支持图片绘制<但这方面不如Ps和Krita>, 但不支持矢量图绘制。
官网: https://www.gimp.org/
源码地址: https://gitlab.gnome.org/GNOME/gimp
GitHup源码镜像: https://github.com/GNOME/gimp
Inkscape
主要用于矢量图形绘制。 可平替Ai这个矢量图工具。
官网: https://inkscape.org/
源码地址: https://gitlab.com/inkscape/inkscape
GitHup源码镜像: https://github.com/inkscape/inkscape
Krita
首先是图片绘制或者说是绘画(此方面甚至比Ps更强), 其次才是图片处理(图片处理能力弱于Ps和Gimp), 支持矢量图绘制(矢量图绘制方面用习惯了还会, 不然不如Inkscape)。
官网 ...
RESTful Web API 设计
前言对应软件客户端与服务端的通信, 大多公司有自己的自定义RPC协议, 通用的如GRPC近几年更是受到了广泛的追捧。
但是, 对于web领域, 由于HTTP的原因, 浏览器是无法实现完整的低损耗RPC协议通信的, 一切几乎都要建立在HTTP之上。
即使HTTP2.0已经出现很久的今天, 即使GRPC也是按照HTTP2.0来实现的如今, 在web领域, 依旧是无法完整的使用GRPC的。
因此RESTful作为web领域唯一的最广泛应用的协议, 仍旧是具有无可替代和无可撼动的地位的。
此篇, 就是为了简单说明RESTful Web API 在设计过程中, 应该遵循的基本规则以及设计技巧。
基本规则状态码
响应体
基本设计原则
这里不对默认200的API设计做介绍。
GET 方法成功的 GET 方法通常返回 HTTP 状态代码 200(正常)。 如果找不到资源,该方法应返回 404(未找到)。
如果请求已完成,但 HTTP 响应中没有包含响应正文,则应返回 HTTP 状态代码 204(无内容);例如,不产生匹配项的搜索操作可能会通过此行为实现。
POST 方法如果 POST 方法创 ...
axios错误处理
axios错误处理中常用的字段
error.response:当请求已经发出,并且服务器返回了一个非 2xx 的状态码时,可以通过 error.response 获取到错误的详细信息。
error.request:当请求已经发出,但没有收到任何响应时,可以通过 error.request 获取到请求的详细信息。
error.message:当在设置请求时发生错误(例如,无效的 URL)时,可以通过 error.message 获取到错误的消息。
除此之外, 如果你希望进行更精细的错误处理,你可以考虑以下几个方面:
区分服务器错误和客户端错误:你可以根据 error.response.status 的值来区分服务器错误(5xx)和客户端错误(4xx)。例如,如果 error.response.status 是 404,那么说明请求的资源不存在;如果 error.response.status 是 500,那么说明服务器内部出错。
处理网络错误:如果 error.request 存在但 error.response 不存在,那么说明请求已经发出,但没有收到响应。这可能是因为网络错误或者 ...
js/ts 异步、async和await、错误处理以及Event Loop事件循环机制的综合解读
本文已同步至同名 微信公众平台 以及同名 掘金平台 。 由于本站不做SEO, 故可通过前往平台阅读以达到推荐此文的目的。
前言本文为本人最近在学习前端过程中遇到问题后,结合已有文章转载+整理后的回答方案,参考文章及作者在文末标明。
如果您也是想尝试学习使用下前端技术的服务端工程师, 千万不要像我似的先入为主的把前端的异步概念当作并发哈哈。
因为前端编程中的异步概念, 更类似于我们c语言编程中使用的epoll这种IO多路复用的轮询机制,同样类似go语言中的用来轮询通道(channel)的select之类的概念。
那么接下来,和我一起跟着本文有浅入沉的交流学习下,前端编程中的异步及其运行机制吧。
async和await 概念先从字面意思来理解。async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。
另外还有一个很有意思的语法规定,await 只能出现在 async 函数中。然后细心的朋友会产生一个疑问,如果 await 只能出现在 as ...
display:flex 属性
flex简要概念display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。
Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度(和排列顺序),从而能够最好地填充可用空间(主要是为了适应所有类型的显示设备和屏幕尺寸)。flex布容器能够放大子元素使之尽可能填充可用空间,也可以收缩子元素使之不溢出
display:flex
加入”display:flex”语句后, 默认值为水平从左往右排列布局如图所示
可在父项添加的其他相关属性值flex-direction:布局的排列方向 (主轴排列方向)
row 默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。(1 2 3 4)
row-reverse 显示为行。但方向和row属性值是反的(4 3 2 1)
column 显示为列
column-reverse 显示为列。但方向和column属性值是反的
flex-wrap:是否进行换行处理
nowra ...

.png)