深海游弋的鱼 – 第 42 页 – 智障儿童欢乐多

Vue axios 发送 FormData 请求

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

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

Payload：

Content-Type: 'application/json; charset=utf-8'

1	Content-Type: 'application/json; charset=utf-8'

Form Data：

Content-Type: 'application/x-www-form-urlencoded'

Content-Type: 'multipart/form-data'

Content-Type: 'application/x-www-form-urlencoded'

Content-Type: 'multipart/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 请求（下面有这几种方式格式化参的数据样本，用于参考比较，看需求选择方式）
方式一，自己封装一个格式化函数：

import axios from 'axios'

################################### 请求方式一，全局使用
// 创建 axios 实例
const service = axios.create({
  baseURL: '',
  timeout: 20000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

// 将请求数据转换成功 formdata 接收格式
service.defaults.transformRequest = (data) => {
  return stringify(data)
}

################################### 请求方式二，局部使用
axios({
  method: 'post',
  url: 'http://localhost:8080/dzm',
  data: {
    username: 'dzm',
    password: 'dzm123456'
  },
  transformRequest: [
    function (data) {
      // 将请求数据转换成功 formdata 接收格式
      return stringify(data)
    }
  ],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

################################### 转换方法封装

// 将参数转换成功 formdata 接收格式
function stringify (data) {
  const formData = new FormData()
  for (const key in data) {
    // eslint-disable-next-line no-prototype-builtins
    if (data.hasOwnProperty(key)) {
      if (data[key]) {
        if (data[key].constructor === Array) {
          if (data[key][0]) {
            if (data[key][0].constructor === Object) {
              formData.append(key, JSON.stringify(data[key]))
            } else {
              data[key].forEach((item, index) => {
                formData.append(key + `[${index}]`, item)
              })
            }
          } else {
            formData.append(key + '[]', '')
          }
        } else if (data[key].constructor === Object) {
          formData.append(key, JSON.stringify(data[key]))
        } else {
          formData.append(key, data[key])
        }
      } else {
        if (data[key] === 0) {
          formData.append(key, 0)
        } else {
          formData.append(key, '')
        }
      }
    }
  }
  return formData
}

import axios from 'axios'

################################### 请求方式一，全局使用

// 创建 axios 实例

const service = axios.create({

baseURL: '',

timeout: 20000,

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

// 将请求数据转换成功 formdata 接收格式

service.defaults.transformRequest = (data) => {

return stringify(data)

}

################################### 请求方式二，局部使用

axios({

method: 'post',

url: 'http://localhost:8080/dzm',

data: {

username: 'dzm',

password: 'dzm123456'

transformRequest: [

function (data) {

// 将请求数据转换成功 formdata 接收格式

return stringify(data)

}

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

################################### 转换方法封装

// 将参数转换成功 formdata 接收格式

function stringify (data) {

const formData = new FormData()

for (const key in data) {

// eslint-disable-next-line no-prototype-builtins

if (data.hasOwnProperty(key)) {

if (data[key]) {

if (data[key].constructor === Array) {

if (data[key][0]) {

if (data[key][0].constructor === Object) {

formData.append(key, JSON.stringify(data[key]))

} else {

data[key].forEach((item, index) => {

formData.append(key + `[${index}]`, item)

})

}

} else {

formData.append(key + '[]', '')

}

} else if (data[key].constructor === Object) {

formData.append(key, JSON.stringify(data[key]))

} else {

formData.append(key, data[key])

}

} else {

if (data[key] === 0) {

formData.append(key, 0)

} else {

formData.append(key, '')

}

return formData

}

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

import axios from 'axios'
// qs 模块是安装 axios 模块的时候就有的，不用另行安装，通过 import 引入即可使用
import qs from 'qs'

################################### 请求方式一，全局使用

// 创建 axios 实例
const service = axios.create({
  baseURL: '',
  timeout: 20000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

// 将请求数据转换成功 formdata 接收格式，这一段选方式一那种拦截转换也可以。
service.interceptors.request.use(config => {
  const token = Vue.ls.get(ACCESS_TOKEN)
  if (token) {
    // 让每个请求携带自定义 token 请根据实际情况自行修改
    config.headers['X-Token'] = token
  }
  // 将请求数据转换成功 formdata 接收格式
  config.data = qs.stringify(config.data)
  return config
}, err)

################################### 请求方式二，局部使用
axios({
  method: 'post',
  url: 'http://localhost:8080/dzm',
  data: {
    username: 'dzm',
    password: 'dzm123456'
  },
  transformRequest: [
    function (data) {
      // 将请求数据转换成功 formdata 接收格式
      return qs.stringify(data)
    }
  ],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

import axios from 'axios'

// qs 模块是安装 axios 模块的时候就有的，不用另行安装，通过 import 引入即可使用

import qs from 'qs'

################################### 请求方式一，全局使用

// 创建 axios 实例

const service = axios.create({

baseURL: '',

timeout: 20000,

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

// 将请求数据转换成功 formdata 接收格式，这一段选方式一那种拦截转换也可以。

service.interceptors.request.use(config => {

const token = Vue.ls.get(ACCESS_TOKEN)

if (token) {

// 让每个请求携带自定义 token 请根据实际情况自行修改

config.headers['X-Token'] = token

}

// 将请求数据转换成功 formdata 接收格式

config.data = qs.stringify(config.data)

return config

}, err)

################################### 请求方式二，局部使用

axios({

method: 'post',

url: 'http://localhost:8080/dzm',

data: {

username: 'dzm',

password: 'dzm123456'

transformRequest: [

function (data) {

// 将请求数据转换成功 formdata 接收格式

return qs.stringify(data)

}

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

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

import axios from 'axios'

################################### 请求方式跟上面一样
axios({
  method: 'post',
  url: 'http://localhost:8080/dzm',
  data: {
    username: 'dzm',
    password: 'dzm123456'
  },
  transformRequest: [
    function (data) {
      // 将请求数据转换成功 formdata 接收格式
      return stringify(data)
    }
  ],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

################################### 转换方法封装

// 将参数转换成功 formdata 接收格式
function stringify (data) {
  let ret = ''
  for (const it in data) {
    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  ret = ret.substring(0, ret.lastIndexOf('&'))
  return ret
}

import axios from 'axios'

################################### 请求方式跟上面一样

axios({

method: 'post',

url: 'http://localhost:8080/dzm',

data: {

username: 'dzm',

password: 'dzm123456'

transformRequest: [

function (data) {

// 将请求数据转换成功 formdata 接收格式

return stringify(data)

}

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

})

################################### 转换方法封装

// 将参数转换成功 formdata 接收格式

function stringify (data) {

let ret = ''

for (const it in data) {

ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'

}

ret = ret.substring(0, ret.lastIndexOf('&'))

return ret

}

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

// 数组无值
id: 2086
intention: 
follower_id[]: 
concat_material[]:

// 数组有值
id: 2086
intention: 
follower_id[0]: 351
follower_id[1]: 66
// 数组 json 为空会被转成正常的数组，有值会被转成字符串，所以服务器需要注意处理
concat_material: [{"fname":"视频订单.xls","key":"local/other/099f4be38fb8e69bb031cbc36ed283a6.xls"}]

// 数组无值

id: 2086

intention:

follower_id[]:

concat_material[]:

// 数组有值

id: 2086

intention:

follower_id[0]: 351

follower_id[1]: 66

// 数组 json 为空会被转成正常的数组，有值会被转成字符串，所以服务器需要注意处理

concat_material: [{"fname":"视频订单.xls","key":"local/other/099f4be38fb8e69bb031cbc36ed283a6.xls"}]

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

// 数组无值
id: 2086
intention: 

// 数组有值
id: 2086
intention: 
follower_id[0]: 351
follower_id[1]: 66
concat_material[0][fname]: 视频订单.xls
concat_material[0][key]: local/other/099f4be38fb8e69bb031cbc36ed283a6.xls
concat_material[1][fname]: 视频订单1.xls
concat_material[1][key]: local/other/099f4be38fb8e69bb031cbc36ed283a8.xls

// 数组无值

id: 2086

intention:

// 数组有值

id: 2086

intention:

follower_id[0]: 351

follower_id[1]: 66

concat_material[0][fname]: 视频订单.xls

concat_material[0][key]: local/other/099f4be38fb8e69bb031cbc36ed283a6.xls

concat_material[1][fname]: 视频订单1.xls

concat_material[1][key]: local/other/099f4be38fb8e69bb031cbc36ed283a8.xls

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

// 数组无值
id: 743
intention: 2
follower_id: 
concat_material:

// 数组有值
id: 2086
intention: 
follower_id: 66,351
concat_material: [object Object],[object Object]

// 数组无值

id: 743

intention: 2

follower_id:

concat_material:

// 数组有值

id: 2086

intention:

follower_id: 66,351

concat_material: [object Object],[object Object]

参考链接

Vue axios 发送 FormData 请求

sqlite3 database is locked解决方案

注意：

sqlite3只支持一写多读.
读与读可以同时进行
读与写不可同时进行
写与写不可同时进行

sqlite3只支持一写多读.

读与读可以同时进行

读与写不可同时进行

写与写不可同时进行

什么时候会返回SQLITE_BUSY错误码？
官方文档给出的解释是：

The SQLITE_BUSY result code indicates that the database file could not be written (or in some cases read) because of concurrent activity by some other database
connection, usually a database connection in a separate process.

For example, if process A is in the middle of a large write transaction and at the same time process B attempts to start a new write transaction, process B will get back an SQLITE_BUSY result because SQLite only supports one writer at a time. Process B will need to wait for process A to finish its transaction before starting a new transaction. The sqlite3_busy_timeout() and sqlite3_busy_handler() interfaces and the busy_timeout pragma are available to process B to help it deal with SQLITE_BUSY errors.

The SQLITE_BUSY result code indicates that the database file could not be written (or in some cases read) because of concurrent activity by some other database

connection, usually a database connection in a separate process.

For example, if process A is in the middle of a large write transaction and at the same time process B attempts to start a new write transaction, process B will get back an SQLITE_BUSY result because SQLite only supports one writer at a time. Process B will need to wait for process A to finish its transaction before starting a new transaction. The sqlite3_busy_timeout() and sqlite3_busy_handler() interfaces and the busy_timeout pragma are available to process B to help it deal with SQLITE_BUSY errors.

SQLite只支持库级锁，库级锁意味着什么？——意味着同时只能允许一个写操作，也就是说，即事务T1在A表插入一条数据，事务T2在B表中插入一条数据，这两个操作不能同时进行，即使你的机器有100个CPU，也无法同时进行，而只能顺序进行。表级都不能并行，更别说元组级了——这就是库级锁。但是，SQLite尽量延迟申请X锁，直到数据块真正写盘时才申请X锁，这是非常巧妙而有效的。

简单的办法，全局加锁，单线程执行，复杂一点，则可以启用一个专门的数据库线程异步执行操作。

Many concurrent writers? → choose client/server

If many threads and/or processes need to write the database at the same instant (and they cannot queue up and take turns) then it is best to select a database engine that supports that capability, which always means a client/server database engine.

SQLite only supports one writer at a time per database file. But in most cases, a write transaction only takes milliseconds and so multiple writers can simply take turns. SQLite will handle more write concurrency than many people suspect. Nevertheless, client/server database systems, because they have a long-running server process at hand to coordinate access, can usually handle far more write concurrency than SQLite ever will.

Many concurrent writers? → choose client/server

If many threads and/or processes need to write the database at the same instant (and they cannot queue up and take turns) then it is best to select a database engine that supports that capability, which always means a client/server database engine.

SQLite only supports one writer at a time per database file. But in most cases, a write transaction only takes milliseconds and so multiple writers can simply take turns. SQLite will handle more write concurrency than many people suspect. Nevertheless, client/server database systems, because they have a long-running server process at hand to coordinate access, can usually handle far more write concurrency than SQLite ever will.

参考链接

synchronized全局锁和实例锁的区别

实例锁 -- 锁在某一个实例对象上。如果该类是单例，那么该锁也具有全局锁的概念。
实例锁对应的就是synchronized关键字。
全局锁 -- 该锁针对的是类，无论实例多少个对象，那么线程都共享该锁。
全局锁对应的就是static synchronized（或者是锁在该类的class或者classloader对象上）。

关于“实例锁”和“全局锁”有一个很形象的例子：

pulbic class Something {
    public synchronized void isSyncA(){}

    public synchronized void isSyncB(){}

    public static synchronized void cSyncA(){}

    public static synchronized void cSyncB(){}
}

pulbic class Something {

public synchronized void isSyncA(){}

public synchronized void isSyncB(){}

public static synchronized void cSyncA(){}

public static synchronized void cSyncB(){}

}

假设，Something有两个实例x和y。分析下面4组表达式获取的锁的情况。
(01) x.isSyncA()与x.isSyncB()
(02) x.isSyncA()与y.isSyncA()
(03) x.cSyncA()与y.cSyncB()
(04) x.isSyncA()与Something.cSyncA()

(01) 不能被同时访问。因为isSyncA()和isSyncB()都是访问同一个对象(对象x)的同步锁！

(02) 可以同时被访问。因为访问的不是同一个对象的同步锁，x.isSyncA()访问的是x的同步锁，而y.isSyncA()访问的是y的同步锁。

(03) 不能被同时访问。因为cSyncA()和cSyncB()都是static类型，x.cSyncA()相当于Something.isSyncA()，y.cSyncB()相当于Something.isSyncB()，因此它们共用一个同步锁，不能被同时反问。

(04) 可以被同时访问。因为isSyncA()是实例方法，x.isSyncA()使用的是对象x的锁；而cSyncA()是静态方法，Something.cSyncA()可以理解对使用的是“类的锁”。因此，它们是可以被同时访问的。

参考链接

mybaties连接sqlite，并读取blob类型数据时，报错 java.sql.SQLFeatureNotSupportedException

java.sql.SQLException: not implemented by SQLite JDBC driver

1	java.sql.SQLException: not implemented by SQLite JDBC driver

错误,或者如下错误：

2021-06-03 09:25:20.435 ERROR 15643 --- [nio-8080-exec-7] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.apache.ibatis.exceptions.PersistenceException: 
### Error querying database.  Cause: org.apache.ibatis.executor.result.ResultMapException: Error attempting to get column 'appIcon' from result set.  Cause: java.sql.SQLFeatureNotSupportedException
### The error may exist in xxxx.java (best guess)
### The error may involve xxx.select
### The error occurred while handling results
### SQL: SELECT * FROM xxx WHERE id=?
### Cause: org.apache.ibatis.executor.result.ResultMapException: Error attempting to get column 'appIcon' from result set.  Cause: java.sql.SQLFeatureNotSupportedException] with root cause

2021-06-03 09:25:20.435 ERROR 15643 --- [nio-8080-exec-7] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.apache.ibatis.exceptions.PersistenceException:

### Error querying database. Cause: org.apache.ibatis.executor.result.ResultMapException: Error attempting to get column 'appIcon' from result set. Cause: java.sql.SQLFeatureNotSupportedException

### The error may exist in xxxx.java (best guess)

### The error may involve xxx.select

### The error occurred while handling results

### SQL: SELECT * FROM xxx WHERE id=?

### Cause: org.apache.ibatis.executor.result.ResultMapException: Error attempting to get column 'appIcon' from result set. Cause: java.sql.SQLFeatureNotSupportedException] with root cause

场景：
具体需求，要求像springboot连接mysql或者pgsql数据库一样，在application配置文件中配置sqlite数据库信息，并实现对blob类型数据（我们的库中有该类型的数据）的读写，按照平常一样写好controller、service、dao、mapper.xml后，执行查询操作后报错

原因分析：
sqlite的driver中，JDBC4ResultSet没有实现以下接口：

public Blob getBlob(int col)
throws SQLException { throw unused(); }
public Blob getBlob(String col)
throws SQLException { throw unused(); }

public Blob getBlob(int col)

throws SQLException { throw unused(); }

public Blob getBlob(String col)

throws SQLException { throw unused(); }

而是直接抛出了异常。
解决方法：
mapper.xml中该字段的设置：

<select id="queryByList" resultMap="queryBaseResultMap">
    select * from my_blob 
</select>
<resultMap id="queryBaseResultMap" type="com.wx.model.MyBlob" >
    <id column="Id" property="id" jdbcType="INTEGER" />
    <result column="blob" property="blob" typeHandler="com.wx.handler.BlobTypeHandler"/> 
</resultMap>

select * from my_blob

</select>

</resultMap>

即blob字段加个typeHandler属性。
然后自定义一个BlobTypeHandler处理类：

public class BlobTypeHandler extends BaseTypeHandler<byte[]> {

    @Override
    public void setNonNullParameter(PreparedStatement ps, int i, byte[] parameter, JdbcType jdbcType) throws SQLException {
        ps.setBytes(i, parameter);
    }

    @Override
    public byte[] getNullableResult(ResultSet rs, String columnName) throws SQLException {
        return rs.getBytes(columnName);
    }

    @Override
    public byte[] getNullableResult(ResultSet rs, int columnIndex) throws SQLException {
        return rs.getBytes(columnIndex);
    }

    @Override
    public byte[] getNullableResult(CallableStatement cs, int columnIndex) throws SQLException {
        return cs.getBytes(columnIndex);
    }
}

public class BlobTypeHandler extends BaseTypeHandler<byte[]> {

@Override

public void setNonNullParameter(PreparedStatement ps, int i, byte[] parameter, JdbcType jdbcType) throws SQLException {

ps.setBytes(i, parameter);

}

@Override

public byte[] getNullableResult(ResultSet rs, String columnName) throws SQLException {

return rs.getBytes(columnName);

}

@Override

public byte[] getNullableResult(ResultSet rs, int columnIndex) throws SQLException {

return rs.getBytes(columnIndex);

}

@Override

public byte[] getNullableResult(CallableStatement cs, int columnIndex) throws SQLException {

return cs.getBytes(columnIndex);

}

注意：实体类中blob字段类型是byte[]。

参考链接

mybaties连接sqlite，并读取blob类型数据时，报 java.sql.SQLException: not implemented by SQLite JDBC driver错误

JsonParser解析json字符串双引号问题

** 今天在项目中使用到了JsonParser解析json字符串为JsonArray或者JsonObject，解析之后使用如下代码获取到的字符串多了一层 “”（双引号） **

JSON字符串格式如下

{“key”:"value","key1":"value1"}

1	{“key”:"value","key1":"value1"}

JsonObject jarray = jsonParser.prase( json ).getAsJsonObject();
 for (String k : Jarray.keySet()) {
      System.out.println(Jarray.get(k).toString()); //输出的字符串是 “value”   "value1" (是带有 “” 的)
 }

JsonObject jarray = jsonParser.prase( json ).getAsJsonObject();

for (String k : Jarray.keySet()) {

System.out.println(Jarray.get(k).toString()); //输出的字符串是 “value” "value1" (是带有 “” 的)

}

** 如果将这样的字符串直接设值在 yaml 文件中，那么设置完成后的 yaml文件如下： **

---
key: "\"value\""
key1: "\"value1\""

---

key: "\"value\""

key1: "\"value1\""

** 调试查看之后发现 Jarray.get(k) 获取得到的是 JsonPrimitive对象（会在字符串外面再加一对引号） **

** 弄清楚原因之后我们只要在 Jarray.get(k) 之后再对对象取值就可以了 **

JsonObject jarray = jsonParser.prase( json ).getAsJsonObject();
 for (String k : Jarray.keySet()) {
      System.out.println(Jarray.get(k).getAsString()); //输出的字符串是  value   value1 (是不带有 “” 的)
 }

JsonObject jarray = jsonParser.prase( json ).getAsJsonObject();

for (String k : Jarray.keySet()) {

System.out.println(Jarray.get(k).getAsString()); //输出的字符串是 value value1 (是不带有 “” 的)

}

参考链接

JsonParser解析json字符串双引号问题

OS X EI Capitan curl: (22) The requested URL returned error: 403 [[[!!! BREAKING CHANGE !!!]]] Support for clients that do not support Server Name Indication is temporarily disabled and will be permanently deprecated soon.

最近在OS X EI Capitan系统上执行升级工作的时候，发生错误，内容如下：

$  brew upgrade cmake
==> Upgrading 1 outdated package:
cmake 3.17.3 -> 3.20.3
==> Upgrading cmake 3.17.3 -> 3.20.3 
==> Downloading https://www.bytereef.org/contrib/decimal.diff
Already downloaded: /Users/longsky/Library/Caches/Homebrew/downloads/f60b5004541eb3c87cce87ef3bf94933a2684ab267346afdc45ae1622ffa923a--decimal.diff
==> Downloading https://files.pythonhosted.org/packages/f6/e9/19af16328705915233299f6f1f02db95899fb00c75ac9da4757aa1e5d1de/setuptools-56.0.0.t

curl: (22) The requested URL returned error: 403 [[[!!! BREAKING CHANGE !!!]]] Support for clients that do not support Server Name Indication is temporarily disabled and will be permanently deprecated soon. See https://status.python.org/incidents/hzmjhqsdjqgb and ht
Error: Failed to download resource "python@3.9--setuptools"
Download failed: https://files.pythonhosted.org/packages/f6/e9/19af16328705915233299f6f1f02db95899fb00c75ac9da4757aa1e5d1de/setuptools-56.0.0.tar.gz

$ brew upgrade cmake

==> Upgrading 1 outdated package:

cmake 3.17.3 -> 3.20.3

==> Upgrading cmake 3.17.3 -> 3.20.3

==> Downloading https://www.bytereef.org/contrib/decimal.diff

Already downloaded: /Users/longsky/Library/Caches/Homebrew/downloads/f60b5004541eb3c87cce87ef3bf94933a2684ab267346afdc45ae1622ffa923a--decimal.diff

==> Downloading https://files.pythonhosted.org/packages/f6/e9/19af16328705915233299f6f1f02db95899fb00c75ac9da4757aa1e5d1de/setuptools-56.0.0.t

curl: (22) The requested URL returned error: 403 [[[!!! BREAKING CHANGE !!!]]] Support for clients that do not support Server Name Indication is temporarily disabled and will be permanently deprecated soon. See https://status.python.org/incidents/hzmjhqsdjqgb and ht

Error: Failed to download resource "python@3.9--setuptools"

Download failed: https://files.pythonhosted.org/packages/f6/e9/19af16328705915233299f6f1f02db95899fb00c75ac9da4757aa1e5d1de/setuptools-56.0.0.tar.gz

排查了很久，发现是以前为了修复解决macOS系统curl报告https证书不正确(curl: (60) SSL certificate problem: Invalid certificate chain)问题而配置了curl忽略安全配置信息导致的，如下：

$ cat .curlrc 
--insecure

1 2	$ cat .curlrc --insecure

移除这个配置项目即可解决问题。

参考链接

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

解决

Uncaught (in promise) Error: Navigation cancelled from “/Search#1608911018888” to “/Search#1608911019245” with a new navigation.

1	Uncaught (in promise) Error: Navigation cancelled from “/Search#1608911018888” to “/Search#1608911019245” with a new navigation.

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

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

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

import VueRouter from 'vue-router';
Vue.use(VueRouter);
//解决编程式路由往同一地址跳转时会报错的情况
const rop = VueRouter.prototype.push;
const ror = VueRouter.prototype.replace;
//push
VueRouter.prototype.push = function (location, onResolve, onReject) {
    if (onResolve || onReject) return rop.call(this, location, onResolve, onReject)
    return rop.call(this, location).catch(err => err)
};
//replace
VueRouter.prototype.replace = function (location, onResolve, onReject) {
    if (onResolve || onReject) return ror.call(this, location, onResolve, onReject)
    return ror.call(this, location).catch(err => err)
};


..............................

new Vue({
        el: '#q-app',
        router: router,
});

import VueRouter from 'vue-router';

Vue.use(VueRouter);

//解决编程式路由往同一地址跳转时会报错的情况

const rop = VueRouter.prototype.push;

const ror = VueRouter.prototype.replace;

//push

VueRouter.prototype.push = function (location, onResolve, onReject) {

if (onResolve || onReject) return rop.call(this, location, onResolve, onReject)

return rop.call(this, location).catch(err => err)

};

//replace

VueRouter.prototype.replace = function (location, onResolve, onReject) {

if (onResolve || onReject) return ror.call(this, location, onResolve, onReject)

return ror.call(this, location).catch(err => err)

};

..............................

new Vue({

el: '#q-app',

router: router,

});

参考链接

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

前言

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

1.如何切换

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

//通过点击就可以实现两个组件来回切换
<button @click="changeView">切换view</button>
<component :is="currentView"></component>

import pageA from "@/views/pageA";
import pageB from "@/views/pageB";

computed: {
  currentView(){
      return this.viewList[this.index];
  }
},
 methods: {
  changeView() {
    this.index=(++this.index)%2
  }
}

//通过点击就可以实现两个组件来回切换

<button @click="changeView">切换view</button>

import pageA from "@/views/pageA";

import pageB from "@/views/pageB";

computed: {

currentView(){

return this.viewList[this.index];

}

methods: {

changeView() {

this.index=(++this.index)%2

}

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

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

2.动态生成tab

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

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

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

<menu>
  <menu-item v-for="(item,index) in menuList" :key="index" @click="addToTabList(item.path)">
    <router-link :to="item.path">{{item.name}}</router-link>
  <menu-item>
</menu>

<menu>

<menu-item v-for="(item,index) in menuList" :key="index" @click="addToTabList(item.path)">

<router-link :to="item.path">{{item.name}}</router-link>

<menu-item>

</menu>

<template>
  <menu class="left"/>//menu代码部分如上
  <div class="right">
    <tab-list>
      <tab-item v-for="(item,index) in tabList" :key="index">
        <router-link :to="item.path">{{item.name}}</router-link>
        <icon class="delete" @click="deleteTab"></icon>
      </tab-item>
    </tab-list>
    <page-view>
      <router-view></router-view>//这里是页面展示
    </page-view>
  </div>
</template>

<menu class="left"/>//menu代码部分如上

<tab-list>

<tab-item v-for="(item,index) in tabList" :key="index">

<router-link :to="item.path">{{item.name}}</router-link>

</tab-item>

</tab-list>

<page-view>

<router-view></router-view>//这里是页面展示

</page-view>

</div>

</template>

以上代码并非实际代码，只提供一个大概的思路。至于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来缓存固定组件，会无效

//无效
<keep-alive>
  <my-component></my-component>
</keep-alive>

//无效

<keep-alive>

<my-component></my-component>

</keep-alive>

3.2 使用

3.2.1 老版本`vue 2.1`之前的使用

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

<keep-alive>

<router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>

<router-view v-if="!$route.meta.keepAlive"></router-view>

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

export default new Router({
  routes: [
    {
      path: '/a',
      name: 'A',
      component: A,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/b',
      name: 'B',
      component: B,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

export default new Router({

routes: [

{

path: '/a',

name: 'A',

component: A,

meta: {

keepAlive: false // 不需要缓存

}

{

path: '/b',

name: 'B',

component: B,

meta: {

keepAlive: true // 需要被缓存

}

]

})

3.2.2 比较新而且简单的用法

直接缓存所有组件/路由

<keep-alive>
    <router-view/>
</keep-alive>
<keep-alive>
   <component :is="view"></component>
</keep-alive>

<keep-alive>

<router-view/>

</keep-alive>

<keep-alive>

</keep-alive>

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

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

<keep-alive include="['a','b']">//缓存name为a,b的组件
<keep-alive include ="a,b">//缓存name为a,b的组件
<keep-alive :include="/^store/">//缓存name以store开头的组件
    <router-view/>//可以为router-view
    <component :is="view"></component>//也可以是动态组件
</keep-alive>

<keep-alive include="['a','b']">//缓存name为a,b的组件

<keep-alive include ="a,b">//缓存name为a,b的组件

<keep-alive :include="/^store/">//缓存name以store开头的组件

<router-view/>//可以为router-view

<component :is="view"></component>//也可以是动态组件

</keep-alive>

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

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

3.2.3 一种比较奇怪的情况

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

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = false; // 让下一页不缓存
    next();
  }
};

export default {

data() {

return {};

methods: {},

beforeRouteLeave(to, from, next) {

to.meta.keepAlive = false; // 让下一页不缓存

next();

}

};

export default {
  data() {
    return {};
  },
  methods: {},
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = true; //下一页缓存
    next();
  }
};

export default {

data() {

return {};

methods: {},

beforeRouteLeave(to, from, next) {

// 设置下一个路由的 meta

to.meta.keepAlive = true; //下一页缓存

next();

}

};

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

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

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

参考链接

certbot-auto不再支持所有的操作系统,新的ssl证书方法

最近在一台服务器执行letsencrypt-auto命令出现错误：

$ sudo ./certbot-auto 
Your system is not supported by certbot-auto anymore.
certbot-auto and its Certbot installation will no longer receive updates.
You will not receive any bug fixes including those fixing server compatibility
or security problems.
Please visit https://certbot.eff.org/ to check for other alternatives.
Saving debug log to /var/log/letsencrypt/letsencrypt.log

$ sudo ./certbot-auto

Your system is not supported by certbot-auto anymore.

certbot-auto and its Certbot installation will no longer receive updates.

You will not receive any bug fixes including those fixing server compatibility

or security problems.

Please visit https://certbot.eff.org/ to check for other alternatives.

Saving debug log to /var/log/letsencrypt/letsencrypt.log

系统不再被支持！！！

查看certbot（https://github.com/certbot/certbot/releases）在

2021年1月的更新日志：

●certbot-auto was deprecated on all systems. For more information about this
change, see
https://community.letsencrypt.org/t/certbot-auto-no-longer-works-on-debian-based-systems/139702/7.

●certbot-auto was deprecated on all systems. For more information about this

change, see

https://community.letsencrypt.org/t/certbot-auto-no-longer-works-on-debian-based-systems/139702/7.

可知：

certbot-auto不再支持所有的操作系统！根据作者的说法，certbot团队认为维护certbot-auto在几乎所有流行的UNIX系统以及各种环境上的正常运行是一项繁重的工作，加之certbot-auto是基于python 2编写的，而python 2即将寿终正寝，将certbot-auto迁移至python 3需要大量工作，这非常困难，因此团队决定放弃certbot-auto的维护。

既然如此，现在我们还能继续使用certbot吗？certbot团队使用了基于snap的新的分发方法。

1. 环境
操作系统：CentOS 7

Webserver：Nginx

2. 安装letsencrypt
2.1. 安装letsencrypt之前，需要先安装snaps。

a. 先安装epel。

$ yum install epel-release

1	$ yum install epel-release

b. 安装snapd。

$ yum install snapd

1	$ yum install snapd

c. 启用snapd.socket。

$ systemctl enable --now snapd.socket

1	$ systemctl enable --now snapd.socket

d. 创建/var/lib/snapd/snap和/snap之间的链接。

$ ln -s /var/lib/snapd/snap /snap

1	$ ln -s /var/lib/snapd/snap /snap

e. 退出账号并重新登录，或者重启系统，确保snap启用。

f. 将snap更新至最新版本。

$ sudo snap install core

$ sudo snap refresh core

$ sudo snap install core

$ sudo snap refresh core

2.2. 卸载已安装的certbot。

如果之前在系统上已经部署过certbot，则需要先将其进行卸载。

a. 卸载certbot。

$ yum remove certbot

1	$ yum remove certbot

b. 根据certbot安装位置删除相关文件。

$ rm /usr/local/bin/certbot-auto

1	$ rm /usr/local/bin/certbot-auto

c. 删除certbot附加软件包。

$ rm -rf /opt/eff.org/certbot

1	$ rm -rf /opt/eff.org/certbot

2.3. 安装certbot。

a. 通过snap安装certbot。

$ snap install --classic certbot

1	$ snap install --classic certbot

b. 创建/snap/bin/certbot的软链接，方便certbot命令的使用。

$ ln -s /snap/bin/certbot /usr/bin/certbot

1	$ ln -s /snap/bin/certbot /usr/bin/certbot

3. letsencrypt的使用
3.1. 获取证书。

a. 生成证书。

确保nginx处于运行状态，需要获取证书的站点在80端口，并且可以正常访问。

$ certbot certonly --nginx --email xxx@mail.com -d a.do.com -d b.do.com

1	$ certbot certonly --nginx --email xxx@mail.com -d a.do.com -d b.do.com

b. 更新nginx配置并重启nginx。

3.2. 更新证书。

$ certbot renew

1	$ certbot renew

ubuntu系统的话，使用如下命令方式安装：

$ sudo snap install --classic certbot

1	$ sudo snap install --classic certbot

参考链接

certbot-auto不再支持所有的操作系统,新的ssl证书方法

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

// Basic usage
let str = '(t((e))s)t()(ing)';
XRegExp.matchRecursive(str, '\\(', '\\)', 'g');
// -> ['t((e))s', '', 'ing']

// Extended information mode with valueNames
str = 'Here is <div> <div>an</div></div> example';
XRegExp.matchRecursive(str, '<div\\s*>', '</div>', 'gi', {
  valueNames: ['between', 'left', 'match', 'right']
});
/* -> [
{name: 'between', value: 'Here is ',       start: 0,  end: 8},
{name: 'left',    value: '<div>',          start: 8,  end: 13},
{name: 'match',   value: ' <div>an</div>', start: 13, end: 27},
{name: 'right',   value: '</div>',         start: 27, end: 33},
{name: 'between', value: ' example',       start: 33, end: 41}
] */

// Omitting unneeded parts with null valueNames, and using escapeChar
str = '...{1}.\\{{function(x,y){return {y:x}}}';
XRegExp.matchRecursive(str, '{', '}', 'g', {
  valueNames: ['literal', null, 'value', null],
  escapeChar: '\\'
});
/* -> [
{name: 'literal', value: '...',  start: 0, end: 3},
{name: 'value',   value: '1',    start: 4, end: 5},
{name: 'literal', value: '.\\{', start: 6, end: 9},
{name: 'value',   value: 'function(x,y){return {y:x}}', start: 10, end: 37}
] */

// Sticky mode via flag y
str = '<1><<<2>>><3>4<5>';
XRegExp.matchRecursive(str, '<', '>', 'gy');
// -> ['1', '<<2>>', '3']

// Basic usage

let str = '(t((e))s)t()(ing)';

XRegExp.matchRecursive(str, '\$', '\$', 'g');

// -> ['t((e))s', '', 'ing']

// Extended information mode with valueNames

str = 'Here is <div> <div>an</div></div> example';

XRegExp.matchRecursive(str, '<div\\s*>', '</div>', 'gi', {

valueNames: ['between', 'left', 'match', 'right']

});

/* -> [

{name: 'between', value: 'Here is ', start: 0, end: 8},

{name: 'left', value: '<div>', start: 8, end: 13},

{name: 'match', value: ' <div>an</div>', start: 13, end: 27},

{name: 'right', value: '</div>', start: 27, end: 33},

{name: 'between', value: ' example', start: 33, end: 41}

] */

// Omitting unneeded parts with null valueNames, and using escapeChar

str = '...{1}.\\{{function(x,y){return {y:x}}}';

XRegExp.matchRecursive(str, '{', '}', 'g', {

valueNames: ['literal', null, 'value', null],

escapeChar: '\\'

});

/* -> [

{name: 'literal', value: '...', start: 0, end: 3},

{name: 'value', value: '1', start: 4, end: 5},

{name: 'literal', value: '.\\{', start: 6, end: 9},

{name: 'value', value: 'function(x,y){return {y:x}}', start: 10, end: 37}

] */

// Sticky mode via flag y

str = '<1><<<2>>><3>4<5>';

XRegExp.matchRecursive(str, '<', '>', 'gy');

// -> ['1', '<<2>>', '3']

2025 年 10 月
一	二	三	四	五	六	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

参考链接

参考链接

参考链接

参考链接

参考链接

参考链接

参考链接

前言

1.如何切换

2.动态生成tab

3.缓存组件

3.1 keep-alive

3.2 使用

3.2.1 老版本vue 2.1之前的使用

3.2.2 比较新而且简单的用法

3.2.3 一种比较奇怪的情况

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

参考链接

参考链接

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

Example

参考链接

3.2.1 老版本`vue 2.1`之前的使用