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都会导致这个情况的发生

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

参考链接


Tab切换以及缓存页面处理的几种方式

前言

相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。

1.如何切换

  1. 使用动态组件,相信大家都能看懂(部分代码省略)

    注:这个多用于单页下的几个子模块使用,一般切换比较多使用下面的路由

  2. 使用路由(这个就是配置路由的问题了,不作赘述)

2.动态生成tab

一般UI框架给我们的tab切换都像是上面的那种,需要自己写入几个tab页之类的配置。但是我们如果想要通过点击左边的目录来生成一个tab页并且可以随时关闭呢(如下图)?

只需要给路由一个点击事件,把你的路由地址保存到一个列表,渲染成另一个平铺的tab目录即可

假设你的布局是这样,左边的目录,上边的tab,有字的是页面

以上代码并非实际代码,只提供一个大概的思路。至于addToTabListdeleteTab怎么做就是数组方法的简单pushsplice操作了。为了效果好看,我们可能还需要一些tabactive样式,这里不作演示。

3.缓存组件

仅仅是做tab切换,远远是不够的,毕竟大家想要tab页就是要来回切换操作,我们需要保存他在不同tab里操作的进度,比如说填写的表单信息,或者已经查询好的数据列表等。
那么我们要怎么缓存组件呢?
只需要用到vue中的keep-alive组件

3.1 keep-alive

  • <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
  • <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
  • <keep-alive> 与 <transition>相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-alive 。

注:不能使用keep-alive来缓存固定组件,会无效

3.2 使用

3.2.1 老版本vue 2.1之前的使用

需要在路由信息里面设置router的元信息meta

3.2.2 比较新而且简单的用法

  • 直接缓存所有组件/路由

  • 使用include来处理需要缓存的组件/路由

include有几种用法,可以是数组,字符串用标点隔开,也可以是正则,使用正则的时候需要使用v-bind来绑定。

  • 使用exclude来排除不需要缓存的路由

include正好相反,在exclude里的组件不会被缓存。用法类似,不作赘述

3.2.3 一种比较奇怪的情况

当页面跳转方式有A->CB->C两种,但是我们从A到C的时候,不需要缓存,从B到C的时候需要缓存。这时候就要用到路由的钩子结合老版本用法来实现了。

3.3 缓存组件的生命周期函数

缓存组件第一次打开的时候,和普通组件一样,也需要执行createdmounted等函数。
但是在被再次激活被停用时,这几个普通组件的生命周期函数都不会执行,会执行两个比较独特的生命周期函数。

  • activated
    这个会在缓存的组件重新激活时调用
  • deactivated
    这个会在缓存的组件停用时调用

参考链接


判断网页是通过PC端还是移动终端打开的

通过判断打开设备,跳转不同页面,可以根据 User-Agent 来区分

也可以执行其他操作:

JS判断客户端是否是iOS或者Android手机移动端:

通过判断浏览器的 userAgent,用正则来判断手机是否是ios和Android客户端。代码如下:

下面一个比较全面的浏览器检查函数,提供更多的检查内容,你可以检查是否是移动端(Mobile)、ipad、iphone、微信、QQ等。

第一种:

 

检测浏览器语言

第二种:

也可以通过这样来适配,然后直接转跳到移动端页面:

参考链接


判断网页是通过PC端还是移动终端打开的

CSS高度自适应铺满全屏

HTML:

CSS:

这里需要注意的是设置bodymin-height: 100vh;以及margin: 0;

vw和vh

vm、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。

具体描述如下:

  • vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
  • vh:视窗高度的百分比
  • vmin:取当前Vw和Vh中较小的那一个值
  • vmax:取当前Vw和Vh中较大的那一个值

vh和vw相对于视口的高度和宽度, 1vh 等于1/100的视口高度,1vw 等于1/100的视口宽度 比如:浏览器高度900px,宽度为750px, 1 vh = 900px/100 = 9 px,1vw = 750px/100 = 7.5 px, 很容易实现与同屏幕等高的框。

参考链接


Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute

最近在浏览器(Chrome 85.0.4183.121)调试网页的时候,出现如下警告信息:

继续阅读Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute