分类： JavaScript

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如何取模板里的值

@click为VUE里绑定的点击事件，此时事件存在于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 等函数中再次向其他地址跳转时会报错。

push和replace都会导致这个情况的发生

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

参考链接

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

前言

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

1.如何切换

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

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

  2. 使用路由（这个就是配置路由的问题了，不作赘述）

2.动态生成tab

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

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

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

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

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->C和B->C两种，但是我们从A到C的时候，不需要缓存，从B到C的时候需要缓存。这时候就要用到路由的钩子结合老版本用法来实现了。

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

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

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

参考链接

JavaScript正则表达式匹配成对出现的标记(平衡组-balanced group）

XRegExp.matchRecursive(str, left, right, [flags], [options])

Requires the XRegExp.matchRecursive addon, which is bundled in xregexp-all.js.

Returns an array of match strings between outermost left and right delimiters, or an array of objects with detailed match parts and position data. An error is thrown if delimiters are unbalanced within the data.

Parameters:
  • str {String}
    String to search.
  • left {String}
    Left delimiter as an XRegExp pattern.
  • right {String}
    Right delimiter as an XRegExp pattern.
  • [flags] {String}
    Any combination of XRegExp flags, used for the left and right delimiters.
  • [options] {Object}
    Lets you specify valueNames and escapeChar options.
Returns:
  • {Array}
    Array of matches, or an empty array.

Example

参考链接

vue中router-view与父组件之间的通信

在项目当中，遇到一个问题。当父页面的某个属性变化时，需要router-view中的页面根据不同的值进行不同的操作。

仔细想一下，其实类似父子组件之间的传值。

实现过程如下：

  1. 父组件绑定属性和事件

  1. router-view关联的属性和监听动作

注意：

v-on 绑定的函数名 test，尽量不要出现大写字母（驼峰命名）(比如 v-on:Aplus_clicked="testP")，否则在某些特殊使用方式的情况下，可能会出现无法触发的问题。

驼峰命名，可能会发生如下报错：

参考链接

Evaluating JavaScript code via import()

The import() operator lets us dynamically load ECMAScript modules. But they can also be used to evaluate JavaScript code (as Andrea Giammarchi recently pointed out to me), as an alternative to eval(). This blog post explains how that works.

eval() does not support export and import

A significant limitation of eval() is that it doesn’t support module syntax such as export and import.

If we use import() instead of eval(), we can actually evaluate module code, as we will see later in this blog post.

In the future, we may get Realms which are, roughly, a more powerful eval() with support for modules.

Evaluating simple code via import()

Let’s start by evaluating a console.log() via import():

What is going on here?

  • First we create a so-called data URI. The protocol of this kind of URI is data:. The remainder of the URI encodes the full resource instead pointing to it. In this case, the data URI contains a complete ECMAScript module – whose content type is text/javascript.
  • Then we dynamically import this module and therefore execute it.

Warning: This code only works in web browsers. On Node.js, import() does not support data URIs.

Accessing an export of an evaluated module  

The fulfillment value of the Promise returned by import() is a module namespace object. That gives us access to the default export and the named exports of the module. In the following example, we access the default export:

Creating data URIs via tagged templates

With an appropriate function esm (whose implementation we’ll see later), we can rewrite the previous example and create the data URI via a tagged template:

The implementation of esm looks as follows:

For the encoding, we have switched from charset=utf-8 to base64. Compare:

  • Source code: 'a' < 'b'
  • Data URI 1: data:text/javascript;charset=utf-8,'a'%20%3C%20'b'
  • Data URI 2: data:text/javascript;base64,J2EnIDwgJ2In

Each of the two ways of encoding has different pros and cons:

  • Benefits of charset=utf-8 (percent-encoding):
    • Much of the source code is still readable.
  • Benefits of base64:
    • The URIs are usually shorter.
    • Easier to nest because it doesn’t contain special characters such as apostrophes. We’ll see an example of nesting in the next section.

btoa() is a global utility function that encodes a string via base 64. Caveats:

  • It is not available on Node.js.
  • It should only be used for characters whose Unicode code points range from 0 to 255.

Evaluating a module that imports another module  

With tagged templates, we can nest data URIs and encode a module m2 that imports another module m1:

Further reading  

参考链接

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

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

也可以执行其他操作：

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

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

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

第一种：

 

检测浏览器语言

第二种：

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

参考链接

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