0%

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<sctipt>
import { watch,defineProps } from 'vue';
const props = defineProps({
bool: {
type: Boolean,
required: true
}
})

watch(
() => props.bool,
(newValue,oldValue) => {
console.log(newValue,oldValue)
}
)
</script>

参考文章

老项目用的 node-sass 版本比较低,要么降级 node 版本,要么更新依赖,我选择了更新依赖,这是期间碰到的问题及解决方案

Node Sass 升级

目前是直接升级依赖如下

1
2
"sass": "^1.52.3",
"sass-loader": "^10",

SassError: expected selector 报错 ::v-deep 替换 /deep/

搜了一下:尝试用 ::v-deep 替换 /deep/ ,成功解决了问题。

某些预处理器(例如 Sass)可能无法>>>正确解析。

TypeError: token.type.endsWith is not a function vue eslint 问题解决

直接把 babel-eslint 降级, 写死为 ^8.2.2

更改前: “babel-eslint”: “^10.1.0”,

更改后: “babel-eslint”: “^8.2.2”,

删除 node_modules

yarn install

参考文章

问题

数据库里的值
123
456
789
想搜索的值是:abc123456
然后能匹配到数据库里的 123 或者 456,你们都是怎么做的?

解决

https://dev.mysql.com/doc/refman/8.0/en/fulltext-natural-language.html

建表

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
mysql> CREATE TABLE articles (
id INT UNSIGNED AUTO_INCREMENT NOT NULL PRIMARY KEY,
title VARCHAR(200),
body TEXT,
FULLTEXT (title,body)
) ENGINE=InnoDB;

Query OK, 0 rows affected (0.08 sec)

mysql> INSERT INTO articles (title,body) VALUES
('MySQL Tutorial','DBMS stands for DataBase ...'),
('How To Use MySQL Well','After you went through a ...'),
('Optimizing MySQL','In this tutorial, we show ...'),
('1001 MySQL Tricks','1. Never run mysqld as root. 2. ...'),
('MySQL vs. YourSQL','In the following database comparison ...'),
('MySQL Security','When configured properly, MySQL ...');

Query OK, 6 rows affected (0.01 sec)
Records: 6 Duplicates: 0 Warnings: 0

SELECT * FROM articles
WHERE MATCH (title,body)
AGAINST ('database' IN NATURAL LANGUAGE MODE);
+----+-------------------+------------------------------------------+
| id | title | body |
+----+-------------------+------------------------------------------+
| 1 | MySQL Tutorial | DBMS stands for DataBase ... |
| 5 | MySQL vs. YourSQL | In the following database comparison ... |
+----+-------------------+------------------------------------------+
2 rows in set (0.00 sec)

查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
SELECT id, body, MATCH (title,body)
AGAINST ('Security implications of running MySQL as root'
IN NATURAL LANGUAGE MODE) AS score
FROM articles
WHERE MATCH (title,body)
AGAINST('Security implications of running MySQL as root'
IN NATURAL LANGUAGE MODE);

+----+-------------------------------------+-----------------+
| id | body | score |
+----+-------------------------------------+-----------------+
| 4 | 1. Never run mysqld as root. 2. ... | 1.5219271183014 |
| 6 | When configured properly, MySQL ... | 1.3114095926285 |
+----+-------------------------------------+-----------------+
2 rows in set (0.00 sec)

Sqlite 也有,但是要切片查询。

找出占用端口的进程

1
2
lsof -i tcp:端口
kill 进程ID

想在 Centos 上跑 puppeteer,但是需要装一堆依赖。

发现了一个特别有意思的安装方法

1
yum install chromium

哈哈装 chromium 内核就可以自动装相关依赖了

检查是否支持这个 api

1
2
3
4
5
if ('BarcodeDetector' in window) {
console.log('Barcode Detector supported!');
} else {
console.log('Barcode Detector is not supported in this browser');
}

初始化构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const barcodeDetector = new BarcodeDetector({
formats: [
'aztec',
'code_128',
'code_39',
'code_93',
'codabar',
'data_matrix',
'ean_13',
'ean_8',
'itf',
'pdf417',
'qr_code',
'upc_a',
'upc_e',
],
});

查看支持的条码

1
2
3
4
5
6
7
8
async function checkIfFormatIsSupported(format) {
return await BarcodeDetector.getSupportedFormats().then(
(supportedFormats) => {
console.log(supportedFormats);
return supportedFormats.indexOf(format) !== -1;
}
);
}

识别条码

1
2
3
4
5
6
7
try {
const barcodes = await barcodeDetector.detect(image);
barcodes.forEach((barcode) => console.log(barcode));
} catch (e) {
// if the imageElement is invalid, the DOMException will be thrown
console.error('Barcode detection failed:', e);
}

问题

Quill 富文本编辑器粘贴后跳转到顶部

解决

核心主要是设置 scrollingContainer 参数为挂载的Dom

1
2
3
4
editor = new Quill(editorDom.value, {
placeholder: '在此输入内容',
scrollingContainer: scrollDom.value
});
1
2
3
:deep(.ql-clipboard) {
position: fixed;
}

参考文章

公司的流水线服务器因为一些原因无法升级 nodojs,无法安装 nvm,故使用 Docker 构建前端项目。

解决

在项目文件夹下新建 Dockerfile

1
2
3
4
5
6
FROM node:latest
WORKDIR /app
COPY . .
RUN npm i --legacy-peer-deps --registry=https://registry.npm.taobao.org
RUN npm rebuild esbuild
RUN npm run build:test

解释 Dockerfile

  1. 容器使用 Node ,版本为最新版本
  2. 指定工作目录 /app
  3. 将项目文件夹拷贝到 /app
  4. 运行 npm i 安装依赖
  5. 重新构建 esbuild 模块
  6. 执行构建命令

运行下面命令

1
2
3
4
## 构建容器
docker build -t docker/web:v1.0 .
## 运行容器
docker run -v /path/to/dist:/app/dist docker/web:v1.0 npm run build:test

踩坑

报错 Could not resolve entry module (index.html).

这就是为什么要用上面 COPY . . 的原因了,字面意思,vite 找不到这个 index.html 文件,所以需要复制到 Dokcer 容器中

报错 You installed esbuild on another platform than the one you're currently using.

我使用的是 Macbook Pro M1 Pro,但是容器中使用的是 Ubuntu,所以需要运行 npm rebuild esbuild 来解决这个问题

报错 Unable to resolve dependency tree

1
2
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps

根据报错提示,可以执行 `npm i –legacy-peer-deps 来解决这个问题

Docker 其他常见命令

列出运行的容器

1
2
3
4
5
docker ps -a

返回结果
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
de8f85fbfa70 docker/web:v1.0 "docker-entrypoint.s…" 2 hours ago Exited (0) 2 hours ago infallible_clarke

复制 Docker 容器中的文件

1
docker cp cc72747c1eb9:/app/dist ./out

参考文章

特别鸣谢

感谢微信群 Go语言中文网-孙膑@混沌摆 @李李很穷十二点必睡觉 @Zero 这几位大佬的指点。