ubuntu 16.04/macOS Big Sur(11.4)编译Quasar

注意,目前(2020/07/05)发现,在macOS Big Sur(11.4)版本上,dev 分支没办法编译通过。

目前(2020/07/20)发现,在macOS Big Sur(11.4)系统,quasar 2.0.3/1.15.23 版本已经可以编译通过,开发分支经常编译不通过,这部分经常发生较大变动。

参考链接


macOS Big Sur(11.4)安装指定版本Node

参考链接


macOS Big Sur(11.4)编译vuelidate 2.x适配Vue 3.x

目前,vuelidate 2.x暂时还没发布正式版本,而如果需要适配Vue 3.x,则需要自己编译,编译过程如下:

移动端 JS 引擎哪家强

在一般的移动端开发场景中,每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的。但是市场瞬息万变,Native 语言在开发效率上存在一定不足,并且从APP版本更新应用市场审核发布再到用户下载更新,总会存在一定的时间差,这样就导致新的功能无法及时覆盖全量用户。

为了解决这个问题,开发者们一般会在项目里引入一门脚本语言,提速APP的研发流程。在移动端应用比较广泛的脚本语言有 LuaJavaScript,前者在游戏领域用的比较多,后者在应用领域用的比较多。本篇文章主要是想探讨一下移动双端(iOS & Android)的JavaScript引擎选型。由于个人水平有限,文章总会有遗漏和不足的地方,还请各位大佬多多指教。

JS 引擎选型要点

JavaScript作为世界上最热门的脚本语言,有着非常多的引擎实现:有Apple御用的 JavaScriptCore,有性能最强劲的V8,还有最近热度很高的QuickJS......如何从这些JS引擎里选出最适合的?我个人认为要有几个考量:

  • 性能:这个没话说,肯定是越快越好
  • 体积JS引擎会增加一定的包体积
  • 内存占用:内存占用越少越好
  • JavaScript 语法支持程度:支持的新语法越多越好
  • 调试的便捷性:是否直接支持debug?还是需要自己编译实现调试工具链
  • 应用市场平台规范:主要是iOS平台,平台禁止应用集成带JIT功能的虚拟机

比较麻烦的是,上面的几个点都不是互相独立的,比如说开启JITV8引擎,性能肯定是最好的,但它引擎体积就很大,内存占用也很高;在包体积上很占优势的QuickJS,由于没有JIT加持,和有JIT的引擎比起来平均会有5-10倍的性能差距。

下面我会综合刚刚提到的几个点,并选择了JavaScriptCoreV8HermesQuickJS4JSVM,说说它们的优点和特点,再谈谈他们的不足。

继续阅读移动端 JS 引擎哪家强

Qussar QScrollArea动态适配View高度

我们在使用Qussar QScrollArea等控件的时候,很多情况下,必须给出一个固定的高度,否则控件的高度会变成 0,导致无法显示出来。如何动态适配View高度呢? 参考如下:

或者类似下面的情况:

参考链接


Thymeleaf公共css,js提取及自有css,js导入

之前参考网上的各种方法,均为达到期望的效果,于是到Thymeleaf 官网逛了下,找到官网的例子来实现了: 

直接上栗子:

一般页面调用公有CSS,并使用自己的CSS:

公有js的提取方式是一样的:

公有JS的使用包一层DIV即可:

测试结果可用,具体解释请参考Thymeleaf官方文档

注意,上述的配置在引入的是,会多出来一个DIV标签,如果想去掉这个标签,可以使用如下方式声明以及引用

公有JS的使用包一层th:block即可:

另外如果使用的SpringBoot版本是1.5.4,默认的thymeleaf不是3.0版本,上面的测试需要thymeleaf 3.0版本才可以,需要修改下pom.xml文件,添加以下配置即可:

另外如果使用的SpringBoot版本是2.5.0,则不需要任何修改,直接可以生效。

参考链接


thymeleaf与vue结合使用时,vue如何取模板里的值

@clickVUE里绑定的点击事件,此时事件存在于thymeleaf的循环th:each下的元素,getCourses()vue里的方法属于js,但是需要取到模板里产生的值<年级id>

此时可以用th:v-on:"| |" 或者th:@click="| |" 简单来说就是将前端的方法当作字符串拼接起来,前面加th:就能解析${grade.id} 的值

同理,绑定class用于样式也能如此

参考链接


thymeleaf 与 vue 结合使用时,vue如何取模板里的值

Vue axios 发送 FormData 请求

一、简介
axios 默认是 Payload 格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换。

Payload 和 Form Data 的主要设置是根据请求头的 Content-Type 的值来的:

Payload:

Form Data:

上面三种 Content-Type 值介绍

application/json 和 application/x-www-form-urlencoded 都是表单数据发送时的编码类型。

form 的 enctype 属性为编码方式,常用有两种:application/x-www-form-urlencoded 和multipart/form-data,默认为 application/x-www-form-urlencoded。

当 action 为 get 时候,浏览器用 x-www-form-urlencoded 的编码方式把 form 数据转换成一个字串(name1=value1&name2=value2...),然后把这个字串 append 到 url 后面,用 ?分割,加载这个新的 url。

当 action 为 post 时候,浏览器把 form 数据封装到 http body 中,然后发送到 server。

如果没有 type=file 的控件,用默认的 application/x-www-form-urlencoded 就可以了。

但是如果有 type=file 的话,就要用到 multipart/form-data 了。浏览器会把整个表单以控件为单位分割,并为每个部分加上 Content-Disposition(form-data或者file)、Content-Type(默认为text/plain)、name(控件name) 等信息,并加上分割符 (boundary)。

二、发送 formdata 请求(下面有这几种方式格式化参的数据样本,用于参考比较,看需求选择方式)
方式一,自己封装一个格式化函数:

方式二,使用 qs 组件,但是 qs 格式化会过滤空数组数据:

方式三,数组会被转换成字符串(这种不是特殊情况一般不会使用上)

三、上面方式,参数格式化之后:
方式一 格式化出来的数据:

方式二 格式化出来的数据:

方式三 格式化出来的数据:

参考链接


Vue axios 发送 FormData 请求

解决Uncaught (in promise) Error: Navigation cancelled from “/...“ to “/...“ with a new navigation.

解决

这个错误是vue-router内部错误,没有进行catch处理,导致的编程式导航跳转问题,往同一地址跳转,或者在跳转的 mounted/activated 等函数中再次向其他地址跳转会报错。

pushreplace都会导致这个情况的发生

解决方法为在路由中进行如下配置:

参考链接